类微信界面实现(一)
作业目标:
设计一个app门户框架,实现3~4个tab切换效果,并在任一tab页中实现列表效果
技术说明:
activity,xml,fragment,recycleview
关键代码解析:
UI布局
基础界面框架:
0.主显示界面:main.xml
1:顶端"微信"显示:.res/layout/top.xml
2.中部内容显示:.res/layout/tab1.xml~tab4.xml(点击底部按钮显示不同的中部内容)
3.底端按钮选择:.res/layout/botton.xml
ps:
在创建.xml文件时,Component Tree(组件树)中会出现 ConstraintLayout ,并且无法删除 (可忽略)
解决办法:
*右击选择 Convert view
*选择所需-->Apply
*选中组件,点击图标可更改样式
一:顶端:
*将textView控件拖到LinearLayout控件中
*在Code界面设置相关属性:文字内容,大小,颜色,位置,背景
*在设置完以上属性后可以发现,布局出现了问题,并没有如我们预想的那样,黑底白字的"微信"UI位于顶端
*回到Design界面,拖动布局修改,在拖动的过程中又出现了问题:只可以修改宽,而高拖不动,观察发现textView的layout_weight(权重)设置为"1",而该控件又是"vertical",且只包含textView这一个控件,从而导致其强制铺满
解决办法:将layout_weight清除
或 将layout的layout_wight设置为match_parent,layout_height设置为warp_content
*改正后发现"微信字样不居中
*查阅资料,发现可能是字体溢出问题导致无法自适应
故而将TextView控件的layout_height设置为warp_content
重新设置相关代码:
在TextView模块设置文字内容,位置,颜色,大小
在LinearLayout模块设置背景
成功.
二:中部
lab1.xml:
*拖入相关控件LinearLayout{textView}
*设置textView控件属性:文字内容,大小,位置
*复制粘贴,得到其它tap
三.底部
*拖入相关控件(先完成一个,后续复制粘贴)
*设置相关属性
*复制粘贴修改参数
此时我们会发现,其间距不是等宽的,此时,我们采用设置权重(layout_weight)的方法来使其占比相同
-->选中LinearLayout(V)
-->在搜索框内输入"w",找到layout_wight,将其设置为"1"
-->依次点击LineLayout,界面会停留,直接输入即可
也可以在代码中直接修改:
使用setOnClickListener来监听不同控件,以达到响应的目的.(在第二部分:UI交互)
四.主界面
*拖入相关控件
*通过include使用编写好的布局
此时发现bottom.xml布局没有出现----->占比问题
故而接下来设置权重(layout_wight)
*设置权重
UI交互:
一:tab切换效果
目标:
点击底部的图案,在中部响应对应的提示信息
1.监听点击
2.响应点击
3.局部跳转
效果展示:
实现:
1.创建Fragment管理屏幕中部界面以达到局部响应的目的:
在该目录下创建4个Fragment文件:Fragment1,Fragment2,Fragment3,Fragment4分别对应tab1,tab2,tab3,tab4
(在创建Fragment文件时,其会自动生成对应的.xml文件,我们需要将其删除,并将参数(如下图红框中所示)设置成我们之前所编辑的tab.xml响应界面)
2.点击响应功能实现
*声明变量
FragmentManager:管理Fragment，以及FragmentTransaction
*主函数
将各个Fragment实例化
调用对应函数
当不做任何操作时,默认展示第一个tab
*初始化控件:
此处我选择将linearlayout控件(其包含其他控件)作为我们的点击按钮监听,所以仅将其通过findViewById方法调用,传入资源id,连接对应的view,进行后续处理
*添加Fragment:
通过.add()的方法添加各个Fragment
将所有的tab.xml加入到主界面
因为此操作是以事务[FragmentTransaction]的形式,所以在完成操作后,需要注意事务的提交.commit();
*初始化按钮(linearLayout)
.setOnClickListener()达到监听点击-->响应点击的目的
此处调用了我所编写的onClick()响应函数:
*隐藏tab
此处我们选择先全部隐藏,再根据监听的点击目标选择展示出对应的tab
*点击响应
判断点击响应对应view的资源id,给展示函数传入对应参数
ps:关于此函数的实现:
一开始我采用的是switch-case的语法,但是会报出以下错误:case语句后面必须是常量.是版本问题,所以此处改为if语句实现
*tab展示
在接收对应参数后展示对应的tab内容
因为此操作是以事务[FragmentTransaction]的形式,所以在完成操作后,需要注意事务的提交.commit();
3.具体过程:
当我们点击目标控件范围内任何位置时,initBotton()中的.setOnClickListener函数监听到了该次点击,由于在initLinearLayout()中,我们通过findViewById方法调用,传入资源id,连接了对应的view.所以setOnClickListener函数将该view传入了onClick()中,onClick接收了对应的view,通过.getId()将其id与各个控件的id进行比对,当匹配成功后,调用showFragment()展示对应Fragment中的内容
二:列表效果
目标:
点击"通讯录",显示联系人列表.
1.设计每行UI布局
2.配置配适器
3.实例化显示
效果展示:
实现:
一:布局
1.调整布局,加入recyclerview控件:
2.为列表的每一行设定显示效果(格式)
二:配置:
1:Adapter配适器设置
*变量声明:
*重写构造函数,传入数据:
*设定每一行视图
编写自己的holder[RecyclerView.ViewHolder]函数,为列表中的每一行数据设置静态格式,动态数据
此处我选择将之前设定的item.xml(每行的显示UI设定)中的TextView控件作为传入数据的显示
ps:注意继承问题
*绑定具体数据:
重写RecyclerView.Adapter类的onBindViewHolder()方法
*构建ViewHolder，返回每一行的布局
*返回列表中元素数量:
2.显示
("通讯录"tab2.xml所对应的Fragment2中设定)
*变量声明
*获取RecyclerView对象
*初始化数据
*实例化Myadpter
源码:
https://github.com/TIANQIISGOOD/AS_weixin
