安卓APP首页

最新推荐文章于 2024-07-24 21:35:56 发布

__By__

最新推荐文章于 2024-07-24 21:35:56 发布

阅读量483

点赞数

文章标签： android ui 前端

本文链接：https://blog.csdn.net/m0_51766561/article/details/126522178

版权

一、实验目标

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

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

二、实验步骤

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

本实验的要点主要包括Scroll使用，RelativeLayout使用，以及插件之间的穿插使用。
创建一个新项目，选择Empty Activity创建空的页面app，并把项目语言那里改成JAVA。创建好项目之后就可以开始实验了。创建任何一个控件，首先就是给他赋予宽和高，这里我们需要对相关需要使用到的父布局进行学习。RelativeLayout，顾名思义，相对布局，也是非常常用的布局，他比LinearLayout更加灵活，可以实现非常复杂的UI。
本次实验的页面可以分为四个部分，顶部图片模块，顶部菜单模块，待办消息模块，底部Tab按钮。首先我们创建他们的父布局，新建ScollView，创建ScrollView内部父布局。如下图所示，是本项目的父布局结构。
接下来我们创建顶部首页显示栏，并为此布局设置宽高，设置文字，设置字体样式，设置字体颜色，并将字体居中，具体代码如下图图一所示。形成的效果如图二所示，背景为白色。
接下来创建顶部图片。并设置宽高，src加载图片，设置好边距，让图片显示在居中的位置。我们使用的是image组件，具体代码和效果展示如下。
接下来创建菜单栏模块。首先我们创建一个横向的LinearLayout，LinearLayout来作为菜单栏的父布局，再次创建一个LinearLayout作为单个按钮的父布局，创建上边的图片按钮,并设置其属性，设置按钮底部文字并赋予其属性。具体效果展示如下图所示。
接下来创建消息模块，首先我们创建一个横向的LinearLayout来作为菜单栏的父布局，创建待办Textview，创建更多Textview。具体代码如下图所示，注意父布局里面需要设置横向布局，使得相关文字内容能够完全显露出来。效果展示如下图图二所示。
接下来我们创建底部Tab模块，首先我们创建一个横向的LinearLayout，LinearLayout来作为菜单栏的父布局，再次创建一，LinearLayout作为单个按钮的父布局，按钮这个地方使用了RelativeLayout编写，主要实现了让文字处于按钮图标的正下方的放置，使用layout_below和按钮图标的id来实现此放置，就比LinearLayout要方便的多。具体代码和实现效果如下图所示。此页面是首页，所以此图标首页是蓝色的选中状态。

三、程序运行结果

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

最终运行结果如下图所示，图二是项目在虚拟机上运行的成果。

四、问题总结与体会

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

在实验过程中，若项目资源例如图片的命名中包含了中文则会报错，此时只需要重命名成英文名字即可。同时和上一个实验一样。我们需要通过添加纵向布局或者是横向布局的属性来控制组件的摆放位置，否则容易看不见组件。
通过本次实验，完成了一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。在此过程中，不断掌握了 ScrollView, RelativeLayout，以及插件之间的穿插使用。RelativeLayout相较于LinearLayout有诸多优点，可以通过设置id并利用相对位置来放置组件。