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

实验6：安卓APP首页

一、实验目标

1、做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。

2、学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。

二、实验步骤

（列出实验的关键步骤、代码解析、截图。）

1.创建一个新的项目。

2.布局

页面上可以分为四个部分

1、顶部图片模块

2、顶部菜单模块

3、待办消息模块

4、底部Tab按钮

3.创建父布局

首先我们创建他们的父布局，

新建ScrollView ，

创建ScrollView 内部父布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#e5e5e5"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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


</RelativeLayout>

4.构建模块一

 

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

5.顶部图片模块

            <LinearLayout
                android:background="#fff"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:background="#fff"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:src="@mipmap/welcome" />
            </LinearLayout>

       6.顶部菜单模块

       父布局LinearLayout下面分为四个子布局，一个子布局为一个图片配下面的文字

            <LinearLayout
                android:background="#fff"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:weightSum="4">

子布局1：

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

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

                    <TextView
                        android:gravity="center"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/house"
                        android:text="验房" />


                </RelativeLayout>

其他子布局以此类推

 

7.代办消息模块

（1）“待办”部分

           <LinearLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content">


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


            </LinearLayout>

 

（2）消息部分

父布局

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="230dp"
                android:weightSum="2"
                android:orientation="vertical"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp">

一条待办消息一个子布局

                <LinearLayout
                    android:background="#fff"
                    android:orientation="vertical"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:textColor="#333"
                        android:textStyle="bold"
                        android:text="鼎世华府1号楼8单元业主提报钥匙借用申请"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="20dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"/>
                    <TextView
                        android:textColor="@color/design_default_color_error"
                        android:textSize="20dp"
                        android:text="3663条"
                        android:layout_marginLeft="20dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>

                </LinearLayout>

 

8.底部Tab按钮

父布局

            <LinearLayout
                android:background="#fff"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:weightSum="4">

一个Tab一个子布局

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

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

                    <TextView
                        android:gravity="center"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/home"
                        android:text="首页" />


                </RelativeLayout>

三、程序运行结果

（列出程序的最终运行结果及截图。）

      

 

四、问题总结与体会

（描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。）

1.问题：一开始写结构的时候没有布局意识，凭着感觉写，没有层次感。

解决：每写完一个模块后，回头看一下自己写的代码，整个的框架逻辑就会更加清楚。。

2.收获

对ScrollView有了较为清晰的认知。

3.课程安排

目前老师的课程安排，对于我个人而言，非常合适。