移动软件开发：安卓APP首页构建

最新推荐文章于 2024-04-24 15:17:23 发布
最新推荐文章于 2024-04-24 15:17:23 发布
阅读量490 收藏 4
点赞数
分类专栏： 移动软件开发 文章标签： android javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51544319/article/details/126522690
版权

一、实验目标

做一个app首页包括：

  • 顶部图片
  • 顶部菜单栏
  • 中部消息模块
  • 底部Tab按钮

熟悉如下组件的使用

  • ScrollView 使用
  • RelativeLayout 使用
  • 插件之间的穿插使用

二、实验步骤

页面结构

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

根据结构代码实现

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

在这里插入图片描述

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

在这里插入图片描述
默认垂直线性布局，直接放置即可出现如上的效果

顶部菜单栏（线性布局水平分布）
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="4"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:orientation="horizontal">
        <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_marginTop="10dp"
                android:layout_gravity="center"
                android:background="@drawable/test_icon1">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="验房"
                android:layout_marginTop="10dp">
            </TextView>
        </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_marginTop="10dp"
                android:layout_gravity="center"
                android:background="@drawable/test_icon2">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="日常巡检"
                android:layout_marginTop="10dp">
            </TextView>
        </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_marginTop="10dp"
                android:layout_gravity="center"
                android:background="@drawable/key">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="钥匙管理"
                android:layout_marginTop="10dp">
            </TextView>
        </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_marginTop="10dp"
                android:layout_gravity="center"
                android:background="@drawable/analys">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="统计分析"
                android:layout_marginTop="10dp">
            </TextView>
        </LinearLayout>
    </LinearLayout>

在这里插入图片描述

中部消息条

使用相对布局

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:id="@+id/m1"
                android:layout_width="380dp"
                android:layout_height="90dp"
                android:background="@drawable/back"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true">

                <RelativeLayout
                    android:layout_width="70dp"
                    android:layout_height="20dp"
                    android:background="@drawable/topleft">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_centerInParent="true"
                        android:layout_marginTop="3dp"
                        android:text="钥匙管理"
                        android:textColor="#FFFF"
                        android:textSize="10dp"
                        android:textStyle="bold"></TextView>
                </RelativeLayout>
                <TextView
                    android:id="@+id/text1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="30dp"
                    android:layout_marginLeft="20dp"
                    android:textColor="#333"
                    android:textSize="13dp"
                    android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请">

                </TextView>
                <TextView
                    android:id="@+id/num1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="3663"
                    android:layout_below="@id/text1"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="10dp"
                    android:textSize="18dp"
                    android:textStyle="bold"
                    android:textColor="#F43225">

                </TextView>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="条"
                    android:layout_below="@id/text1"
                    android:layout_marginTop="14dp"
                    android:textSize="14dp"
                    android:layout_toRightOf="@id/num1">
                </TextView>
                <ImageView
                    android:layout_width="11dp"
                    android:layout_height="11dp"
                    android:src="@drawable/arrow"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp">

                </ImageView>

            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/m2"
                android:layout_below="@id/m1"
                android:layout_width="380dp"
                android:layout_height="90dp"
                android:background="@drawable/back"
                android:layout_marginTop="20dp"
                android:layout_centerHorizontal="true">

                <RelativeLayout
                    android:layout_width="70dp"
                    android:layout_height="20dp"
                    android:background="@drawable/topleft2">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_centerInParent="true"
                        android:layout_marginTop="3dp"
                        android:text="验房"
                        android:textColor="#FFFF"
                        android:textSize="10dp"
                        android:textStyle="bold"></TextView>
                </RelativeLayout>
                <TextView
                    android:id="@+id/text2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="30dp"
                    android:layout_marginLeft="20dp"
                    android:textColor="#333"
                    android:textSize="13dp"
                    android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派">

                </TextView>
                <TextView
                    android:id="@+id/num2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="3"
                    android:layout_below="@id/text2"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="10dp"
                    android:textSize="18dp"
                    android:textStyle="bold"
                    android:textColor="#F43225">

                </TextView>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="条"
                    android:layout_below="@id/text2"
                    android:layout_marginTop="14dp"
                    android:textSize="14dp"
                    android:layout_toRightOf="@id/num2">
                </TextView>
                <ImageView
                    android:layout_width="11dp"
                    android:layout_height="11dp"
                    android:src="@drawable/arrow"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp">

                </ImageView>

            </RelativeLayout>
        </RelativeLayout>
    </ScrollView>

在这里插入图片描述

