一、实验目标
- 做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。
二、实验步骤
2.1 需求分析
- 在本次实验我们需要实现一个带顶部图片，导航栏，消息块，底部Tab按钮额小程序
- 我们可以使用scrollview进行布局，当内容超过父布局的时候就可以进行滑动
- 我们在此处需要使用LinearLayout作为容器
2.2 编码实现
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="660dp">
<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:gravity="center"
android:text="首页"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@mipmap/test_img" />
<LinearLayout
android:background="#DCDCDB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="@mipmap/test_icon1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="@mipmap/test_icon2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="日常巡检" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="@mipmap/yaoshi" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="钥匙管理" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="@mipmap/tong" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="统计分析" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:textStyle="bold"
android:textColor="#333"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:textColor="#666"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="更多"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:background="#dcdcdc"
android:layout_width="match_parent"
android:layout_height="10dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#dcdcdc">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#ffff">
<LinearLayout
android:layout_width="80dp"
android:layout_height="25dp"
android:background="#0000ff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="钥匙管理"
android:textColor="#ffff"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#dcdcdc"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="鼎世华府1号8单元801业主提报钥匙借用申请 "
android:textSize="14dp"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@mipmap/right" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="3663"
android:textColor="#ff0000"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=" 条"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="25dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ffff">
<LinearLayout
android:layout_width="80dp"
android:layout_height="25dp"
android:background="#008000">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="验房"
android:textColor="#ffff"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:text="海尔世纪公馆1期12号楼三单元101房价问题待指派 "
android:textSize="14dp"
android:textStyle="bold" />
<ImageView
android:layout_marginRight="21dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@mipmap/right" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="3"
android:textColor="#ff0000"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=" 条"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="4"
android:layout_height="80dp">
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/test_icon3"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/img"
android:layout_centerHorizontal="true"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/yan"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/yanfang"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/yan"
android:layout_centerHorizontal="true"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tong"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/tongji"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/tong"
android:layout_centerHorizontal="true"
android:text="统计"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/she"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/shezhi"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/she"
android:layout_centerHorizontal="true"
android:text="设置"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
三、实验结果
四、问题总结与体会
在本次的实验当中，我主要实现了一个app的首页，在本次实验当中，我最大的收获是学习了如何通过不同组件的组合形成一个美观的界面。通过本次实验我也对scrollview和RelativeLayout有了更加深刻的认识。同时我在最开始实现界面的时候由于界面上的元素较多，我无从入手，摆放的元素往往都不能出现在正确的位置，后来我学会了先分割整体布局，然后再一层层缩小，最终实现了正确的页面布局
