二、实验步骤
1.首先在进行页面的编写之前,我们先要配置java环境以及安装Android Studio
在上一个实验中我们已经安装成功,所以我们直接打开Andriod Studio创建一个新的EmptyAcitivity
2.这个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
3.首先用LinearLayout创建父布局
4.新建ScrollView,并且在ScrollView内部创建父布局LinearLayout。
4.顶部导航栏的设计,我们使用内部父布局LinearLayout内嵌TextView实现
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="18dp"
android:textColor="#333"
android:textStyle="bold"
android:gravity="center"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<LinearLayout>
5.接着在内部父布局LinearLayout布局中内嵌ImageView布局实现顶部的图片
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="18dp"
android:textColor="#333"
android:textStyle="bold"
android:gravity="center"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/test_img"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<LinearLayout>
6.菜单栏实现,同样在内部父布局LinearLayout中插入如下代码
<LinearLayout
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:weightSum="4"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="@drawable/test_icon1"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon2"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="日常巡检"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon4"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="钥匙管理"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon5"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="统计分析"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
7.消息模块实现,同样在内部父布局LinearLayout中插入如下代码
<LinearLayout
android:orientation="vertical"
android:background="#FCFCFC"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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:textSize="16dp"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginRight="10dp"
android:textColor="#666"
android:layout_marginLeft="10dp"
android:text="更多"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="395dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:textAlignment="center"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="#66B3FF"
android:text=" 钥匙管理 "
android:textColor="@color/white"></TextView>
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请 "
android:textColor="@color/black"></TextView>
<LinearLayout
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="3663"
android:textSize="17dp"
android:textColor="#FF0000"></TextView>
<TextView
android:layout_width="wrap_content"
android:text="条"
android:textColor="@color/black"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="@drawable/right" />
</LinearLayout>
<LinearLayout
android:layout_width="395dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:textAlignment="center"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="#02DF82"
android:text="验房"
android:textColor="@color/white"></TextView>
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="海尔世纪公馆一期12号楼3单元101房间问题待指源 "
android:textColor="@color/black"></TextView>
<LinearLayout
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="3"
android:textSize="17dp"
android:textColor="#FF0000"></TextView>
<TextView
android:layout_width="wrap_content"
android:text="条"
android:textColor="@color/black"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="@drawable/right" />
</LinearLayout>
</LinearLayout>
7.底部Tab实现,同样在内部父布局LinearLayout中插入如下代码,注意这里用到了新的组件RelativeLayout。
<LinearLayout
android:layout_marginTop="60dp"
android:layout_gravity="bottom"
android:layout_height="80dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:weightSum="4">
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img1"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@drawable/test_icon3"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="首页" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="验房" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img3"
android:layout_width="31dp"
android:layout_height="26dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon3" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="统计" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img4"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon4" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="设计" />
</RelativeLayout>
</LinearLayout>
到此所有的布局均已实现,完整代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="18dp"
android:textColor="#333"
android:textStyle="bold"
android:gravity="center"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/test_img"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<LinearLayout
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:weightSum="4"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="@drawable/test_icon1"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon2"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="日常巡检"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon4"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="钥匙管理"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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="@drawable/test_icon5"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="统计分析"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:background="#FCFCFC"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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:textSize="16dp"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginRight="10dp"
android:textColor="#666"
android:layout_marginLeft="10dp"
android:text="更多"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="395dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:textAlignment="center"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="#66B3FF"
android:text=" 钥匙管理 "
android:textColor="@color/white"></TextView>
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请 "
android:textColor="@color/black"></TextView>
<LinearLayout
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="3663"
android:textSize="17dp"
android:textColor="#FF0000"></TextView>
<TextView
android:layout_width="wrap_content"
android:text="条"
android:textColor="@color/black"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="@drawable/right" />
</LinearLayout>
<LinearLayout
android:layout_width="395dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:textAlignment="center"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="#02DF82"
android:text="验房"
android:textColor="@color/white"></TextView>
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="海尔世纪公馆一期12号楼3单元101房间问题待指源 "
android:textColor="@color/black"></TextView>
<LinearLayout
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FFFFFFF"
android:text="3"
android:textSize="17dp"
android:textColor="#FF0000"></TextView>
<TextView
android:layout_width="wrap_content"
android:text="条"
android:textColor="@color/black"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="@drawable/right" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="60dp"
android:layout_gravity="bottom"
android:layout_height="80dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:weightSum="4">
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img1"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:background="@drawable/test_icon3"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="首页" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="验房" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img3"
android:layout_width="31dp"
android:layout_height="26dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon3" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="统计" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img4"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@drawable/icon4" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="设计" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
三、程序运行结果
列出程序的最终运行结果及截图。
设计的界面并在自己的手机上打开开发者模式运行之后界面如下: