IOS控件系列--优雅的表情键盘设计（扩展性好）

本控件效果如下图所示：


本控件设计的几个原则 ：

1.扩展性好，代码不冗余。

2.逻辑清晰。

3.回调接口清晰。

4.移植性好。

首先来讨论下本控件的扩展性：

效果图给出的是3行7列。如果这个行列因子可控，起码可以应付策划哪一天突发奇想想重新设计这个表情键盘的行列，如果写死在代码中，就不太方便了。

因此这个因子可以抛出来。

抛出的代码如下：

@property(nonatomic,assign) NSInteger rowCount;     //行数@property(nonatomic,assign) NSInteger colCount;     //列数@property(nonatomic,assign) NSInteger pageCount;    //页数

对应的逻辑为：

把表情键盘中的元素看作是一个硬盘的带分布索引的二维数组即可，元素地列表中位置计算代码如下：


-(void) buildElements:(NSMutableArray*) elements{if([elements count] == 0) return;NSInteger rowMargin = (self.frame.size.width - self.colCount * 30) / (self.colCount + 1);  //行间距NSInteger colMargin = (self.frame.size.height - self.rowCount * 30) / (self.rowCount + 1); //列间距//计算每一个表情的位置for(int k = 0; k < self.pageCount; k ++){for(int i = 0; i < self.rowCount; i ++){for(int j = 0; j < self.colCount; j ++){UIImageView* emojiView = [[UIImageView alloc] initWithFrame:CGRectMake(rowMargin + (k * self.frame.size.width) + j * (30 + rowMargin),colMargin + i * (30 + colMargin), 30, 30)];NSInteger idx = self.rowCount * self.colCount * k + i * self.colCount + j;if(idx >= [elements count]){idx = [elements count] - 1;break;}emojiView.contentMode = UIViewContentModeScaleAspectFit;emojiView.image = [UIImage imageNamed:elements[idx]];emojiView.tag = idx;emojiView.userInteractionEnabled = true;[emojiView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)]];[self addSubview:emojiView];}}}}

为了均分滚动列表的size,上面的代码中将间距给计算了，注意计算方式。


3.为了能够滚动，可以扩展下UIScrollView，然后监听ScrollView的contentSize 来更新表情键盘的页数。这里使用了kvo来进行监听，页数的计算式如下：

//-------------------kvo 实现观察主题 ----------------
//对于滑动翻页使用kvo监听机制
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];CGPoint oldOffset = [change[NSKeyValueChangeOldKey] CGPointValue];CGFloat oldOffsetX = oldOffset.x;CGFloat deltaOfOffsetX = offset.x - oldOffsetX;NSInteger nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;[self updatePointWithIdx:nCurIndex];}-(void)dealloc{[self.emojiPanel removeObserver:self forKeyPath:@"contentOffset" context:nil];
}
//-------------------kvo 实现观察主题 end----------------

4.有些策划比较细致，注意用户体验。给每一页的最后一个表情设定为“删除”


其实这个计算在加载表情资源的时候做一个小处理就行，处理的计算逻辑为：

if(保存的表情的列表当前长度+1 % （行*列）==0 || 保存的表情的列表当前长度 -1)  {

这个列表就保存上面那个删除表情。

}


计算代码如下：


NSMutableArray* emojiList = [NSMutableArray array];NSInteger total = 54;for(int i = 0;i < total; i ++){if( i < 10){[emojiList addObject:[NSString stringWithFormat:@"f00%d",i]];}if(i >= 10 && i < 100){if( ([emojiList count] + 1) % 21 == 0 || i == total - 1){[emojiList addObject:@"f_del.png"];}else{[emojiList addObject:[NSString stringWithFormat:@"f0%d",i]];}}}int pageCount = ceilf([emojiList count] / 21.0);self.emojiPanel = [[ScrollView alloc] initWithFrame:CGRectMake(0, 50, SCREEN_WIDTH, 210)];self.emojiPanel.backgroundColor = [UIColor greenColor];self.emojiPanel.rowCount = 3;self.emojiPanel.colCount = 7;self.emojiPanel.pageCount = pageCount;self.emojiPanel.pagingEnabled = true;self.emojiPanel.contentSize = CGSizeMake(self.emojiPanel.frame.size.width * pageCount, 210);[self.emojiPanel buildElements:emojiList];//使用kvo监听ScrollView滑动监听事件[self.emojiPanel addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];self.emojiPanel.emojiClick = ^(NSInteger idx){NSLog(@"271------------:%ld",idx);};[self.view addSubview:self.emojiPanel];


