android app首页ui 安卓手机首页

一、实验目标

学习目标：做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习ScrollView，RelativeLayout，以及插件之间的穿插使用。

二、实验步骤

准备工作

ScrollView是可滚动视图区域。使用竖向滚动时，需要给ScrollView一个固定高度，通过WXSS设置height。简单来说就是当内容超过父布局时，会自动添加滚动条，并且可以滑动查看内容。注意ScrollView有且仅有一个控件，所以如果你的视图结构比较复杂，你需要一个标准的容器，如LinearLayout、RelativeLayout等。ScrollView只支持竖直滑动，水平滑动使HorizontalScrollView。

RelativeLayout是相对布局，以某个兄弟组件或者父容器来作为参照物进行排列(此处兄弟组件是指在同一布局中的其他组件)，可以使得排列方式更简便一些。

页面编写

本次实验做一个APP首页，包含顶部图片、顶部菜单栏、中部消息模块和底部的tab按钮。

首先创建一个父布局，设置好基础属性后，添加一个<ScrollView>组件，因为<ScrollView>只能有一个控件，所以需要创建<ScrollView>的内部父布局<LinearView>,再创建顶部首页显示栏和顶部图片，设置好基础属性。为了美观一些，注意设置好页边距。

<!--首页-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:textSize="18dp"
                android:textColor="#333"
                android:textStyle="bold"
                android:gravity="center"
                android:text="首页"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/test_img"/>

        </LinearLayout>
    </ScrollView>

菜单栏模块部分先创建一个横向的<LinearLayout>来作为菜单栏的父布局，然后在其中创建<LinearLayout>作为单个按钮的父布局。单个按钮又分为顶部的图标和底部的文字说明，设置好属性。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal"
        android:weightSum="4">

        <!--第一个图标-->
        <ScrollView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@mipmap/test_tongjiguanli"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:textSize="15dp"
                    android:textColor="#333"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="统计管理"/>

            </LinearLayout>

        </ScrollView>

        <!--第二个图标-->
        <ScrollView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@mipmap/test_yaoshiguanli"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:textSize="15dp"
                    android:textColor="#333"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="钥匙管理"/>

            </LinearLayout>

        </ScrollView>


        <!--第三个图标-->
        <ScrollView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@mipmap/test_icon2"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:textSize="15dp"
                    android:textColor="#333"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="设计管理"/>

            </LinearLayout>
        </ScrollView>

        <ScrollView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <!--第四个图标-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@mipmap/test_baoming"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:textSize="15dp"
                    android:textColor="#333"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="报名"/>

            </LinearLayout>
        </ScrollView>

    </LinearLayout>

消息模块包括一个菜单栏，首先创建一个横向的LinearView作为父布局，然后创建待办的TextView和更多的TextView。

<!--模块三-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:orientation="horizontal">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_weight="1"
            android:text="待办(10)"
            android:textColor="#333"
            android:textStyle="bold" />

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="更多"
                android:gravity="end"
                android:textColor="#666"
                android:textStyle="bold"
                android:layout_marginRight="10dp"/>

    </LinearLayout>

底部Tab模块和菜单栏模块结构类似，先创建一个横向的LinearLayout来作为菜单栏的布局，然后再创建一个LinearLayout作为单个按钮的父布局，在按钮的地方使用RelativeLayout相对布局来编写。

<!--底部Tab模块-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="bottom"
        android:weightSum="4">


        <!--首页图标-->
        <ScrollView
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/image"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/test_icon3" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/image"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="首页" />

                </RelativeLayout>
            </LinearLayout>
        </ScrollView>


        <!--首页图标-->
        <ScrollView
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/icon1"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/test_icon1" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/icon1"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="验房" />

                </RelativeLayout>
            </LinearLayout>
        </ScrollView>

        <!--首页图标-->
        <ScrollView
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/guanli"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/tst_guanli" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/guanli"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="管理" />

                </RelativeLayout>
            </LinearLayout>
        </ScrollView>

        <!--首页图标-->
        <ScrollView
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/zhuyishixiang"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/test_zhuyishixiang" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/zhuyishixiang"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="注意事项" />

                </RelativeLayout>
            </LinearLayout>
        </ScrollView>

    </LinearLayout>

至此整个实验完成。

三、程序运行结果

四、问题总结与体会

本次实验比较简单，简单了解了ScrollView和RelativeLayout的用法，在实验过程中也能运用上。经过了上一次实验，对线性布局LinearLayout的应用还比较熟悉。过程中出现的问题就是对于match_parent和wrap_content的应用场景还有一些不太懂，以及对于layout_weight和layouut_width的使用，如何分配同一容器里每个组件的宽度，为什么宽度要设置成0dp等方面问题有了一个更深的了解。