app首页

2022年夏季《移动软件开发》实验报告

一、实验目标

1.学习ScrollView 的使用

2.学习RelativeLayout的使用

3.掌握插件之间的穿插使用

二、实验步骤

6.1 创建项目

使用Android studio创建一个新的项目，导入图片集，修改名称以符合格式。

6.2 确定页面布局

页面分为四个部分，包括顶部图片模块、顶部菜单模块、待办消息模块、底部Tab按钮。

6.3 编写控件代码，实现界面展示

6.3.1 创建父布局

​ 新建ScrollView，创建ScrollView内部父布局

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    		<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        </LinearLayout>
    </ScrollView>
</LinearLayout>  

6.3.2 创建顶部首页显示栏

​ 设置宽高、文字、字体样式、字体颜色、字体居中等。效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0F0PQxs1-1661072695884)(/Users/songziang/Library/Application Support/typora-user-images/截屏2022-08-21 15.50.40.png)]

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

6.3.3 创建顶部图片

​ 设置宽高、使用src加载图片，设置边距等，效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dv212WM-1661072695885)(/Users/songziang/Library/Application Support/typora-user-images/截屏2022-08-21 15.51.31.png)]

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginRight="10dp"
    android:layout_marginLeft="10dp"
    android:src="@drawable/test_img"/>

6.3.4 创建菜单栏模块

​ 首先创建一个横向的LinearLayout来作为菜单栏的父布局；之后再次创建一个LinearLayout作为单个按钮的父布局；然后创建上边的图片按钮，并设置其属性；最后设置按钮底部文字并赋予其属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akQ3P2yo-1661072695885)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.35.png)]

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="10dp"
    android:layout_marginLeft="10dp"
    android:weightSum="4"
    android:orientation="horizontal">

    <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_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/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_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/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_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/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_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/tongjifenxi"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="统计分析"/>

    </LinearLayout>
</LinearLayout>

6.3.5 创建消息模块

​ 首先创建一个横向的LinearLayout来作为菜单栏的父布局，再创建待办Textview以及更多Textview。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGpamRNJ-1661072695886)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.41.png)]

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    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="待办（0）"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:textColor="#666"
        android:layout_marginLeft="10dp"
        android:text="更多"/>

</LinearLayout>

6.3.6 底部Tab模版

​ 首先创建一个横向的LinearLayout来作为菜单栏的父布局，再创建一个LinearLayout作为单个按钮的父布局；使用RelativeLayout编写按钮（相对布局，是非常常用的布局，比LinearLayout更加灵活，可以实现非常复杂的UI）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHHiDeQE-1661072695886)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.51.png)]

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginTop="170dp"
        android:weightSum="4">

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

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

            <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_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/img2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@drawable/guanli" />

            <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_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/img3"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@drawable/baobiao" />

            <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_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/img4"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@drawable/daiban" />

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

6.3.7 设置中间待办事项的控件

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:background="#fff"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="380dp"
                    android:layout_height="30dp"
                    android:layout_marginRight="310dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="5dp"
                    android:background="#FFDAB9">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="钥匙管理"
                        android:layout_marginLeft="150dp"
                        android:textSize="25dp"
                        android:textStyle="bold"
                        android:gravity="center_vertical"/>
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="80dp"
                        android:layout_height="50dp"
                        android:layout_marginLeft="60dp"
                        android:layout_marginRight="20dp"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="中国海洋大学南海苑8号楼钥匙租借"
                        android:textColor="#123"
                        android:textSize="16dp"
                        android:textStyle="bold" />
                </LinearLayout>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="170dp"
                    android:layout_marginRight="20dp"
                    android:textColor="#B5C4"
                    android:textStyle="bold"
                    android:textSize="20dp"
                    android:text="100条"/>

            </LinearLayout>

三、程序运行结果

最终效果如下图：

四、问题总结与体会

本次实验的完成主要是对各种控件参数的调节，将一个界面进行更好的布局，通过多部分控件的编写得到一个完整的app首页，在实验过程中遇到的问题就是控件的使用方法问题，其中包括控件（屏幕滑动），要注意ScrollView的子元素只能有一个，所以得增加一个LinearLayout布局，把其他按键放在这个LinearLayout中，那么ScrollViewd的子元素就只有一个LinearLayout了，而LinearLayout的子元素不限制。通过本次实验我认识到，app的开发过程需要耐心、细心，要学会每一个小控件的使用和注意事项，在不断学习中才能写出更好的应用。