5.下面的索引点就非常简单了，直接监听滚动列表的滑动事件即可达到。


6.回调的接口较简单，具体见代码，在此不作分析。



下面奉送全部代码：

.h文件：

#import <UIKit/UIKit.h>//为表情添加一个回调
typedef void (^EmojiOnClickListener) (NSInteger);/**滑动面板，主要实现，数据分布显示*/
@interface ScrollView : UIScrollView@property(nonatomic,assign) NSInteger rowCount;     //行数@property(nonatomic,assign) NSInteger colCount;     //列数@property(nonatomic,assign) NSInteger pageCount;    //页数@property(nonatomic,strong) NSMutableArray* dataList;-(void) buildElements:(NSMutableArray*) elements;/**普通样式的block 表情点击回调*/
@property (nonatomic, copy) void (^onClickBlock)(NSInteger idx);//对于typedef定义的block其实是一个匿名函数，此处声明一个全局变量保持这个函数引用
@property(nonatomic,copy) EmojiOnClickListener emojiClick;@end



。m文件：

#import "ScrollView.h"@implementation ScrollView-(instancetype) initWithFrame:(CGRect)frame{if(self = [super initWithFrame:frame]){}return self;}-(void) buildElements:(NSMutableArray*) elements{if([elements count] == 0) return;NSInteger rowMargin = (self.frame.size.width - self.colCount * 30) / (self.colCount + 1);  //行间距NSInteger colMargin = (self.frame.size.height - self.rowCount * 30) / (self.rowCount + 1); //列间距//计算每一个表情的位置for(int k = 0; k < self.pageCount; k ++){for(int i = 0; i < self.rowCount; i ++){for(int j = 0; j < self.colCount; j ++){UIImageView* emojiView = [[UIImageView alloc] initWithFrame:CGRectMake(rowMargin + (k * self.frame.size.width) + j * (30 + rowMargin),colMargin + i * (30 + colMargin), 30, 30)];NSInteger idx = self.rowCount * self.colCount * k + i * self.colCount + j;if(idx >= [elements count]){idx = [elements count] - 1;break;}emojiView.contentMode = UIViewContentModeScaleAspectFit;emojiView.image = [UIImage imageNamed:elements[idx]];emojiView.tag = idx;emojiView.userInteractionEnabled = true;[emojiView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)]];[self addSubview:emojiView];}}}}-(void) handleGesture:(UITapGestureRecognizer*) gestureRecognizer{UIView* viewClicked=[gestureRecognizer view];NSLog(@"66---------------:%ld",(long)viewClicked.tag);if(self.emojiClick){self.emojiClick(viewClicked.tag);}}@end



在vc中的测试代码如下：

