【第22期】观点:IT 行业加班,到底有没有价值?

iOS 自定义键盘+表情布局实现

原创 2016年08月31日 08:49:20

本节主要内容:

1.自定义键盘--将工具栏添加到键盘上,并实现切换
2.实现进入到系统相册选取图片
3.实现表情布局
4.实现系统键盘和表情视图之间的切换
5.表情消息的追加

一、*自定义键盘

创建子视图,为系统键盘添加工具栏。例子中创建了textView和一个带有5个button的编辑工具栏

#pragma mark - 创建子视图
- (void)creactSubView{

    //1 添加_textView
    _textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight-50)];
    _textView.backgroundColor = [UIColor clearColor];
    _textView.font = [UIFont systemFontOfSize:15.0];
    [_textView becomeFirstResponder];
    [self.view addSubview:_textView];

    //2 编辑栏
    _editorView = [[UIView alloc] initWithFrame:CGRectMake(0, _textView.bottom, kScreenWidth, 50)];
    _editorView.backgroundColor = [UIColor clearColor];
    //***将_editorView添加到系统键盘上,利用下面的inputAccessoryView方法
    _textView.inputAccessoryView = _editorView;
    //添加5个按钮
    NSArray *imgArr = @[
                        @"compose_toolbar_1.png",
                        @"compose_toolbar_3.png",
                        @"compose_toolbar_4.png",
                        @"compose_toolbar_5.png",
                        @"compose_toolbar_6.png"
                        ];
    CGFloat btnWidth = kScreenWidth/5;

    for (int i = 0; i<imgArr.count; i++) {
        ThemeButton *button = [[ThemeButton alloc] initWithFrame:CGRectMake(btnWidth*i, 5, btnWidth, 40)];

        button.imageName = imgArr[i];

        [button addTarget:self action:@selector(pressAction:) forControlEvents:UIControlEventTouchUpInside];
        button.tag = 1000+i;

        [_editorView addSubview:button];
    }
}

二、*进入系统相册选取图片

按钮1的响应事件—实现进入系统相册选取图片(单张)

switch (button.tag - 1000) {
        case 0:
            NSLog(@"点击第一个按钮");
        {
            //由底部弹出的弹窗
            UIAlertController *alter = [UIAlertController alertControllerWithTitle:@"选取图片" message:nil preferredStyle:UIAlertControllerStyleActionSheet];

            UIAlertAction *action = [UIAlertAction actionWithTitle:@"相册" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

                //选取相册
                UIImagePickerController *picker = [[UIImagePickerController alloc] init];

                picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
                picker.delegate = self;
                //模态视图 弹出相册
                [self presentViewController:picker animated:YES completion:nil];
            }];

            [alter addAction:action];

            [self presentViewController:alter animated:YES completion:nil];

        }
            break;

三、*表情布局

要实现的效果:

所有表情分成几页,每页按照4行7列进行排列,点击任意表情会出现该表情的放大镜,放大镜上有该表情和文字。能够实现页面的滑动。

思路:

1.数据处理

从plist文件中取出所有文件,将其存放进一个大的数组中,将这个大数组分割成28个数据一组的小数组,小数组的数量将会对应页面的数量。而在每个小数组里面,这28个数据将会按照4行7列进行排列。

2.页面处理

由外至内视图分别是:UIView->UIScrolleView->UIView->UIImageView(表情视图和选中视图)

代码:

FaceView

.h文件

#import <UIKit/UIKit.h>
#import "UIViewExt.h"

@interface FaceView : UIView
@property (nonatomic, strong) NSMutableArray *items;//表情大数组
@property (nonatomic, strong) UIImageView *selectImgView;//选中的放大镜视图
@property (nonatomic, assign) NSString *selectImgName;//选中的表情名字
@property (nonatomic, strong) UILabel *label;
@end

.m文件

#import "FaceView.h"
#import "Header.h"

#define imgSize 30
@implementation FaceView

- (instancetype) initWithFrame:(CGRect)frame {

    if ([super initWithFrame:frame]) {

        [self loadPlist];
        _label = [[UILabel alloc] initWithFrame:CGRectMake(17, 40, 50, 20)];
        _label.font = [UIFont systemFontOfSize:12.0];
    }
    return self;
}

//整理表情
- (void) loadPlist {

    //获取plist文件
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"emoticons.plist" ofType:nil];
    //所有表情数组
    NSArray *array = [NSArray arrayWithContentsOfFile:filePath];
    //大数组
   _items = [NSMutableArray array];
    //小数组
    NSMutableArray *items2D = nil;
    for (int i = 0; i < array.count; i++) {

        //创建小数组
        if (items2D == nil || items2D.count == 28) {
            items2D = [NSMutableArray array];
            [_items addObject:items2D];
        }

        NSDictionary *faceDic = [array objectAtIndex:i];
        [items2D addObject:faceDic];
    }
    //内部写死宽高
    self.width = kScreenWidth * _items.count;
    self.height = 4 * itemSize;
}

