首页 > 其他分享 >(原创)【B4A】一步一步入门09:xCustomListView,加强版列表、双行带图片、复选框按钮等自定义列表项(控件篇05)

(原创)【B4A】一步一步入门09:xCustomListView,加强版列表、双行带图片、复选框按钮等自定义列表项(控件篇05)

时间:2023-03-28 10:15:01浏览次数:50  
标签:控件 自定义 列表 添加 xCustomListView CLV ListView

一、前言

上篇((原创)【B4A】一步一步入门08:ListView,列表、单行、双行、双行带图片、列表项样式(控件篇04))我们讲了ListView,目前官方已经不推荐再使用ListView了,而是推荐使用xCustomListView代替ListView。

我们本篇教程就来讲一下xCustomListView的基本使用方法,以及在使用时的注意事项。

相信看完的你,一定会有所收获!

本文地址:https://www.cnblogs.com/lesliexin/p/17263029.html


二、添加xCustomListView库

与ListView控件不同,ListView是IDE自带的控件,可以直接在设计器中选择添加。

而xCustomListView(简称:CLV)是第三方控件,需要先行添加对应的类库,才能使用此控件。

我们找到Libraries Manager(类库管理器)面板,如果没有的话可以通过菜单栏的视窗-类库管理器打开。

image

在类库管理器面板中,我们找到xCustomListView,勾选即可完成添加和引用。

image

我们重新打开设计器,选择菜单栏的添加控件-CustomView-CustomListView,即可完成添加。

image


三、添加列表项

对于CLV而言,其没有ListView那么多自带的添加列表项的方法,CLV只有两个:

一个是AddTextItem,用于添加单行文本的列表项;

一个是Add,用于添加类型为B4XView的列表项。

下面我们会进行详细的讲解。


四、添加列表项-单行文本

我们直接使用方法AddTextItem,即可添加类型为单行文本的列表项。

image

具体的效果如下:

image


五、添加列表项-双行文本带图片

下面,我们实现ListView的双行文本带图片的效果。

要实现这种效果,需要先行构造一个包含两行文本和一个图片的面板,然后将此面板作为一个整体作为一个列表项。

(一)构造列表项布局

构造面板的方式有两种,一种是通过设计器进行构造,一种是通过代码去构造。

鉴于直观性和易理解性,本篇教程采用第一种方式,即使用设计器去构造。至于通过代码去构造,读者可以自行尝试,本系列后续文章也会有专门的讲解。

1,添加新布局文件

我们打开设计器,选择菜单栏的文件-新建,即可新建并打开一个空的布局。

我们点击文件-保存,在弹出的窗口中输入布局名称,点击确定即可将布局文件保存到当前项目中。

image

2,添加控件

我们添加两个Label和一个ImageView控件,然后调整布局如下。

image

3,编写小脚本

对于我们而言,我们从CLV中取到的列表项是一个B4XView,也就是整体的布局,而无法获取到此布局内的各个控件,所以我们需要通过一些操作来将布局内的控件“暴露”出来以供使用。

我们关闭设计器,回到主界面,添加类库:DesignerUtils。

image

然后重新打开设计器,在左下角的“小脚本-普通”中,编写以下代码。

image

接下来,返回主界面,在主类中声明一个DDD类型的全局变量,并进行初始化。

image

(二)生成列表项

因为是将一个布局文件作为CLV的一个列表项,所以我们需要通过生成B4XView且可设计其内控件的值。

这里面主要是用DDD的GetViewByName方法从布局文件中取到对应的控件,对控件进行赋值等操作。

image

(三)添加列表项

我们通过上面的生成列表项的方法生成项,然后使用CLV的Add方法即可完成添加。

image

(四)获取列表项内容

在CLV的点击事件(ItemClick)中,我们可以取到点击项的序号,进而取到对应序号的B4XView。到了这一步,我们要想取到其内部的信息,仍需要使用DDD的GetViewByName方法。

image

(五)效果演示

整体的效果如下:

image

点击时的效果:

image


六、 添加列表项-复杂列表

看了上面的示例,我们发现与ListView相比,CLV在使用起来更复杂了,但是相对应的,CLV的功能也更强大了,可以自由的去实现各种各样的效果。

下面我们再通过一个示例,讲解一下作为列表项的布局文件中,如何响应布局内控件的事件。

