一、实验目标
1、做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
2、学习 ScrollView, RelativeLayout,以及插件之间的穿插使用。
二、实验步骤
1.逻辑梳理
页面非为四个部分,分别为:顶部图片模块、顶部菜单模块、待办消息模块、底部Tab按钮。
2.代码实现
(1)首先创建父布局,注意布局为纵向布局,在其中新建ScrollView以及ScrollView内部的父布局,这里注意ScrollView中有且仅有一个控件。
(2)创建顶部首页的显示栏,设置宽高、字体样式、字体颜色、字体居中等属性。
(3)创建顶部图片,设置宽高、src加载图片、边距等属性。
(4)创建菜单栏模块,首先创建一个横向的LinearLayout来作为菜单栏的父布局,并设置其属性。
(5)再次创建四个纵向布局的LinearLayout作为单个按钮的父布局。然后创建每个按钮中上边的图片按钮,并设置其属性,设置按钮底部文字并赋予其属性。
(6)消息模块创建,首先创建一个横向的LinearLayout来作为菜单栏的父布局,然后创建待办Textview和更多Textview。
(7)创建底部Tab模块,首先我们创建一个横向的LinearLayout来作为菜单栏的父布局,再次创建四个RelativeLayout作为单个按钮的父布局按钮。
(8)在四个RelativeLayout中创建各自ImageView和TextView以及其相关属性。
三、程序代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<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">
</TextView>
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@mipmap/test_img">
</ImageView>
<LinearLayout
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:weightSum="4"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/yanfang"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/richangxunjian"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="日常巡检"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/yaoshiguanli"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="钥匙管理"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/tongjifenxi"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="统计分析"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="1"
android:textStyle="bold"
android:textColor="#333"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<TextView
android:layout_marginRight="10dp"
android:textColor="#666"
android:layout_marginLeft="10dp"
android:text="更多"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="4"
android:layout_marginTop="-80dp"
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/shouye"
android:layout_width="30dp"
android:layout_height="30dp">
</ImageView>
<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">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img2"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/daiban"
android:layout_width="30dp"
android:layout_height="30dp">
</ImageView>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/img2"
android:layout_centerHorizontal="true"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img3"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/baobiao"
android:layout_width="30dp"
android:layout_height="30dp">
</ImageView>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/img3"
android:layout_centerHorizontal="true"
android:text="统计"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img4"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@mipmap/manage"
android:layout_width="30dp"
android:layout_height="30dp">
</ImageView>
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@id/img4"
android:layout_centerHorizontal="true"
android:text="设置"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</RelativeLayout>
</LinearLayout>
</LinearLayout>