//测试表情键盘
-(void) testEmojiPanel{NSMutableArray* emojiList = [NSMutableArray array];NSInteger total = 54;for(int i = 0;i < total; i ++){if( i < 10){[emojiList addObject:[NSString stringWithFormat:@"f00%d",i]];}if(i >= 10 && i < 100){if( ([emojiList count] + 1) % 21 == 0 || i == total - 1){[emojiList addObject:@"f_del.png"];}else{[emojiList addObject:[NSString stringWithFormat:@"f0%d",i]];}}}int pageCount = ceilf([emojiList count] / 21.0);self.emojiPanel = [[ScrollView alloc] initWithFrame:CGRectMake(0, 50, SCREEN_WIDTH, 210)];self.emojiPanel.backgroundColor = [UIColor greenColor];self.emojiPanel.rowCount = 3;self.emojiPanel.colCount = 7;self.emojiPanel.pageCount = pageCount;self.emojiPanel.pagingEnabled = true;self.emojiPanel.contentSize = CGSizeMake(self.emojiPanel.frame.size.width * pageCount, 210);[self.emojiPanel buildElements:emojiList];//使用kvo监听ScrollView滑动监听事件[self.emojiPanel addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];self.emojiPanel.emojiClick = ^(NSInteger idx){NSLog(@"271------------:%ld",idx);};[self.view addSubview:self.emojiPanel];//构建索引点[self buildPagePoint];}//private --method 构建索引点
-(void) buildPagePoint{if(self.emojiPanel.pageCount == 0) return;NSInteger pointTotalWidth = 100;     //假设索引点占用宽度NSInteger pointWidth = 10;NSInteger startOffsetX = (self.emojiPanel.frame.size.width - pointTotalWidth) / 2;  //起始偏移量NSInteger offsetX = (pointTotalWidth - self.emojiPanel.pageCount * pointWidth) / (self.emojiPanel.pageCount + 1);  //偏移量for(int i = 0; i < self.emojiPanel.pageCount; i ++){UIImageView* pointIndexView = [[UIImageView alloc] initWithFrame:CGRectMake(startOffsetX + offsetX + i *(pointWidth + offsetX),270,pointWidth,pointWidth)];if(i == 0){pointIndexView.backgroundColor = [UIColor redColor];}else{pointIndexView.backgroundColor = [UIColor grayColor];}pointIndexView.tag = 100 + i;pointIndexView.layer.masksToBounds = true;pointIndexView.layer.cornerRadius = pointWidth / 2;[self.view addSubview:pointIndexView];}}//这个地方俺是故意这样写滴，，^_^
-(void)updatePointWithIdx:(NSInteger) idx{for(int i = 0 ; i < self.emojiPanel.pageCount; i ++){if( i == idx ){[self.view viewWithTag:(100 + i)].backgroundColor = [UIColor redColor];}else{[self.view viewWithTag:(100 + i)].backgroundColor = [UIColor grayColor];}}}//-------------------kvo 实现观察主题 ----------------
//对于滑动翻页使用kvo监听机制
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];CGPoint oldOffset = [change[NSKeyValueChangeOldKey] CGPointValue];CGFloat oldOffsetX = oldOffset.x;CGFloat deltaOfOffsetX = offset.x - oldOffsetX;NSInteger nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;[self updatePointWithIdx:nCurIndex];}-(void)dealloc{[self.emojiPanel removeObserver:self forKeyPath:@"contentOffset" context:nil];
}
//-------------------kvo 实现观察主题 end----------------





本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/1383035.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

坤音键盘（ikun专用）

坤音键盘（ikun专用）

坤音键位说明 &#xff08;下图第一个字母对应的是26键的键位&#xff0c;想听哪个按哪个。后面的数字代表时长&#xff0c;单位&#xff1a;秒&#xff09; 在右下角托盘里面可以右键关闭 ps&#xff1a;执行后桌面会出现一个ikun精灵&#xff0c;只要找一个能输入内容的地方…
阅读更多...
Android自定义软键盘的实现

Android自定义软键盘的实现

先看界面布局文件 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"fill_parent"android:layout_height"fill_parent"a…
阅读更多...
Android自定义键盘（KeyboardView）

Android自定义键盘（KeyboardView）

目录 1.场景&#xff1a;2.想法&#xff1a;3.开始实现&#xff1a;《一》 在res包下创建xml目录,Keyboard标签来定义键盘布局&#xff1a;《二》创建IKeyboardView类并继承KeyboardView类,设置键盘布局&#xff08;数字和字母&#xff09;《三》 处理自定义键盘按键的点击事件…
阅读更多...
关于技术转管理角色的认知

