OUC软件开发实验6

实验6：做一个APP首页

一、实验目标

1、ScrollView使用；2、RelativeLayout使用；3、插件之间的穿插使用。

二、实验步骤

基础知识

ScrollView了解

layout_width:宽
layout_height:高
内部有且仅有一个控件

RelativeLayout了解

RelativeLayout，顾名思义，相对布局，也是非常常用的布局，他比LinearLayout更加灵活，可以实现非常复杂的UI。

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

逻辑梳理

页面上可以分为四个部分

1、顶部图片模块

2、顶部菜单模块

3、待办消息模块

4、底部Tab按钮

代码编写

1.首先我们创建他们的父布局
2.新建ScrollView
3.创建ScrollView 内部父布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_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">

</LinearLayout>

创建顶部首页显示栏

设置宽高
设置文字
设置字体样式
设置字体颜色
字体居中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_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"/>
            </LinearLayout>
    </ScrollView>

</LinearLayout>

创建顶部图片
设置宽高
src加载图片
设置边距

菜单栏模块

1.首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局
2.再次创建一个LinearLayout作为单个按钮的父布局
3.创建上边的图片按钮,并设置其属性
4.设置按钮底部文字并赋予其属性

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

消息模块
1.首先创建一个横向的LinearLayout来作为菜单栏的父布局
2.创建待办Textview

            <!--消息模块-->
            <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>

底部Tab模块
1.首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局
2.再次创建一个LinearLayout作为单个按钮的父布局
3.按钮这个地方使用了RelativeLayout编写

            <!--底部Tab模块-->
            <LinearLayout
                android:layout_marginTop="260dp"
                android:layout_width="match_parent"
                android:weightSum="4"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/img"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"
                        android:background="@mipmap/test_icon3"
                        android:layout_width="30dp"
                        android:layout_height="30dp"/>

                    <TextView
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:layout_below="@+id/img"
                        android:layout_centerHorizontal="true"
                        android:text="首页"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>
                </RelativeLayout>
            </LinearLayout>

后续扩展
使用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
                    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/key" />

                    <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/Statistical" />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析"/>
                </LinearLayout>
            </LinearLayout>

使用RelativeLayout实现

           <!--底部Tab模块-->
            <LinearLayout
                android:layout_marginTop="260dp"
                android:layout_width="match_parent"
                android:weightSum="4"
                android:layout_height="80dp">

                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <!--首页-->
                    <ImageView
                        android:id="@+id/img"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/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/img"
                        android:layout_marginTop="5dp"
                        android:text="首页"
                        android:layout_centerHorizontal="true"/>

                    <!--统计-->
                    <ImageView
                        android:id="@+id/rep"
                        android:layout_alignTop="@id/img"
                        android:background="@mipmap/report"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_toRightOf ="@+id/img"
                        android:layout_marginLeft="150dp"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/rep"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="统计" />


                    <!--统计-->
                    <ImageView
                        android:id="@+id/man"
                        android:layout_alignTop="@id/rep"
                        android:background="@mipmap/management"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_toRightOf ="@+id/rep"
                        android:layout_marginLeft="150dp"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/rep"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="right"
                        android:text="设置" />

                </RelativeLayout>

三、程序运行结果

电脑端：

手机端：

四、问题总结与体会

主要在relativelayout的使用，相比于LinearLayout属性更多，但是能更自由设计和实现布局。