实验6:做一个app首页

一、实验目标

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

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

二、实验步骤

1、基础知识

1.1 了解ScrollView

创建任何一个控件,首先就是给他赋予宽和高。

首先认识以下参数功能:

  1. layout_width:宽,

  2. layout_height:高,

  3. ScrollView内部有且仅有一个控件

实验6:做一个app首页_第1张图片

1.2 了解父布局与RelativeLayout

首先了解以下布局有以下几种常用的方式:

  1. LinearLayout(线性布局)

  2. RelativeLayout(相对布局)

  3. AbsoluteLayout(绝对布局)

  4. TableLayout(表格布局)

  5. FrameLayout(框架布局)

RelativeLayout,顾名思义,相对布局,也是非常常用的布局,他比LinearLayout更加灵活,可以实现非常复杂的UI

首先认识以下参数功能:

实验6:做一个app首页_第2张图片

 

2、逻辑梳理

页面上主要包含4部分, 包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮

实验6:做一个app首页_第3张图片

 

3、代码实现

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

新建ScrollView,创建ScrollView 内部父布局

实验6:做一个app首页_第4张图片

 

3.2 创建顶部首页显示栏

设置宽高,设置文字,设置字体样式,设置字体颜色,字体居中

实验6:做一个app首页_第5张图片

 

3.3 创建顶部图片

设置宽高、src加载图片、设置边距

实验6:做一个app首页_第6张图片

 

3.4 菜单栏模块

首先我们创建一个横向的tLinearLayout来作为菜单栏的父布局;

再次创建一个LinearLayout作为单个按钮的父布局;

创建上边的图片按钮,并设置其属性;

设置按钮底部文字并赋予其属性。

实验6:做一个app首页_第7张图片

 

3.5 消息模块

首先我们创建一个横向的LinearLayout来作为菜单栏的父布局;

创建待办Textview;

创建更多Textview。

实验6:做一个app首页_第8张图片 

3.6 底部Tab模块

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

再次创建一个LinearLayout作为单个按钮的父布局

按钮这个地方使用了RelativeLayout编写,请同学们仔细学习

参考后,完成其他布局功能

实验6:做一个app首页_第9张图片

 

3.7 补充菜单栏模块

使用四个LinearLayout创建四个菜单图标,关于LinearLayout的使用,详情可见上一个博客:

(57条消息) 实验5:第一个Android应用小程序_m0_52124992的博客-CSDN博客

实验6:做一个app首页_第10张图片

 

3.8 补充消息模块

实验6:做一个app首页_第11张图片

 

此次代码:


​
    
​
        
​
            
​
        
​
    
​
​
    
​
​
        
​
            
​
            
​
        
​
        
​
            
​
            
        
​
    

重复这部分代码,可以继续添加消息内容

3.9 补全底部Tab模块

重复四个RelativeLayout板块即可

实验6:做一个app首页_第12张图片

 

附上程序完整代码,如下:



​
    
​
        
​
            
​
            
​
            
​
                
​
                    
​
                    
                
​
                
​
                    
​
                    
                
​
                
​
                    
​
                    
                
​
                
​
                    
​
                    
                
            
​
            
​
                
                
            
​
            
​
            
​
            
​
                
​
                    
​
                        
​
                    
​
                
​
            
​
            
​
​
                
​
​
                    
​
                        
​
                        
​
                    
​
                    
​
                        
​
                        
                    
​
                
​
                
​
                    
​
                        
​
                    
​
                
​
                
​
​
                    
​
                        
​
                        
​
                    
​
                    
​
                        
​
                        
                    
​
                
​
            
​
        
    
​
    
​
        
​
            
            
        
​
        
​
            
            
        
​
        
​
            
            
        
​
        
​
            
            
        
    

三、程序运行结果

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

实验6:做一个app首页_第13张图片

 

四、问题总结与体会

1、这次在补全消息模块时,使用的方法同上一个实验是类似的,都是LinearLayout进行布局,在处理右箭头对齐的时候,出现了一些小麻烦,通过修改android:layout_width,layout_weight可以解决这一问题

2、通过此次实验,学习了如何使用RelativeLayout创建了列表布局,了解了了ScrollView的用法,对Android开发的有了进一步了解

3、源码已经放在GitHub:yidongruanjian/exercise5&6 at main · adu324/yidongruanjian (github.com)

你可能感兴趣的:(移动软件开发,javascript,开发语言,ecmascript)