做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, RelativeLayout,以及插件之间的穿插使用
观察实验要求
<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>
<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>
完整代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F4F4F4"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<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>
<LinearLayout
android:layout_width="match_parent"
android:background="#FFFFFF"
android:orientation="vertical"
android:layout_height="wrap_content">
<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>
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
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>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:text="更多"
android:textColor="#666">
TextView>
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>
LinearLayout>
<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>
LinearLayout>
RelativeLayout>
LinearLayout>
由于之前有过安卓开发的经验,因此本实验中并无太大的问题