适用于 XAML\AXML 开发人员的 iOS 网格、面板。

Question

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

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

在 XAML 中，以红色突出显示的区域将是一个简单的两列网格，我应该如何在 iOS 中执行此操作？

包含红色区域的绿色高亮区域在 XAML 中是 StackPanel，在 Android 中是 LinearLayout。同样，我将如何在 iOS 中执行此操作？

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

Answer 1

我使用 MarkupKit 对此进行了原型(prototype)设计。您可以看到以下结果:

我用来生成 View 的标记如下:

<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>

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