在Android屏幕上排列各种界面元素的布局策略

Question

我对Android开发相对较新,并且对设计指南和正确的布局技术没有非常深刻的理解.我正在使用需要如下所示的屏幕:

我目前使用的代码是几个线性布局块的混合,我知道这不是实现这种布局的正确方法.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.culami.WelcomePageActivity"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/welcome_msg"
        android:layout_gravity="center"
        android:textSize="50sp" />

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal"
        android:layout_marginTop="15dp" >

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user1"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser1"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user2"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser2"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user3"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser3"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>
    </LinearLayout>

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user4"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser4"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/addUserIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/adduser"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/addUserText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/addUser"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >
        </LinearLayout>

    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="35dp"
        android:layout_marginBottom="10dp"
        android:text="@string/buttonSubmit"
        android:textSize="30sp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:padding="5dp"
        android:background="@drawable/login_button_selector"
        android:layout_gravity="center" />

    <LinearLayout 
       android:layout_width="match_parent"
       android:layout_weight="0.3"
       android:layout_height="wrap_content"
       android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

有人可以指导我使用正确的方法来处理这样的布局,并向我提供一些我可能违反的设计指南.谢谢!

Answer 1

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Welcome!"
    android:textSize="50dp"
    android:gravity="center_horizontal"
    android:id="@+id/welcome"/>

<LinearLayout
    android:layout_marginTop="30dp"
    android:layout_below="@+id/welcome"
    android:id="@+id/ll1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <ImageView
        android:src="@drawable/com_facebook_button_blue_normal"
        android:layout_width="match_parent"
        android:scaleType="fitXY"
        android:layout_height="100dp"
        android:layout_weight="0.33"
        android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    </LinearLayout>

<LinearLayout
    android:layout_marginTop="15dp"
    android:layout_below="@+id/ll1"
    android:id="@+id/ll2"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    </LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    style="@android:style/Widget.Holo.Button.Borderless"
    android:text="Get Started"
    android:textSize="40dp"
    android:textColor="@color/black"
    android:padding="15dp"
    android:background="#4caf50"
    android:layout_alignParentBottom="true"/>


</RelativeLayout>

说明 - 相对布局作为父视图(用于排列窗口小部件的灵活性).

顶部文本的ID为"welcome"的TextView.(你可以用重力和文本化以及所有这些来定制它.

LinearLayout -

1)它具有水平方向.也就是说,小部件将被水平排列.2)它低于第一个文本视图:

android:layout_below="@+id/welcome"

3)它有3个图像视图(如上所述水平放置).宽度为Loo,为0dps.因为我使用了layout_weight.每个的重量是0.33,即它将占水平可用的任何东西的33%.如果你想要4张图像,你可以使用每个重量为0.25的图像.

然后我们有另一个线性布局,再次有像上面那样的图像.它放在ll1下面.

最后,我们有一个按钮(你可以将它在ll2下面或在父底部对齐