我们要实现的效果是:列表项是由复选框和按钮组成,勾选筛选框时文本样式会发生改变,点击按钮时会弹窗显示当前复选框的勾选状态。

下面我们来看一下如何去实现。

(一)布局文件

我们新建一个布局文件并添加一个CheckBox控件和一个Button控件,调整布局如下:

image

同时在小脚本中添加代码:

image

(二)生成事件

这里,我们可以直接通过“控件右键-生成-对应事件”的方式添加事件,也可以直接在代码文件中手动编写。

这里需要注意的有两点,一是右键生成时会将对应代码生成到当前打开的代码文件中,所以要注意对应打开的文件。另一个是当前布局是作为列表项而存在的,所以列表项中所有的同一控件都会触发同一个事件方法,所以我们只需要实现一次即可。

image

(三)生成列表项方法

同前文,我们编写一个生成列表项的方法。

image

(四)添加列表项

我们循环添加100个列表项。

image

(五)复选框事件实现

我们这里根据要求,需要实现复选框的CheckedChange事件。类似前文中获取列表项时的操作,我们取到对应的控件,调整其文本样式即可。

image

(六)按钮事件实现

同上,我们实现按钮的Click事件。

image

(五)效果演示

整体的效果如下:

image


七、结语

本篇讲解了xCustomListView控件,可以看到在日常使用时并不如ListView来的简单方便,但是在需要展示一些复杂的效果时,ListView就无能为力了,这种时候xCustomListView便是一个很好的选择。

感谢观看,欢迎大家一起学习,共同进步。


-【END】-

标签:控件,自定义,列表,添加,xCustomListView,CLV,ListView
From: https://www.cnblogs.com/lesliexin/p/17263029.html

相关文章

  • 界面控件DevExpress WinForms的数据网格组件——更轻松地管理业务数据(二)
    DevExpressWinForms控件的DataGrid组件是一个性能优异的编辑/数据整型组件,附带了数十个高影响力的功能,用户可以轻松地管理信息并根据业务需求来展示数据信息。在上文中(点......
  • 练习02_列表元组
    快速回顾前一次内容,我们学习了以下内容:创建并登陆了百度飞桨Paddle&PaddleBaiduAIStudio个人账号,该云计算代码测试与托管平台是免费的,24小时访问的。我们测试了“hell......
  • 【Avalonia】【跨平台】关于控件阴影简单用法
    背景当我们在用Avalonia开发项目时,我们可能会对控件添加一些阴影效果,改善用户体验,我们开发WPF的人知道,WPF会给我提供Effect这么一个属性,这是方便我们进行阴影以及特效使用......
  • 实验2 字符串和列表
    实验任务1编译源代码#task1.py#字符串的基础操作#课堂上没有演示的一些方法x='nbaFIFA'print(x.upper())#字符串转大写print(x.lower())#字符串转小写......
  • 实验二,字符串和列表
    试验任务1:在python开发环境下,新建一个.py源文件,输入并运行以下代码,体验这里用到的字符串的方法。task1.py实验源码:#字符串的基础操作#课堂上没有演示的一些方法x='n......
  • 实验2 字符串和列表
    实验任务1task1.py实验源码1x='nbaFIFA'2print(x.upper())3print(x.lower())4print(x.swapcase())5print()67x='abc'8print(x.center(10,......
  • 实验二——字符串,列表
    任务一程序:1x='nbaFIFA'2print(x.upper())3print(x.lower())4print(x.swapcase())#大小写翻转56x='abc'7print(x.center(10,'*'))8pri......
  • Spinner(列表选项框)的基本使用
    这一节是想给大家介绍一个Gallery(画廊)的一个控件,尽管我们可以不通过兼容使用Gallery,不过想想还是算了,因为Gallery在每次切换图片的时候,都需要重新创建视图,这样无疑会造成......
  • 实验二 字符串和列表
    task1源代码#字符串基本操作x='nbaFIFA'print(x.upper())#转大写print(x.lower())#转小写print(x.swapcase())#大小写翻转print()x='abc'print(......
  • Winform/Csharp中使用Linq的Where条件筛选、Select字段映射(左外连接并设置无匹配时默
    场景Java8新特性-Stream对集合进行操作的常用API:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126070657上面讲的是在Java中使用Stream中对集合的常用操......