//绘制
- (void)drawRect:(CGRect)rect {
    //确定行和列
    CGFloat row = 0;
    CGFloat culom = 0;
    //拿表情
    for (int i = 0; i < _items.count; i++) {

        NSMutableArray *item2D = _items[i];

        for (int j = 0; j < item2D.count; j++) {

            NSDictionary *dic = item2D[j];
            //图片名字
            NSString *imageName = [dic objectForKey:@"png"];
            UIImage *img = [UIImage imageNamed:imageName];

            CGFloat x = culom * itemSize + (itemSize-imgSize)/2 + kScreenWidth * i;
            CGFloat y = row * itemSize + (itemSize - imgSize)/2;
            //绘制
            [img drawInRect:CGRectMake(x, y, imgSize, imgSize)];

            //更新行和列
            culom++;
            if (culom == 7) {
                culom = 0;
                row++;
            }
            if (row == 4) {
                row = 0;
            }   
        }
    }
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //放大镜不隐藏
    _selectImgView.hidden = NO;

    //禁止滑动
    if ([self.superview isKindOfClass:[UIScrollView class]]) {
        UIScrollView *scrollV = (UIScrollView *) self.superview;
        scrollV.scrollEnabled = NO;
    }

    //拿到触摸的坐标
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];

    [self touchFace:point];


}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];

    [self touchFace:point];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //隐藏放大镜
    _selectImgView.hidden = YES;

    //开启滑动
    if ([self.superview isKindOfClass:[UIScrollView class]]) {
        UIScrollView *scrollV = (UIScrollView *)self.superview;
        scrollV.scrollEnabled = YES;
    }

    //回调block

}

//寻找点击的表情
- (void) touchFace:(CGPoint) point {
    //1.当前页
    NSInteger page = point.x/kScreenWidth;
    //容错处理
    if (page>=_items.count || page < 0) {
        return;
    }
    //确定小数组的索引
    /**根据这个计算
     CGFloat x = culom *itemSize + (itemSize-imgSize)/2 + kScreenWidth*i;
     CGFloat y = row *itemSize +(itemSize-imgSize)/2;
     */
    NSInteger culom = (point.x - ((itemSize-imgSize)/2 + kScreenWidth*page))/itemSize;//列
    NSInteger row = (point.y - (itemSize-imgSize)/2)/itemSize;//行
    //容错处理
    if (culom >6) culom =6;
    if (culom <0) culom =0;
    if (row >3) row =3;
    if (row <0) row =0;

    //根据当前页面坐标计算行和咧
    NSInteger index = row*7+culom;
    //处理最后一页数组越界
    if (page == _items.count-1) {
        //通过页面获取小数组
        NSArray *item2D = _items[page];

        if (index>item2D.count-1) {
            return;
        }
    }
    NSArray *item2D = _items[page];
    NSDictionary *faceDic = item2D[index];
    //表情图片名
    NSString *imgName = faceDic[@"png"];
    //表情中文名
    NSString *faceName = faceDic[@"chs"];


    if (![self.selectImgName isEqualToString:faceName]) {
        //确定放大镜的位置
        CGFloat bottom = row *itemSize +itemSize/2;
        CGFloat x = culom *itemSize + itemSize/2 + page *kScreenWidth;
        self.selectImgView.center = CGPointMake(x, 0);
        self.selectImgView.bottom = bottom;

        //赋值-选中的表情图片显示
        UIImageView *imgView =[self.selectImgView viewWithTag:1100];
        imgView.image = [UIImage imageNamed:imgName];

        self.selectImgName = faceName;
         [_selectImgView addSubview:_label];

        //选中的表情名
        _label.text = _selectImgName;

    }

    //发送通知--参数:选中的图片名faceName
    NSDictionary *userInfo = @{@"imageName" : faceName};
    [[NSNotificationCenter defaultCenter] postNotificationName:@"imageNameNo"
                                                        object:nil
                                                      userInfo:userInfo];
}

//选中视图
- (UIImageView *) selectImgView {

    if (_selectImgView == nil) {
        //创建选中视图
        _selectImgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"emoticon_keyboard_magnifier.png"]];
        [_selectImgView sizeToFit];
        [self addSubview:_selectImgView];
        //选中视图中的表情
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake((_selectImgView.width-imgSize)/2, 15, imgSize, imgSize)];
        imgView.tag = 1100;
        [_selectImgView addSubview:imgView];
    }
    return _selectImgView;
}

@end

FaceFnel

.h文件

#import <UIKit/UIKit.h>
#import "FaceView.h"

@interface FaceFnel : UIView <UIScrollViewDelegate>

@end

.m文件

#import "FaceFnel.h"
#import "Header.h"

@implementation FaceFnel
/**
 faceView---表情视图
 scroll----滑动视图
 page---分页控件
 */
- (instancetype) initWithFrame:(CGRect)frame {

    if ([super initWithFrame:frame]) {

        [self createSubView];
    }
    return  self;
}

