首页 > 其他分享 >【移动应用开发】界面设计(二)实现水果列表页面

【移动应用开发】界面设计(二)实现水果列表页面

时间:2024-10-25 21:45:32浏览次数:3  
标签:界面设计 绑定 布局 binding 列表 item build RecyclerView 页面

续上一篇博客

【移动应用开发】界面设计(一)实现登录页面-CSDN博客

目录

一、采用ViewBinding实现一个RecyclerView

1.1 在app/build.gradle中添加recyclerview依赖,并打开viewBinding

(1)在app/build.gradle中添加依赖

(2)在app/build.gradle中打开viewBinding功能

(3)点击同步Sync,同步项目

1.2 在layout目录下创建一个fruit_item.xml

(1)设置为LinearLayout

(2)插入ImageView

(3)插入TextView

1.3 修改activity_main.xml

(1)将布局改为LinearLayout

(2)插入RecyclerView控件

1.4 新建一个命名为Fruit的类

(1)Fruit类

(2)Kotlin类

1.5 新建一个名为FruitAdapter的适配器类

(1)同理,新建一个类文件,命名为FruitAdapter

(2)重写onCreateViewHolder、onBindViewHolder和getItemCount方法

1.6 修改MainActivity类

(1)新增一个私有val变量fruitList

(2)新增一个私有var变量binding

(3)修改onCreate()方法

(4)新建私有方法initFruits()

(5)修改onCreate()方法

(6)创建一个layoutManager

(7)创建一个adapter

1.7 实现点击事件

(1)修改MainActivity类

(2)运行截图

二、心得体会

2.1 如需加入RecyclerView控件,需要对工程环境做何种配置?

(1)在build.grade文件中导入依赖

(2) 如果想用视图绑定模式,同样在build.grade文件中设置

2.2 设计一个RecyclerView,其中每一个item是否需要一个自定义布局?在实验中该自定义布局是哪个文件?对应的,是否需要一个实体类?布局的控件和实体类的字段是否需要对应?

2.3 为RecyclerView创建一个Fruit适配器,创建一个内置类ViewHolder,是怎样获取自定义布局中的实例?

2.4 如何对ViewHolder中的实例进行数据绑定的?

2.5 如何在Activity中对RecyclerView的布局方式进行设置?

2.6 如何在Activity中对RecyclerView的适配器绑定为Fruit适配器?

2.7 如何打开ViewBinding功能?

2.8 如果在Activity的布局中有一个按钮,我们应如何在onCreate中添加按钮的点击监听事件?

2.9 在RecyclerView的Adapter中,我们可以在ViewHolder内置类中传入item布局的binding。


一、采用ViewBinding实现一个RecyclerView

1.1 在app/build.gradle中添加recyclerview依赖,并打开viewBinding

(1)在app/build.gradle中添加依赖

其中版本号1.x.0将会自动更新。

(2)在app/build.gradle中打开viewBinding功能

在android字段下将viewBinding设置为true

(3)点击同步Sync,同步项目

1.2 在layout目录下创建一个fruit_item.xml

(1)设置为LinearLayout

宽度为match_parent

高度为80dp

layout_margin设为5dp

(2)插入ImageView

id为fruitImage

宽和高均为40dp

layout_gravity为center_vertical

marginLeft为10dp

(3)插入TextView

id为fruitName

宽和高均为wrap_content

layout_gravity为center_vertical

marginLeft为10dp

1.3 修改activity_main.xml

(1)将布局改为LinearLayout

宽和高match_parent

orientation设为vertical

(2)插入RecyclerView控件

androidx.recyclerview.widget.RecyclerView

宽度高度均设为match_parent

id为recyclerView

1.4 新建一个命名为Fruit的类

(1)Fruit类

在app/src/main/java/com.example.recyclerviewtest下右键newàKotlin Class/File

(2)Kotlin类

(以下使用Kotlin来编写)

1.5 新建一个名为FruitAdapter的适配器类

(1)同理,新建一个类文件,命名为FruitAdapter

该类传入参数fruitList,约束为一个列表类型List<Ranking>,继承RecylcerView.Adapter。

