一、实验目标
- 做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
- 学习 ScrollView, RelativeLayout,以及插件之间的穿插使用。
二、实验步骤
一、逻辑梳理
- 页面上可以分为4个部分:顶部图片模块、顶部菜单模块、待办消息模块、底部Tab按钮。
二、代码实现
-
创建父布局,新建ScrollView,并创建ScrollView内部父布局。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E1DEDE" android:orientation="vertical"> <ScrollView android:layout_width="match_parent" android:layout_height="221dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#fff"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
-
创建顶部首页显示栏
设置宽高、文字、字体样式、颜色。
<TextView android:layout_width="match_parent" android:layout_height="38dp" android:gravity="center" android:text="首页" android:textColor="#333" android:textSize="18dp" android:textStyle="bold"> </TextView>
-
创建顶部图片
设置宽高,使用src加载图片,设置边距
<ImageView android:layout_width="match_parent" android:layout_height="178dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:src="@mipmap/testimg" />
-
菜单栏模块
- 创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局
- 再次创建一个LinearLayout作为单个按钮的父布局
- 创建上边的图片按钮,并设置其属性
- 设置按钮底部文字并赋予其属性
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:weightSum="4" android:orientation="horizontal" android:background="#fff"> <RelativeLayout android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_centerHorizontal="true" android:id="@+id/hao" android:layout_marginTop="10dp" android:background="@mipmap/house"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_below="@+id/hao" android:gravity="center" android:text="验房"/> </RelativeLayout>
接下来补全菜单栏剩余模块。
<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/one" /> <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/two" /> <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/three" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="钥匙管理"/> </LinearLayout>
此时效果如下:
-
消息模块
- 创建一个横向的LinearLayout来作为菜单栏的父布局
- 创建待办Textview
- 创建更多Textview
<LinearLayout android:layout_width="match_parent" android:layout_height="285dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:weightSum="4" android:orientation="horizontal" android:background="#E1DEDE"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" 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 android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:textColor="#666" android:layout_marginLeft="10dp" android:text="更多"/> </LinearLayout>
-
底部Tab模块
-
创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局
-
再次创建一个LinearLayout作为单个按钮的父布局
-
按钮部分使用RelativeLayout编写
</LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="80dp" android:background="#fff" android:weightSum="4"> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <ImageView android:id="@+id/house" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/house" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/house" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:gravity="center" android:text="首页" /> </RelativeLayout>
补齐底部模块剩余部分。
<RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <ImageView android:id="@+id/time" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/undertwo" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/time" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:gravity="center" android:text="验房" /> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <ImageView android:id="@+id/statistic" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/underthree" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/statistic" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:gravity="center" android:text="统计" /> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <ImageView android:id="@+id/set" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/underfour" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/set" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:gravity="center" android:text="设置" /> </RelativeLayout> </LinearLayout>
-
三、程序运行结果
最终在手机上运行结果如下:
四、问题总结与体会
- 经过上午对APP紧密地学习后,下午写代码时感觉轻松了许多。对语法逐渐熟悉、对结构逐渐理解,这让我也更加有信心。
- 这次试验新学了RelativeLayout的编写,感觉和LinearLayout差别不是很大,简单容易上手。遇到的问题时下端模块无法直接到达最下面,最终的完善方法是让上一个模块高度变大,将底端模块“挤”下去,这样画面就变得和谐了。