- (void) createSubView {

    //创建faceView
    FaceView *faceView = [[FaceView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
    faceView.backgroundColor = [UIColor clearColor];

    //创建scrollView
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, faceView.height)];
    scrollView.contentSize = CGSizeMake(faceView.width, faceView.height);
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    //裁剪
    scrollView.clipsToBounds = NO;
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    [scrollView addSubview:faceView];
    [self addSubview:scrollView];

    //创建分页控件
    UIPageControl *pageC = [[UIPageControl alloc] initWithFrame:CGRectMake(0, faceView.bottom, kScreenWidth, 20)];
    pageC.numberOfPages = faceView.items.count;
    pageC.tag = 2017;

    //当前视图的宽高计算
    self.width = kScreenWidth;
    self.height = faceView.height + pageC.height;

    [self addSubview:pageC];
}

#pragma mark -滑动视图代理方法
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {

    //计算index--index代表圆点的下标
    NSInteger index = scrollView.contentOffset.x/kScreenWidth;

    UIPageControl *pageC = (UIPageControl *) [self viewWithTag:2017];

    pageC.currentPage = index;
}

- (void) drawRect:(CGRect)rect {

    UIImage *img = [UIImage imageNamed:@"emoticon_keyboard_background.png"];
    [img drawInRect:rect];
}

@end
#pragma mark - 图片的代理方法
- (void)imagePickerController:(UIImagePickerController *) picker didFinishPickingMediaWithInfo:(nonnull NSDictionary<NSString *,id> *)info {

    [picker dismissViewControllerAnimated:YES completion:nil];
    [_textView becomeFirstResponder];

    UIImage *img = info[@"UIImagePickerControllerOriginalImage"];

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -30, 30, 30)];
    imageView.image = img;
    _sendImg = img;
    [_editorView addSubview:imageView];
}

四、系统键盘与表情视图之间相互切换

case 4:
        {
//            [self loadImage];
            //按钮取反
            button.selected = !button.selected;

            if (button.selected == YES) {
               //收起键盘
                [_textView resignFirstResponder];
                //显示表情视图
                _textView.inputView = _faceview;
                //弹出键盘
                [_textView becomeFirstResponder];
            } else {

                [_textView resignFirstResponder];
                //显示系统键盘
                _textView.inputView = nil;
                [_textView becomeFirstResponder];
            }
        }
            break;

五、消息追加

这里的思路是将图片的中文名作为参数,利用通知传过来,将其复制给_textView.text上。
//发送通知
 NSDictionary *userInfo = @{@"imageName" : faceName};
    [[NSNotificationCenter defaultCenter] postNotificationName:@"imageNameNo" object:nil userInfo:userInfo];
//接收通知
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(ImgaeNameChange:) name:@"imageNameNo" object:nil];
#pragma mark - 通知的实现
- (void) ImgaeNameChange:(NSNotification *) noti {

    NSString *text = [noti.userInfo objectForKey:@"imageName"];
    //追加
    _textView.text = [_textView.text stringByAppendingString:text];
}
//移除通知
- (void) dealloc {

    [[NSNotificationCenter defaultCenter] removeObserver:self name:@"imageNameNo" object:nil];
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

iOS自定义的emoji表情键盘

摘要 iOS中对系统键盘添加自定的表情键盘 iOS 表情键盘 自定义键盘 自定义表情键盘 切换键盘 目录[-] iOS自定义的表情键盘 一、关于emoji表情 二、开发表情键盘的思路 三、切...

iOS开发之自定义表情键盘(组件封装与自动布局)

下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用。有的小伙伴可能会问写一个自...

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

超全!整理常用的iOS第三方资源

  <span style="font-family: 'Micros

ios开发——自定义的表情键盘(组件封装与自动布局)

下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用。有的小伙伴可能会问写一个自...

超全!整理常用的iOS第三方资源

<span style="margin: 0px; padding: 0px; bo

iOS自定义的表情键盘

iOS自定义的表情键盘 一、关于emoji表情         随着iOS系统版本的升级,对原生emoji表情的支持也越来越丰富。emoji表情是unicode码中为表情符号设计的一组编码,当...

android 很多牛叉界面库github地址

点击可到达github-------https://github.com/Trinea/android-open-project 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style、其他 Android开源项目第二篇——工具库篇 包括依赖注入、图片缓存、网络相关、数据库ORM工具包、An

iOS 使用纯代码自定义UITableViewCell实现一个简单的微博界面布局

一、实现效果 二、使用纯代码自定义一个UITableViewCell的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseI...

iOS使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

一、实现效果 [img]http://dl2.iteye.com/upload/attachment/0105/7281/e06cb037-c1bd-36bc-8763-23806e4c005b.png[/img] 二、使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame, 子控件要添加到contentView中) 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固
  • iaiai
  • iaiai
  • 2015-01-31 14:20
  • 4183
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)