XAML网格，iOS开发人员的面板。

Question

我正在尝试布局下面的屏幕。这是一个相对简单的布局，我可以很容易地做Android的axml或Windows的XAML。然而，在iOS中，我不知道从哪里开始。

​

​

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

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

以绿色突出显示的红色区域将是XAML中的StackPanel或Android中的LinearLayout。同样，我该如何在iOS中做到这一点呢？

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

Answer 1

我知道这个问题已经提了几个月了，但如果它有帮助的话--请查看MarkupKit：

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

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

你可以在这里找到MarkupKit的主要功能的介绍：

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

Answer 2

我使用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>

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

Answer 3

这取决于你想要变得多复杂。

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

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