移动软件开发——实验六

一、实验目标

做一个app首页：

•顶部图片

•顶部菜单栏

•中部消息模块

•底部Tab按钮

二、实验步骤

2.1基础知识

ScrollView

内部有且仅有一个控件

layout_width:宽
layout_height:高

RelativeLayout

layout_width:宽
layout_height:高
gravity:控制子控件的位置

 

 

2.2功能实现

2.2.1逻辑梳理

页面上可以分为四个部分

1、顶部图片模块

2、顶部菜单模块

3、待办消息模块

4、底部Tab按钮

2.2.2代码实现

1.首先我们创建他们的父布局

2.新建ScrollView

3.创建ScrollView 内部父布局

<?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:background="#e5e5e5"
    android:layout_height="match_parent">
​
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#e5e5e5">
​
    </ScrollView>
</LinearLayout>

创建顶部首页显示栏

•设置宽高

•设置文字

•设置字体样式

•设置字体颜色

•字体居中

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:orientation="vertical">
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#fff"
                android:gravity="center"
                android:text="首页"
                android:textColor="#333"
                android:textSize="18dp"
                android:textStyle="bold" />
​
            </LinearLayout>

 

创建顶部图片

•设置宽高

•src加载图片

•设置边距

<ImageView
​
                android:layout_width="match_parent"
                android:layout_height="207dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="3dp"
                android:layout_marginRight="10dp"
                android:src="@mipmap/test_img" />

​

 

菜单栏模块

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

再次创建一个LinearLayout作为单个按钮的父布局

创建上边的图片按钮,并设置其属性

设置按钮底部文字并赋予其属性

 <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal"
                android:weightSum="4">
​
                <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/test_icon1" />
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房" />
                </LinearLayout>

 

消息模块

•首先我们创建一个横向的LinearLayout来作为菜单栏的父布局

•创建待办Textview

•创建更多Textview

 <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:text="待办（10）"
                    android:textColor="#333"
                    android:textSize="16dp"
                    android:textStyle="bold" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="更多"
                    android:textColor="#666" />

 

底部Tab模块

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

再次创建一个LinearLayout作为单个按钮的父布局

按钮这个地方使用了RelativeLayout编写，请同学们仔细学习

  <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">
​
            <ImageView
                android:id="@+id/dibu_1"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/test_icon3" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dibu_1"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="首页" />
​
        </RelativeLayout>

参考后，完成其他布局功能

 

 

消息模块

圆角样式代码

<?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>

 

完整代码如下：

<?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:background="#e5e5e5"
    android:layout_height="match_parent">
​
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#e5e5e5">
​
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:orientation="vertical">
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#fff"
                android:gravity="center"
                android:text="首页"
                android:textColor="#333"
                android:textSize="18dp"
                android:textStyle="bold" />
​
            <ImageView
​
                android:layout_width="match_parent"
                android:layout_height="207dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="3dp"
                android:layout_marginRight="10dp"
                android:src="@mipmap/test_img" />
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal"
                android:weightSum="4">
​
                <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/test_icon1" />
​
                    <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/test_icon2" />
​
                    <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/yaoshi" />
​
                    <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/tongji" />
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />
                </LinearLayout>
​
            </LinearLayout>
​
​
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="#e5e5e5"
                android:orientation="horizontal">
​
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:text="待办（10）"
                    android:textColor="#333"
                    android:textSize="16dp"
                    android:textStyle="bold" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="更多"
                    android:textColor="#666" />
​
            </LinearLayout>
​
            <RelativeLayout
                android:background="#e2e2e2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
​
                <RelativeLayout
                    android:id="@+id/m1"
                    android:layout_width="380dp"
                    android:layout_height="90dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="15dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="15dp"
                    android:background="@drawable/leftdown">
​
                    <RelativeLayout
                        android:layout_width="70dp"
                        android:layout_height="20dp"
                        android:background="@drawable/yuanjiao">
​
                        <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_marginLeft="20dp"
                        android:layout_marginTop="30dp"
                        android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请"
                        android:textColor="#333"
                        android:textSize="13dp">
​
                    </TextView>
​
                    <TextView
                        android:id="@+id/num1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/text1"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="10dp"
                        android:text="3663"
                        android:textColor="#F43225"
                        android:textSize="18dp"
                        android:textStyle="bold">
​
                    </TextView>
​
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/text1"
                        android:layout_marginTop="14dp"
                        android:layout_toRightOf="@id/num1"
                        android:text="条"
                        android:textSize="14dp"></TextView>
​
                    <ImageView
                        android:layout_width="11dp"
                        android:layout_height="11dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="20dp"
                        android:src="@mipmap/right">
​
                    </ImageView>
​
                </RelativeLayout>
            </RelativeLayout>
            <RelativeLayout
                android:background="#e2e2e2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
​
                <RelativeLayout
                    android:id="@+id/m2"
                    android:layout_width="380dp"
                    android:layout_height="90dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="15dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="15dp"
                    android:background="@drawable/leftdown">
​
                    <RelativeLayout
                        android:layout_width="70dp"
                        android:layout_height="20dp"
                        android:background="@drawable/yanfang_yuanjiao">
​
                        <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_marginLeft="20dp"
                        android:layout_marginTop="30dp"
                        android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派"
                        android:textColor="#333"
                        android:textSize="13dp">
​
                    </TextView>
​
                    <TextView
                        android:id="@+id/num2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/text2"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="10dp"
                        android:text="3"
                        android:textColor="#F43225"
                        android:textSize="18dp"
                        android:textStyle="bold">
​
                    </TextView>
​
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/text2"
                        android:layout_marginTop="14dp"
                        android:layout_toRightOf="@id/num2"
                        android:text="条"
                        android:textSize="14dp"></TextView>
​
                    <ImageView
                        android:layout_width="11dp"
                        android:layout_height="11dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="20dp"
                        android:src="@mipmap/right">
​
                    </ImageView>
​
                </RelativeLayout>
            </RelativeLayout>
​
        </LinearLayout>
​
    </ScrollView>
​
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:background="#fff"
        android:weightSum="4">
​
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">
​
            <ImageView
                android:id="@+id/dibu_1"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/test_icon3" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dibu_1"
                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/dibu_2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/yanfang" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dibu_2"
                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/dibu_3"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/baobiao" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dibu_3"
                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/dibu_4"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@mipmap/shezhi" />
​
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/dibu_4"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="设置" />
​
    </RelativeLayout>
​
    </LinearLayout>
​
​
</LinearLayout>

三、程序运行结果