定义一个内置类,传入一个FruitItemBinding的binding绑定,

加入两个变量fruitImage和fruitName,并绑定为FuitItemBinding的fruitImage和fruitName

(2)重写onCreateViewHolder、onBindViewHolder和getItemCount方法

onCreateViewHolder将fruit_item的绑定类FruitItemBinding展开,然后新建ViewHolder并传回;

onBindViewHolder将ViewHolder的两个变量fruitImage和fruiteName进行数据绑定。

1.6 修改MainActivity类

(1)新增一个私有val变量fruitList

类型为ArrayList<Fruit>

(2)新增一个私有var变量binding

设置为稍后初始化,绑定为ActivityMainBinding,用于调用activity_main.xml对应的Binding类

(3)修改onCreate()方法

将ActivityMainBinding传入binding,然后用binding.root来设置ContentView

(4)新建私有方法initFruits()

新增fruitList的列项,将水果名以及对应的图片添加进去

(5)修改onCreate()方法

使用initFruits()方法进行fruitList的初始化

(6)创建一个layoutManager

传入binding.recyclerView.layoutManager中

(7)创建一个adapter

传入binding.recyclerView.adapter中

1.7 实现点击事件

(1)修改MainActivity类

在FruitAdapteronCreateViewHolder中,打开viewHolder中的控件监听事件

viewHolder.itemView.setOnClickListener{

};

在监听事件中,取得点击位置

val position = viewHolder. bindingAdapterPosition

在监听事件中,实现Toast功能,注意判断位置是否为空

(2)运行截图

点击Pear,显示成功

鼠标往下滑,页面实现滚动,点击最后一个水果,成功弹窗对应水果名称。

二、心得体会

2.1 如需加入RecyclerView控件,需要对工程环境做何种配置?

(1)在build.grade文件中导入依赖

(2) 如果想用视图绑定模式,同样在build.grade文件中设置

2.2 设计一个RecyclerView,其中每一个item是否需要一个自定义布局?在实验中该自定义布局是哪个文件?对应的,是否需要一个实体类?布局的控件和实体类的字段是否需要对应?

(1)其中每一个item都有对应的自定义布局,根据不同的业务需求显示不同的效果;

(2)本实验对应的自定义布局是fruit_item.xml;

(3)一般需要一个实体类去维护每个item的信息,封装成对象,作为适配器的适配类型,便于开发,同时含义也更清晰;

(4)布局的控件和实体类的字段不需要对应,在操作的时候我们是手动设置的

2.3 为RecyclerView创建一个Fruit适配器,创建一个内置类ViewHolder,是怎样获取自定义布局中的实例?

每一个item对应着一个ViewHolder,而每一个ViewHolder对应着item.xml文件中的组件。

当页面刚加载或者上下滚动的时候 会调用onCreateViewHolder方法。而该方法返回了ViewHolder对象。然后调用onBindViewHolder方法,我们在里面根据数据位置与当前item的viewholder设置了对应的值,然后就可以对应上了。

2.4 如何对ViewHolder中的实例进行数据绑定的?

当获取完viewHolder之后会去调用onBindViewHolder方法,在这个方法里面根数当前item的viewholder设置了对应的值,这样就可以对应上了。

2.5 如何在Activity中对RecyclerView的布局方式进行设置?

(1)动态载入布局文件,由于MainActivity与activity_layout.xml是对应的,首先要获取xml文件对象,然后通过inflate进行实例化

(2)设置布局管理器

2.6 如何在Activity中对RecyclerView的适配器绑定为Fruit适配器?

直接实例化一个对象并将它设置为适配器即可。

2.7 如何打开ViewBinding功能?

在项目工程模块的build.gradle中加入以下配置

2.8 如果在Activity的布局中有一个按钮,我们应如何在onCreate中添加按钮的点击监听事件?

(1)在 Activity 中进行延迟初始化的 binding。首先,确保在 build.gradle 文件中启用 viewBinding 选项,然后在 Activity 的类中声明一个成员变量来持有生成的绑定类实例。

(2)在 onCreate 方法中进行绑定初始化:

(3)设置布局管理器,在这里可以设置布局

