浅浅仿制一个APP首页

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.逻辑梳理

做一个app首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。

 

ScrollView

layout_width:宽，layout_height:高，ScrollView内部有且仅有一个控件

父布局种类

LinearLayout(线性布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)、TableLayout(表格布局)、FrameLayout(框架布局)

RelativeLayout布局

RelativeLayout，顾名思义，相对布局，也是非常常用的布局，他比LinearLayout更加灵活，可以实现非常复杂的UI。

 

相对其他控件对齐方式

 

2.代码实现

我使用了RelativeLayout布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</RelativeLayout>    

首页和顶部大图的代码linearLayout

 

<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="18dp"
        android:textColor="#333"
        android:text="首页"
        android:background="#FFFEFE"
        android:gravity="center"
        android:textStyle="bold">
    </TextView>
    <LinearLayout
        android:layout_width="match_parent"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/test_img">
        </ImageView>
        

接着上部分的代码，接下来是四个菜单图标LinearLayout

 

<LinearLayout
            android:layout_width="0dp"
            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"
                android:background="@mipmap/test_icon1">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="验房"
                android:layout_marginTop="10dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            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"
                android:background="@mipmap/test_icon2">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="日常巡检"
                android:layout_marginTop="10dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            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"
                android:background="@mipmap/yaoshiguanli">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="钥匙管理"
                android:layout_marginTop="10dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            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"
                android:background="@mipmap/tongjifenxi">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="统计分析"
                android:layout_marginTop="10dp">
            </TextView>
        </LinearLayout>
​
    </LinearLayout>
</LinearLayout>

接下来是代办和更多这一行

 

<LinearLayout
​
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textStyle="bold"
        android:textColor="#333"
        android:textSize="16dp"
        android:layout_marginLeft="10dp"
        android:text="待办(10)">
    </TextView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:text="更多"
        android:textColor="#666">
    </TextView>
</LinearLayout>

接下来是消息部分Scrolliview

 

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
​
        <RelativeLayout
            android:id="@+id/m1"
            android:layout_width="380dp"
            android:layout_height="90dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@mipmap/back">
​
            <RelativeLayout
                android:layout_width="70dp"
                android:layout_height="20dp"
                android:background="@mipmap/blue1">
​
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="3dp"
                    android:text="钥匙管理"
                    android:textColor="#FFFF"
                    android:textSize="10dp"
                    android:textStyle="bold"></TextView>
            </RelativeLayout>
​
            <TextView
                android:id="@+id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="30dp"
                android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请"
                android:textColor="#333"
                android:textSize="13dp">
​
            </TextView>
​
            <TextView
                android:id="@+id/num1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:text="3663"
                android:textColor="#F43225"
                android:textSize="18dp"
                android:textStyle="bold">
​
            </TextView>
​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text1"
                android:layout_marginTop="14dp"
                android:layout_toRightOf="@id/num1"
                android:text="条"
                android:textSize="14dp"></TextView>
​
            <ImageView
                android:layout_width="11dp"
                android:layout_height="11dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:src="@mipmap/right">
​
            </ImageView>
​
        </RelativeLayout>
​
        <RelativeLayout
            android:id="@+id/m2"
            android:layout_width="380dp"
            android:layout_height="90dp"
            android:layout_below="@id/m1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="@mipmap/back">
​
            <RelativeLayout
                android:layout_width="70dp"
                android:layout_height="20dp"
                android:background="@mipmap/green1">
​
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="3dp"
                    android:text="验房"
                    android:textColor="#FFFF"
                    android:textSize="10dp"
                    android:textStyle="bold"></TextView>
            </RelativeLayout>
​
            <TextView
                android:id="@+id/text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="30dp"
                android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派"
                android:textColor="#333"
                android:textSize="13dp">
​
            </TextView>
​
            <TextView
                android:id="@+id/num2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text2"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:text="3"
                android:textColor="#F43225"
                android:textSize="18dp"
                android:textStyle="bold">
​
            </TextView>
​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text2"
                android:layout_marginTop="14dp"
                android:layout_toRightOf="@id/num2"
                android:text="条"
                android:textSize="14dp"></TextView>
​
            <ImageView
                android:layout_width="11dp"
                android:layout_height="11dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:src="@mipmap/right">
​
            </ImageView>
​
        </RelativeLayout>
    </RelativeLayout>
</ScrollView>

最后是页面最下方的导航栏，以及上面没有收尾的一些后缀

 

</LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#FFFFFF"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:weightSum="4">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:background="@mipmap/test_icon3">
                </ImageView>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="首页"
                    android:textSize="13dp">
                </TextView>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:background="@mipmap/daibanshixiang">
                </ImageView>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="验房"
                    android:textSize="13dp">
                </TextView>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:background="@mipmap/baobiao">
                </ImageView>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="统计"
                    android:textSize="13dp">
                </TextView>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:background="@mipmap/guanli">
                </ImageView>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="设置"
                    android:textSize="13dp">
                </TextView>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

三、程序运行结果

列出程序的最终运行结果及截图。

 

界面结构如图

 

四、问题总结与体会

1.布局需要反复的尝试调整，第一次要有耐心。

2.圆角可以参考别人的处理方式，也可以使用带有圆角的图片。

3.注意布局的层次结构，不要一团乱麻，按照给好的分块进行大的布局，再在里面填充小的元素。

4.遇到没有提供的图片，可以自行制作，也可以直接用色块填充。