复刻安卓APP首页

最新推荐文章于 2024-08-02 17:10:10 发布

33鹅

最新推荐文章于 2024-08-02 17:10:10 发布

阅读量150

点赞数

文章标签： android studio

本文链接：https://blog.csdn.net/m0_53114829/article/details/126456693

版权

一、实验目标

做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。

二、实验步骤

一、逻辑梳理

页面上可以分为4个部分：顶部图片模块、顶部菜单模块、待办消息模块、底部Tab按钮。

二、代码实现

创建父布局，新建ScrollView，并创建ScrollView内部父布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1DEDE"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="221dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#fff">

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

创建顶部首页显示栏

设置宽高、文字、字体样式、颜色。

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

            </TextView>

创建顶部图片

设置宽高，使用src加载图片，设置边距

 <ImageView
                android:layout_width="match_parent"
                android:layout_height="178dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@mipmap/testimg" />

菜单栏模块

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

<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"
        android:background="#fff">

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_below="@+id/hao"
                android:gravity="center"
                android:text="验房"/>
        </RelativeLayout>

接下来补全菜单栏剩余模块。

        <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/one" />

            <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/two" />

            <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/three" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="钥匙管理"/>


        </LinearLayout>

此时效果如下：

消息模块

创建一个横向的LinearLayout来作为菜单栏的父布局
创建待办Textview
创建更多Textview

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="285dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:weightSum="4"
        android:orientation="horizontal"
        android:background="#E1DEDE">

        <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="待办（10）"/>

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

!](https://img-blog.csdnimg.cn/eeba7681ac5b4bcdb19f1d8bf42b9544.png)

底部Tab模块

创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局
再次创建一个LinearLayout作为单个按钮的父布局

按钮部分使用RelativeLayout编写

    </LinearLayout>

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

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/house"
                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/time"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/undertwo" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/time"
                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/statistic"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/underthree" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/statistic"
                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/set"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/underfour" />

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

        </RelativeLayout>

    </LinearLayout>

三、程序运行结果

最终在手机上运行结果如下：

四、问题总结与体会

经过上午对APP紧密地学习后，下午写代码时感觉轻松了许多。对语法逐渐熟悉、对结构逐渐理解，这让我也更加有信心。
这次试验新学了RelativeLayout的编写，感觉和LinearLayout差别不是很大，简单容易上手。遇到的问题时下端模块无法直接到达最下面，最终的完善方法是让上一个模块高度变大，将底端模块“挤”下去，这样画面就变得和谐了。