关于技术转管理角色的认知

软件质量保障&#xff1a;所寫即所思&#xff5c;一个阿里质量人对测试的所感所悟。 程序员发展的岔路口 技术人做了几年专业工作之后&#xff0c;会来到一个重要的“分岔路口”&#xff0c;一边是专业的技术路线&#xff0c;一边是技术团队的管理路线。不少人就开始犯难&…
阅读更多...
什么是响应式设计？列举几种实现响应式设计的方法。

什么是响应式设计？列举几种实现响应式设计的方法。

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是响应式设计&#xff1f;⭐ 实现响应式设计的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏…
阅读更多...
【雕爷学编程】Arduino动手做（12）---霍尔模块之单极性霍尔开关器件AH3144E与线性霍尔传感器AH49E

【雕爷学编程】Arduino动手做（12）---霍尔模块之单极性霍尔开关器件AH3144E与线性霍尔传感器AH49E

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…
阅读更多...
超级简单方法解决秒杀超卖和重复购买问题

超级简单方法解决秒杀超卖和重复购买问题

一、基本原则 1、SQL加库存数量判断&#xff1a;防止库存变成负数 2.、数据库加唯一索引&#xff1a;防止用户重复购买 二、举例说明 1、开启事务 2、商品表减库存&#xff0c;库存数量要大于0 update miaosha_goods set stock_count stock_count - 1 where goods.id …
阅读更多...
金雅拓超级狗superdog

金雅拓超级狗superdog

超级狗是SafeNet在圣天诺基础上为中国本土量身定制的新一代加密狗。 超级狗操作简单&#xff0c;非常安全&#xff0c;功能实用&#xff0c;助您轻松完成高强度加密。 PDF和flv, swf, mpg, dat, avi, wav, mp3等加密&#xff09; 4、文档加密&#xff0c;ppt,word,excel,pdf&am…
阅读更多...
赛孚耐SafeNet开发狗超级狗开发入门

赛孚耐SafeNet开发狗超级狗开发入门

本文主要讲解如果使用C#语言来对超级狗进行二次开发&#xff0c;如果仅仅是做个激活的功能&#xff0c;可以参照另一篇博客&#xff0c;地址&#xff1a;http://www.cnblogs.com/dathlin/p/8487842.html 如果疑问&#xff0c;可以加QQ群&#xff1a;592132877 继续主题研究&am…
阅读更多...
在Elasticsearch中回测超级趋势线(Supertrend)交叉交易策略

在Elasticsearch中回测超级趋势线(Supertrend)交叉交易策略

我们已经讨论了好几个单一指标交易策略&#xff0c;其中简单的相对强弱指数&#xff08;RSI&#xff09;交易策略取得的利润最高。 在本文中&#xff0c;我们将使用 Elasticsearch 实现超级趋势线&#xff08;Supertrend&#xff09;交叉交易策略&#xff0c;并比较其性能是否优…
阅读更多...
cmake基础(1)——简单项目

cmake基础(1)——简单项目

本节将围绕着hello world展开介绍如何创建一个简单的项目。 一、最小项目 1.准备工作 首先&#xff0c;新建一个目录01用来存放当前项目&#xff0c;并在目录下创建main.cpp和CMakeLists.txt文件&#xff0c;两者文件内容如下&#xff1a; #include <iostream> using…
阅读更多...
Go把Map转成对象

Go把Map转成对象

最近使用了Redis的Hash&#xff0c;把一个对象给存储到了hash里面&#xff0c;具体如下&#xff1a; 现在需要从RedisHash缓存里面把结果给取出来&#xff0c;同时赋值到一个对象上面 result, err : global.GVA_REDIS.HGetAll(context.Background(), key).Result() 问题是resul…
阅读更多...
优秀的LCD显示效果

优秀的LCD显示效果

