安卓APP首页

于 2022-08-26 19:28:54 发布
阅读量129 收藏
点赞数
文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53540438/article/details/126549268
版权

Github仓库地址？ https://github.com/xiaoli-guan/lab6.git

一、实验目标

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

二、实验步骤

页面上可以分为四个部分：

1、顶部图片模块

2、顶部菜单模块

3、待办消息模块

4、底部Tab按钮

（1）顶部图片模块

我们先创建一个父布局，设置以下整体属性。

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

然后创建顶部首页显示栏

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

创建顶部图片

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

此时效果如下：

在这里插入图片描述

（2）顶部菜单模块

然后创建一个横向子布局,在该子布局里再创建四个纵向子布局用来放置图标和文字

//菜单栏模块
            <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:orientation="vertical"
                    android:layout_weight="1">
                    <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_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:orientation="vertical"
                    android:layout_weight="1">
                    <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_marginTop="10dp"
                        android:gravity="center"
                        android:text="日常巡检"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:orientation="vertical"
                    android:layout_weight="1">
                    <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_marginTop="10dp"
                        android:gravity="center"
                        android:text="钥匙管理"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:orientation="vertical"
                    android:layout_weight="1">
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/tongjifenxi" />


                    <TextView
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>


                </LinearLayout>




            </LinearLayout>

效果如下：

在这里插入图片描述

（3）待办消息模块

接下来就是待办消息模块了。我们先创建一个纵向的布局。在里面创建两个横向布局A和B。A用来说明该模块的作用。B布局里面在创建两个纵向布局用来显示待办信息。

布局圆角的方法：

首先在Drawable文件下建一个corner_view.xml文件：

然后添加下面代码，使用时将该文件当作图片来使用即可，用background，

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
solid为填充颜色，如果不写，将是默认的黑色，我这里设置成白色
<solid android:color="#ffffffff" /> 
<corners android:radius="10dp" /> 
<padding android:left="5dp" android:top="5dp"   
 android:right="5dp" android:bottom="5dp" />
</shape>

该模块的代码如下：

 //消息模块
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="#F7F6FB"
                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>

            //便签模块
            <LinearLayout
                android:layout_width="match_parent"
                android:background="#F7F6FB"
                android:orientation="vertical"
                android:layout_height="260dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:background="@drawable/textview"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginRight="20dp">


                    <LinearLayout
                        android:layout_width="80dp"
                        android:layout_height="25dp"
                        android:background="@drawable/view2">
                        <TextView
                            android:textStyle="bold"
                            android:gravity="center"
                            android:layout_width="80dp"
                            android:layout_height="20dp"
                            android:text="钥匙管理"
                            android:textSize="10dp"/>
                    </LinearLayout>

                    <TextView
                        android:layout_marginTop="25dp"
                        android:gravity="center"
                        android:layout_width="200dp"
                        android:text="借用申请 --- 3663条"
                        android:textStyle="bold"
                        android:layout_height="25dp"/>
                    <ImageView
                        android:layout_marginTop="15dp"
                        android:layout_marginLeft="50dp"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@mipmap/right"/>

                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:background="@drawable/textview"
                    android:layout_height="60dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginRight="20dp">



                    <LinearLayout
                        android:layout_width="80dp"
                        android:layout_height="25dp"
                        android:background="@drawable/view3">
                        <TextView
                            android:textStyle="bold"
                            android:gravity="center"
                            android:layout_width="80dp"
                            android:layout_height="20dp"
                            android:text="验房"
                            android:textSize="10dp"/>


                    </LinearLayout>


                    <TextView
                        android:layout_marginTop="25dp"
                        android:gravity="center"
                        android:layout_width="200dp"
                        android:text="问题待指代 --- 3条"
                        android:textStyle="bold"
                        android:layout_height="25dp"/>
                    <ImageView
                        android:layout_marginTop="15dp"
                        android:layout_marginLeft="50dp"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@mipmap/right"/>
                </LinearLayout>


            </LinearLayout>

效果如下：

在这里插入图片描述

（4）底部Tab模块

最后就是底部的Tab模块了。

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

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局，再次创建一个LinearLayout作为单个按钮的父布局。添加图标和文字即可

<RelativeLayout

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


                    <ImageView
                        android:id="@+id/img"
                        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_marginTop="5dp"
                        android:gravity="center"
                        android:layout_below="@id/img"
                        android:layout_centerHorizontal="true"
                        android:text="首页"/>

                </RelativeLayout>

以上是其中一个子布局的代码。剩余三个子布局代码与其相似。

效果如下：

在这里插入图片描述

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

本次实验十分有趣，没有遇到太大的问题。

本次实验在上一个实验的基础上，更加深入了解了布局的灵活使用。各种布局嵌套使用就可以达到理想的效果。对于安卓页面开发也有了更深的认识，对于我的帮助很大。

xiaoli-guan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值