RecyclerView使用-涂鸦智能App的首页和添加效果-从0到1过程

本周作业

本篇仅为了完成作业，
三选一，选个最bt的，开始
由于压根没做过，绝对大量踩坑
边写边更新，越写越头疼，写到最后算是完成了，

参考资料

绘图网址: draw.io

图标网站: https://www.iconfont.cn/

参考资料: https://blog.csdn.net/weixin_31163455/article/details/147547153
虽然里面的代码直接复制无法使用，但是扔给ai还是修复一下可以实现效果的

参考资料: https://www.cnblogs.com/guanxinjing/p/13037271.html
这个里面的代码复制过来就可以直接用了

参考资料: https://www.kancloud.cn/digest/tttkkk/125254
参考资料: https://blog.csdn.net/qq_36243942/article/details/82187204
参考资料: https://codeleading.com/article/46803650845/

---

页面分析

首页布局分析

• 如何实现两列摆放

利用上一个最简使用的Recycler进行测试，加上下面的代码可以实现两列摆放

// 使用 GridLayoutManager，每行两列
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
recycle_view.setLayoutManager(gridLayoutManager);

• 如何实现横向摆放

在上一个最简使用的Recycler进行测试，加上下面一行代码实现横向摆放并拖定的效果

recycle_view.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

页面分析完毕，开始动手操作

实操

创建文件

右键文件夹开始创建

页面设计

顺序 : 从上到下,从左到右，开始

2.1. toolbar布置

2.2 导航栏

发现除非自定义，不然文字加不上去，只好截图了

将截图放在xhdpi，选中toolbar右侧搜索nav，引用截图

2.3 Menu

在res下创建Menu文件夹

右键Menu文件夹，需要创建一个menu文件，两个item，一个item语音图标，一个item添加图标，图标从https://www.iconfont.cn/ 获取

先创建语言按钮

下载图片放入xhdpi文件夹

右键menu文件夹创建menu文件

编写代码

添加一个item
icon表示图标，title表示标题，showAsAction表显示

在页面中引用

由于踩坑，图片懒得换了

添加第二个item

add图标下载后直接扔进xhdpi文件夹下就可以了

效果图

2.4 横向的RecyclerView

添加RecyclerView

设置id

创建样式

创建适配器(由于上一个已经写过就不写详细过程了)，下面过程皆为复制粘贴，加小修改

编写主页面代码

效果

之间的间隔过大需要调整，调整外部线性布局的大小

添加point，去下载后，添加imageview

添加后的运行效果

2.5 两列的RecyclerView

添加新的RecyclerView，id为recycler_v

编写样式

使用相对布局，内部放置了两个TextView 三个imageView

编写适配器

编写主页面

运行效果图

添加数据后的运行效果图

2.6 选项框

在底部放入RadioGroup（水平），并在内部放置三个RadioButton，宽度0dp，每个权重为1

去除按钮标志，设置居中

放置图标

运行效果

添加按钮界面

3.1 创建界面

3.2 实现跳转

3.3 设计页面

添加toolbar再加上图标

这里我使用了自定义按钮，可以使用普通按钮设置一下背景色就完成了

在主页面设计发送和接受方法

添加界面编写传回的信息

最终结果展示

总算写完了，下次不干这种事情，太费事也太费时间。

早上9点到晚上12点半。耗时有点长了，还有三个作业没写，希望时间能短一点吧