11 发现界面快捷按钮功能的实现

不知到大家在软件开发过程中,一般首页都会把一些常用的功能放在首页快捷菜单里面,因为这样用户不去用一些我的+分类这些功能2层甚至3层菜单去点击寻找相应的功能,这样的交互行为能让让用户很快找到自己购物需求,这就是快捷菜单的目的!

那么话不多说,我们开始来详细描述发现界面快捷按钮功UI组件开发实现实现过程:

1 首先先看一下UI效果图--蓝色标注的部分

快捷菜单效果

2 首先先说快捷菜单数据处理实现过程

创建ButtonData的数据模型,定义1个数组dataNun存储发现button的本地数据

在发现DiscoveryController里面loadData里面添加ButtonData数据

dataNum添加ButtonData数据模型

3 接下来说一下快捷菜单的UI实现过程

3.1 添加1个label静态数据做测试

 定义DiscoveryButtonCell继承BaseTableViewCell,并重写initViews方法,并添加1个label静态数据做测试

添加1个label静态数据做测试
UI效果做测试

在发现vc里面注册DiscoveryButtonCell

在发现vc里面封装1个typeForItemData获取cell的类型

在vc里面cellForRow回调函数调用typeForItemData获取相应的cell类型,见了case语句返回相应类型的cell

4 封装iButtonView的UI组件

DiscoveryButtonCell页面里面添加横向滚动的scrollview+ contentContainer(放button的容器)

创建View文件夹里面创建DiscoveryButtonView用来实现横向列表UI的布局(图片+文字上下布局)

 DiscoveryButtonCell里面创建bind方法实现DiscoveryButtonView的UI和ButtonData数据的双向绑定

回到发现DiscoveryController里面cellForRowAt的回调函数,调用DiscoveryButtonCell的bind函数实现双向绑定

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容