一、实验目标

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

二、实验步骤

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

1.逻辑梳理

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

ScrollView

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

父布局种类

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

RelativeLayout布局

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

相对其他控件对齐方式

2.代码实现

我使用了RelativeLayout布局

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

首页和顶部大图的代码linearLayout

<LinearLayoutandroid:layout_width="match_parent"android:orientation="vertical"android:layout_height="wrap_content"><TextViewandroid: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><LinearLayoutandroid:layout_width="match_parent"android:background="#FFFFFF"android:orientation="vertical"android:layout_height="wrap_content"><ImageViewandroid:layout_width="match_parent"android:layout_height="200dp"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:src="@mipmap/test_img"></ImageView>

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

<LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@mipmap/test_icon1"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@mipmap/test_icon2"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="日常巡检"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@mipmap/yaoshiguanli"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="钥匙管理"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@mipmap/tongjifenxi"></ImageView><TextViewandroid: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"><TextViewandroid: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><TextViewandroid: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

<ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content">
<RelativeLayoutandroid:id="@+id/m1"android:layout_width="380dp"android:layout_height="90dp"android:layout_centerHorizontal="true"android:layout_marginTop="10dp"android:background="@mipmap/back">
<RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@mipmap/blue1">
<TextViewandroid: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>
<TextViewandroid: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>
<TextViewandroid: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>
<TextViewandroid: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>
<ImageViewandroid: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>
<RelativeLayoutandroid: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">
<RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@mipmap/green1">
<TextViewandroid: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>
<TextViewandroid: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>
<TextViewandroid: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>
<TextViewandroid: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>
<ImageViewandroid: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><LinearLayoutandroid:layout_width="match_parent"android:layout_height="70dp"android:background="#FFFFFF"android:layout_alignParentBottom="true"android:orientation="horizontal"android:weightSum="4"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@mipmap/test_icon3"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@mipmap/daibanshixiang"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@mipmap/baobiao"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="统计"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@mipmap/guanli"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="设置"android:textSize="13dp"></TextView></LinearLayout></LinearLayout></RelativeLayout>
</LinearLayout>