优秀的LCD显示效果 效果图&#xff1a; 程序和源代码链接&#xff1a;http://download.csdn.net/download/zhangxiaoyu_sy/10012770
阅读更多...
屏幕显示技术

屏幕显示技术

本文主要介绍多种屏幕显示技术&#xff0c;主要是三大类&#xff0c;LCD&#xff0c;LED&#xff0c;OLED。 一、LCD LCD&#xff08;Liquid Crystal Display&#xff09;中文是液晶显示器。 LCD 的显示技术有很多&#xff0c;常见的有TFT&#xff0c;IPS&#xff0c;SLCD等…
阅读更多...
物联网开发平台大 PK，谁是最佳 Pick？

物联网开发平台大 PK，谁是最佳 Pick？

通过这篇文章了解现下流行的几款物联网软件平台的各种功能。 作者 | Miyuru Dayarathna 译者 | 弯月&#xff0c;责编 | 郭芮 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 以下为译文&#xff1a; 本文以我们对各大物联网供应商的详细分析为基础&#xff0…
阅读更多...
uni-app 2.2 发布，大幅度优化 H5 端性能体验 | 技术头条

uni-app 2.2 发布，大幅度优化 H5 端性能体验 | 技术头条

作者 | uni-app团队 责编 | 伍杏玲 uni-app 自发布以来&#xff0c;已经服务了几十万开发者。但让我们意外&#xff0c;有大量开发者用uni-app只编写H5版&#xff0c;并没有多端发布。 这其实也符合uni-app的初衷&#xff0c;uni-app的定位并不是需要多端发布时才用uni-app。…
阅读更多...
第九代小冰惊喜登场，多端融合且琴棋书画样样精通

第九代小冰惊喜登场，多端融合且琴棋书画样样精通

谈及智能助手&#xff0c;相信大家都不会漏过小冰这款具有划时代意义的产品。从最初的微软小冰到现在的第九代小冰&#xff0c;AI的技术在不断的演进&#xff0c;而小冰也从最初的贴心助手变成了如今琴棋书画样样精通的人工智能前沿技术载体。 北京时间2021年9月22日&#xff…
阅读更多...
渡鸦音箱独家测评: 代表百度AI技术尊严的DuerOS, 用户体验真的能过关吗？

渡鸦音箱独家测评: 代表百度AI技术尊严的DuerOS, 用户体验真的能过关吗？

撰文 | 宇多田 在今年三个多小时的世界大会主论坛上&#xff0c;百度把一半时间都留给了渡鸦音箱。 这个造型极其吸睛的四色正方体&#xff0c;暂时代替了无人车&#xff0c;成为李彦宏唯一揣到兜里带到乌镇互联网大会的「百度技术代表作」。 与其他重量级 AI 硬件厂商相比&am…
阅读更多...
机器视觉 使用halcon的学习之路

机器视觉 使用halcon的学习之路

2022.9.23 公司安排说学习机器视觉。 当天下午下载安装了halcon软件。看里面的示例程序。 除了纯英文外&#xff0c;很详细的。点中算子函数&#xff0c;按F1会有详细介绍。按F5执行。按F7单步执行。我随便看看啊&#xff0c;就一直按F5 , 看效果。看不出什么名堂。 2022.9.2…
阅读更多...
C#开发工控上位机编程 csdn_机器视觉软件开发新人入门必看 --机器视觉软件开发学习路径...

C#开发工控上位机编程 csdn_机器视觉软件开发新人入门必看 --机器视觉软件开发学习路径...

机器视觉是机械、运动、控制、光学、软件、算法于一体的交叉学科，对于学工科的人来说，机械、运动、控制都有一定的了解，对于软件、算法、光学不是很了解。一台设备，有一个到二个机械设计师或者结构工程师，那么这个角色就胜任了机械部分，有一个电气工程师，那么就胜任了控…
阅读更多...
最新文章

Copyright @ 2022~2023