一、实验目标
做一个app首页包括:
- 顶部图片
- 顶部菜单栏
- 中部消息模块
- 底部Tab按钮
熟悉如下组件的使用
- ScrollView 使用
- RelativeLayout 使用
- 插件之间的穿插使用
二、实验步骤
页面结构
页面上可以分为四个部分
1、顶部图片模块
2、顶部菜单模块
3、待办消息模块
4、底部Tab按钮
根据结构代码实现
顶部
<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>
中间图片
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/test_img">
</ImageView>
默认垂直线性布局,直接放置即可出现如上的效果
顶部菜单栏(线性布局水平分布)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<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="@drawable/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="@drawable/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="@drawable/key">
</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="@drawable/analys">
</ImageView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="统计分析"
android:layout_marginTop="10dp">
</TextView>
</LinearLayout>
</LinearLayout>
中部消息条
使用相对布局
<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:background="@drawable/back"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true">
<RelativeLayout
android:layout_width="70dp"
android:layout_height="20dp"
android:background="@drawable/topleft">
<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_marginTop="30dp"
android:layout_marginLeft="20dp"
android:textColor="#333"
android:textSize="13dp"
android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请">
</TextView>
<TextView
android:id="@+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3663"
android:layout_below="@id/text1"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:textSize="18dp"
android:textStyle="bold"
android:textColor="#F43225">
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="条"
android:layout_below="@id/text1"
android:layout_marginTop="14dp"
android:textSize="14dp"
android:layout_toRightOf="@id/num1">
</TextView>
<ImageView
android:layout_width="11dp"
android:layout_height="11dp"
android:src="@drawable/arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:id="@+id/m2"
android:layout_below="@id/m1"
android:layout_width="380dp"
android:layout_height="90dp"
android:background="@drawable/back"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true">
<RelativeLayout
android:layout_width="70dp"
android:layout_height="20dp"
android:background="@drawable/topleft2">
<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_marginTop="30dp"
android:layout_marginLeft="20dp"
android:textColor="#333"
android:textSize="13dp"
android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派">
</TextView>
<TextView
android:id="@+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:layout_below="@id/text2"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:textSize="18dp"
android:textStyle="bold"
android:textColor="#F43225">
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="条"
android:layout_below="@id/text2"
android:layout_marginTop="14dp"
android:textSize="14dp"
android:layout_toRightOf="@id/num2">
</TextView>
<ImageView
android:layout_width="11dp"
android:layout_height="11dp"
android:src="@drawable/arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp">
</ImageView>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
右上角圆角样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2579F4"></solid>
<corners android:topLeftRadius="10dp"
android:bottomRightRadius="10dp"></corners>
</shape>
底部栏
相对布局包裹,将线性布局置于底部
<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="@drawable/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="@drawable/work">
</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="@drawable/table">
</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="@drawable/tool">
</ImageView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="设置"
android:textSize="13dp">
</TextView>
</LinearLayout>
三、程序运行结果
四、问题总结与体会
需要去熟悉app开发的组件的规范
- 创建任何一个控件,首先就是给他赋予宽和高layout_width:宽layout_height:高内部有且仅有一个控件
- 相对布局
- layout_width:宽
- layout_height:高
- gravity:控制子控件的位置
- 相对其他组件的对齐方式
在这里插入图片描述