右上角圆角样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2579F4"></solid>
    <corners android:topLeftRadius="10dp"
        android:bottomRightRadius="10dp"></corners>
</shape>

在这里插入图片描述

底部栏

相对布局包裹，将线性布局置于底部

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#FFFFFF"
        android:layout_alignParentBottom="true"
        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="25dp"
                android:layout_height="25dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:background="@drawable/test_icon3">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="首页"
                android:textSize="13dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:orientation="vertical"
            android:layout_weight="1">
            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:background="@drawable/work">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="验房"
                android:textSize="13dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:orientation="vertical"
            android:layout_weight="1">
            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:background="@drawable/table">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="统计"
                android:textSize="13dp">
            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:orientation="vertical"
            android:layout_weight="1">
            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:background="@drawable/tool">
            </ImageView>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="设置"
                android:textSize="13dp">
            </TextView>
        </LinearLayout>

在这里插入图片描述

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

需要去熟悉app开发的组件的规范

  1. 创建任何一个控件,首先就是给他赋予宽和高layout_width:宽layout_height:高内部有且仅有一个控件
  2. 相对布局
    • layout_width:宽
    • layout_height:高
    • gravity:控制子控件的位置
  3. 相对其他组件的对齐方式
    在这里插入图片描述
江野_c
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
app:Because因为使用React Native构建的DueOfProg移动应用程序
05-14
因为OfProg的移动应用程序 阅读团队文章的最快方法 :locked_with_key: 执照 :inbox_tray: 下载这个软件 由于有了这个专案，因此该应用程式已由Github Actions自动编译。 然后，由于此操作，文件已通过SSH发送到DueOfProg VPS，并且可在以下位置找到： sinceofprog.fr/page/app 。 :rainbow: 这个怎么运作 这个React Native应用程序使用DueSiProProg API来获取文章和一些内容 React Native Paper用于构建某些组件（GUI） React Native Markdown Display用于显示Markdown文章 React Navigation用于在屏幕之间切换 :laptop: 发展 先决条件 React本机0.63.x Android Studio（或Android SDK） 设置 快速刷新模式（开发模式） n
玩Android项目开发1------首页（ViewPager+BottomNavigationBar实现导航栏）
qq_33235287的博客
02-12 995
进入主界面后，主要分为5个模块：首页、知识体系、公众号、项目、导航，首先先将页面框架搭建起来，使用ViewPager + BottomNavigationBar实现布局。 1、搜集底部导航栏的图片。 在Android项目中，考虑到内存，我们还是尽量避免从外界引入图片，因此推荐使用svg图片。 svg图片的获取，可以从阿里的矢量图库获取，也可以从其他的地方获取。 但是Android不支持svg矢量...
android动态刷新主页,Android手把手教大家制作APP首页（下拉刷新、自动加载）
weixin_28937805的博客
05-25 1225
一、概述作为一名三年Android开发经验的程序员，今天和大家一起实战一款APP的首页功能，这个首页在我们平时接触中还是很常见的，虽然页面简单，但是里面涉及的功能点还是挺多的。代码如有不足的还望各路同仁指点一二。页面中使用的开发库：整个首页架构使用的是LRecyclerView，包含下拉刷新和自动加载功能compile 'com.github.jdsjlzx:LRecyclerView:1.3.3...
android支付宝首页布局,类似支付宝首页——RecycleView多布局结构实现
weixin_42183453的博客
05-26 427
大家都知道，RecycleView默认只能通过setLayoutManager()方法指定一种布局结构，那么像支付宝首页这样复杂的多布局情况如何处理呢？在ListView中，我们也遇到过这种情况，是通过getItemViewType结合其他方法，通过判断类型来加载不同的布局。在RecycleView中也同样使用，今天我们主要介绍RecycleView多布局实现，其中布局嵌套了GridView，有些...
Android开发主页框架搭建
黄海1991的博客
01-16 1405
刚开始学Android时，一直想着搭建一个类似微信的主界面一样的框架，点击底部的按钮后切换到相应的界面，在学习了Android 几个月后，开始要做项目了，然后接到的第一个项目就有这样的要求（好像市面主流的app都是这样布局）。 经过几天的研究，最后我敲定了利用android.support.v4.view.ViewPager +Fragment 和RadioButton实现。ViewPage
制作安卓App首页
m0_51750799的博客
10-21 1255
做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。
Android 通用首页代码示例
GYBIN02的专栏
09-12 405
来包含多个部分，如横向 Banner、GridView 和 RecyclerView，可以通过嵌套不同的布局组件来实现。以下是一个示例布局的 XML 文件，展示如何将这些部分嵌套在。请根据你的实际需求创建适当的适配器和填充数据，以便每个部分显示正确的内容。这个布局示例提供了一种将不同类型的内容嵌套在。中的方法，以实现多个部分的滚动。在 Android 中，使用。
android的一个app代码怎么写,编写一个简单的安卓app界面
weixin_33563728的博客
05-26 2670
安卓的用户界面都是由View以及ViewGroup的子类对象组成的。View对象一般是想button或者textview这样的控件，ViewGroup对象是一个看不见的View容器，它定义了如何布局容器中装入的子View，比如是网格布局还是垂直布局等。android提供了通过xml文件编写的方式来操作这些View和ViewGroup，所以尽管View和ViewGroup比较复杂，但是我们其实多数时...
Android Studio学习02：App首页布局
junqiduhang的博客
08-25 7068
Android Studio；页面布局；ScrollView, RelativeLayout
制作安卓APP首页
m0_65061854的博客
08-26 896
制作一个安卓app首页
毕设项目Android studio 聊天APP 即时通讯APP 社交APP 项目文件
03-23
基于Android studio的社交APP开发，实现即时通讯与即时聊天，毕设项目、课设项目均可参考借鉴。Android Studio 是一个Android集成开发工具，基于IntelliJ IDEA. 类似EclipseADT，Android Studio 提供了集成的 ...
piranti-bergerak:移动设备软件开发课程
04-18
Piranti Bergerak-菜单应用概述和应用生命周期Menu App是一个简单的Android应用程序，可以数字化您的餐厅菜单，并允许用户轻松选择菜单。 此应用程序由2个活动（“主菜单”和“选择菜单”）和2个片段（“食物和饮料...
LunaSea：使用Flutter框架构建的用于移动设备的自托管控制器
02-05
LunaSea是功能齐全的开源自托管控制器！ LunaSea致力于为您提供所有自托管媒体软件之间的无缝体验，LunaSea...开发，安装和构建（iOS） 要求 MacOS机器 AppleID帐户（不需要开发者帐户） 发展 克隆存储库git clone gi
word源码java-MobileBankApp:AndroidOS上的模拟手机银行APP
06-05
制作这个模拟应用程序的目的完全是出于对移动软件开发的兴趣以及将大学知识应用于实际实践的愿望。 这个模拟的手机银行app模拟了市场上手机银行app提供的几个基本服务，如账户注册和登录、转账和收款人维护。 存储库...
Android --- 英文单引号用&apos；替换报错：does not contain a valid string resource
梁同学与Android
04-23 193
Android --- 英文单引号用&apos;替换报错：does not contain a valid string resource
Android 14 transtion 动画流程
u012627628的博客
04-24 913
implements Transitions.TransitionHandler 的对象都会调用到startAnimation。根据上步计算出来的sortedTargets计算要做的动画TransitionInfo。此列表在开始做动画时候会判断里面的key，value是否满足做动画的条件。将符合条件的changeInfo添加到targets 返回。计算所有的到mChanges。
安卓aab文件生成apk文件
最新发布
ma15991375491的博客
04-24 321
比如我们在手机上经常下载的的各种APP，其实一个Android应用程序的代码想要在Android设备上运行，必须先进行编译，然后被打包成为一个被Android系统所能识别的文件才可以被运行，而这种能被Android系统识别并运行的文件格式便是“APK”。一个APK文件内包含被编译的代码文件(.dex 文件)，文件资源（resources）， 原生资源文件（assets），证书（certificates），和清单文件（manifest file）严格来说，两者没有什么区别，后者是前者的一种升级版格式文件。
bugku ezbypass
m_de_g的博客
04-23 195
bugku ezbypass $++,$_++
OceanBase OLAP collation utf8mb4_bin 优先
余璜的技术博客
04-23 422
utf8mb4_bin是一种二进制的排序规则，比较字符串时直接比较字符串的二进制值，不需要进行复杂的字符比较和排序运算，这样可以有效减少CPU的使用，提高查询效率，特别是在涉及到大量数据操作时，性能优势更为明显。在大数据系统中，如无特别需要，建议 collation 指定为 utf8mb4_bin。
delphi xe8 ios与android移动应用开发(app开发)[完整中文版]下载
01-07
Delphi XE8是一款强大的集成开发环境，它提供了丰富的工具和组件，可用于开发iOS和Android...如果您需要Delphi XE8 iOS与Android移动应用开发(app开发)的完整中文版，可以在官方网站或其他软件下载平台进行下载获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值