Question

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

Desired screen layout

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

Red中突出显示的区域是XAML中的一个简单的两列网格，我该怎么做呢？

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

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

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

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，然后手动添加标签和文本的所有视图。您必须自己进行尺寸调整。

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

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

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

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

3 个答案: