1

以下の画面をレイアウトしようとしています。Android の axml や Windows の XAML を簡単に実行できる、比較的単純なレイアウトです。ただし、iOS ではどこから始めればよいかわかりません。

ご希望の画面構成

iOS には、StackPanel、LinearLayout、および静的 Grid に相当するものがありません。テーブルがありますが、それらは動的であるか、画面ごとに1つの静的テーブルであることがわかっている限り必要です。

赤で強調表示された領域は、XAML では単純な 2 列のグリッドになりますが、iOS ではどのようにすればよいですか?

赤色の領域を囲む緑色で強調表示された領域は、XAML の StackPanel または Android の LinearLayout になります。繰り返しますが、iOSでそれを行うにはどうすればよいですか?

FWIW Xamarin を使用して開発していますが、この質問は Xamarin 固有のものではありません

4

3 に答える 3

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 を作成し、ラベルとテキスト用に持っているすべてのビューを手動で追加することです。採寸はご自身で行っていただきます。

自動レイアウトを使用する場合でも、8 つのビューすべてを作成する必要がありますが、ビューを関連付けて相互にリンクする方法の規則を指定できます。

自動レイアウトは、UI が他のフォーム ファクターで使用され、拡張方法に関するルールを追加できる場合に便利です。

デザイナーでセルを設計し、コードからさまざまなスロットを参照してそれらを埋めることもできます。

于 2015-03-25T16:38:15.610 に答える