1

我正在尝试布局下面的屏幕。这是一个相对简单的布局，我可以轻松地完成 Android 的 axml 或 Windows 的 XAML。但是在 iOS 中我不知道从哪里开始。

所需的屏幕布局

iOS 缺少 StackPanel、LinearLayout 和静态 Grid 等价物。它有表格，但它们需要是动态的，或者据我所知每个屏幕只有一个静态表格。

以红色突出显示的区域将是 XAML 中的一个简单的两列网格，我应该如何在 iOS 中做到这一点？

以绿色突出显示并包含红色区域的区域将是 XAML 中的 StackPanel 或 Android 中的 LinearLayout。我又将如何在 iOS 中做到这一点？

FWIW 我正在使用 Xamarin 开发，但这个问题不是 Xamarin 特定的

4

3 回答 3

1

我意识到这个问题已经存在几个月了，但如果它有帮助 - 请查看 MarkupKit：

https://github.com/gk-brown/MarkupKit

这是我专门为解决此类用例而创建的一个开源项目。它允许您使用类似于 XAML 或 Android 的标记来构建本机 iOS 用户界面。基于上面的模型，我建议使用 LMTableView 的实例作为根视图和包含 LMRowView 和 LMColumnView 组合的单元格。如果你的目标是 iOS 9 及更高版本，你也可以使用 UIStackView。

您可以在此处找到有关 MarkupKit 主要功能的介绍：

https://gkbrown.wordpress.com/2015/07/14/introducing-markupkit/

于 2015-09-30T18:18:54.227 回答
1

我使用 MarkupKit 对此进行了原型设计。你可以看到下面的结果：

我用来生成视图的标记如下：

<LMTableView style="groupedTableView">
    <!-- User name -->
    <?sectionHeaderView?>
    <LMRowView layoutMarginTop="6" layoutMarginBottom="6" layoutMarginLeft="12" layoutMarginRight="12" backgroundColor="#0085e1">
        <UILabel text="BOB ADAMS" font="System 13" textColor="#ffffff"/>
    </LMRowView>

    <?sectionBreak?>

    <!-- Next appointment detail -->
    <?sectionHeaderView?>
    <LMRowView layoutMarginTop="6" layoutMarginBottom="6" layoutMarginLeft="12" layoutMarginRight="12" >
        <UILabel text="NEXT APPOINTMENT" font="System 13" textColor="#808080"/>
    </LMRowView>

    <UITableViewCell textLabel.text="11:30 - in 1 hour 55 minutes" textLabel.textColor="#ffffff" textLabel.font="System 13" backgroundColor="#2e5785"/>

    <LMTableViewCell>
        <LMColumnView>
            <LMRowView>
                <UILabel weight="1" text="MCLEAN, Jim" font="System-Bold 18"/>
                <UILabel text="36y" font="System-Bold 18"/>
            </LMRowView>

            <LMColumnView alignToGrid="true">
                <LMRowView>
                    <UILabel text="Born" font="System 13" textColor="#808080"/>
                    <UILabel text="27-Feb-1978"/>
                </LMRowView>

                <LMRowView>
                    <UILabel text="Gender" font="System 13" textColor="#808080"/>
                    <UILabel text="Male"/>
                </LMRowView>

                <LMRowView>
                    <UILabel text="NHS Number" font="System 13" textColor="#808080"/>
                    <UILabel text="111 222 3333"/>
                </LMRowView>

                <LMRowView>
                    <UILabel text="Postcode" font="System 13" textColor="#808080"/>
                    <UILabel text="Z99 9ZZ"/>
                </LMRowView>
            </LMColumnView>
        </LMColumnView>
    </LMTableViewCell>

    <?sectionBreak?>

    <!-- Daily summary -->
    <LMTableViewCell accessoryType="disclosureIndicator">
        <LMRowView>
            <UILabel weight="1" text="Appointments Today"/>
            <UILabel text="3" textColor="#808080"/>
        </LMRowView>
    </LMTableViewCell>

    <LMTableViewCell accessoryType="disclosureIndicator">
        <LMRowView>
            <UILabel weight="1" text="Downloaded"/>
            <UIActivityIndicatorView activityIndicatorViewStyle="gray" animating="true"/>
            <UILabel text="4" textColor="#808080"/>
        </LMRowView>
    </LMTableViewCell>

    <LMTableViewCell accessoryType="disclosureIndicator">
        <LMRowView>
            <UILabel weight="1" text="Appointments Progress"/>
            <UILabel text="1" textColor="#808080"/>
        </LMRowView>
    </LMTableViewCell>
</LMTableView>

我没有包含任何图像，因为我无权访问您在模型中使用的资产。但是，它们很容易添加。

于 2015-10-01T16:57:53.620 回答
0

这取决于您想要获得的复杂程度。

最简单的设置是创建一个 UIView 作为您的容器，然后手动添加标签和文本的所有视图。你必须自己做尺寸。

如果您使用自动布局，您仍然需要创建所有八个视图，但您可以指定如何将视图附加和链接在一起的规则。

当您考虑到 UI 将与其他形式因素一起使用时，自动布局会派上用场，您可以在其中添加规则以决定其应如何扩展。

您可以在设计器上设计单元格，并从代码中引用各种插槽来填充它们。

于 2015-03-25T16:38:15.610 回答