(4)添加按钮的点击监听事件:一旦布局文件中的按钮被加载,可以直接通过 binding 对象引用该按钮,并为其添加点击监听事件

2.9 在RecyclerView的Adapter中,我们可以在ViewHolder内置类中传入item布局的binding。

由于是动态创建,所以pojo类对应着数据;而viewholder对应着布局中的组件。

标签:界面设计,绑定,布局,binding,列表,item,build,RecyclerView,页面
From: https://blog.csdn.net/m0_67830223/article/details/143126971

相关文章

  • 力扣练习1264.页面推荐
    1264.页面推荐一、题目链接二、题目描述三、建表语句四、题目解答1、思路讲解2、代码实现五、知识总结一、题目链接1264.页面推荐(需要会员)二、题目描述朋友关系列表:Friendship±--------------±--------+|ColumnName|Type|±--------------±--------+......
  • 学习笔记(四):页面和自定义组件生命周期
    页面和组件的定义:自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的......
  • 散列表(哈希表)
    基本思想以数据对象的关键字key为自变量,通过一个确定的函数关系h,计算出对应的函数值h(key),把这个值解释为数据对象的存储地址,并按此存放,即存储位置=h(key)装填因子设散列表空间大小为m,填入表中的元素个数是n,则装填因子a=n/m,常见散列表大小设计使得a=0.5~0.8为宜装填因子有什......
  • 构建更加丰富的页面 习题答案<HarmonyOS第一课>
    一、判断题1. Tabs组件可以通过接口传入一个TabsController,该TabsController可以控制Tabs组件进行页签切换。正确(True)错误(False)正确(True)回答正确2. WebviewController提供了变更Web组件显示内容的接口,例如可以使用loadData来加载一个网页链接地址改变Web组件的......
  • 从简单的页面开始<HarmonyOS第一课>
    一、判断题1. Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮,其类型包括胶囊按钮、圆形按钮、普通按钮。正确(True)错误(False)正确(True)回答正确2. 对于包含文本元素的组件,如:Text、Span、Button、TextInput等,使用fontFamily设置字体时,参数......
  • C/S结构用户界面设计
    【实验编号】10003809547j 图形用户界面设计【实验学时】8学时【实验环境】l 所需硬件环境为微机;l 所需软件环境为MicrosoftVisualStudio2013【实验内容】编写一整套Mis系统UI界面,Mis系统名称自拟,尽量运用到如下控件:l 窗体l 菜单l 工具栏l 状态栏控件l......
  • 请求放入对象列表中
    好的,你想要将解析到的GET请求包含的信息放到一个对象列表中,这样可以更方便地管理和使用这些信息。你可以定义一个包含URL、请求参数及其名称和请求格式的类,然后将解析到的信息存储到该类的对象列表中。首先,定义一个类来存储GET请求的信息:importjava.util.Map;publicclassAp......
  • vue-cli 跳转到页面指定位置
    原文关注公众号,后台里留言可进行提问,可在后台留言向作者提问解答问题!https://mp.weixin.qq.com/s?__biz=Mzg3NTAzMzAxNA==&mid=2247484254&idx=1&sn=361bbb2113be3eeda3802f0a805c5705&chksm=cec6fb87f9b1729174e3ae66bf9693207386256c964499c098fb8a6cc14b4ba266bc271073a3&tok......
  • 手机端H5页面适配PC端
    手机端H5页面适配PC端@mediaonlyscreenand(min-width:500px){page{width:375px;margin:0auto;/*解决元素position为fixed时,以屏幕视口为容器,从而导致该元素宽度为100%时铺满整个屏幕*/transform:perspective(1px);}}元素po......
  • 灰色代码部分:要是输入名字列表,又能输出结果,但是空列表的时候就输出不了?
    大家好,我是Python进阶者。一、前言前几天在Python白银交流群【Aciel】问了一个Python基础的问题,问题如下:灰色代码部分:要是输入名字列表,又能输出结果,但是空列表的时候就输出不了?二、实现过程这里【瑜亮老师】给了一个指导,具体如下所示:@Aciel 循环fornameinnames: 遍历......