imitate wechat - 1

从聊天界面入手，而聊天界面先从键盘的实现上入手，键盘的实现分为界面UI的实现和在视图控制器上如何调用

必须掌握的知识点有：委托协议delegate

首先定义协议，这个协议代表着在聊天界面视图控制器点击输入框触发的事件的页面传值：

#import <UIKit/UIKit.h>

@class KeyBordView;

@protocol KeyBordVIewDelegate <NSObject>

- (void)beginRecord;
- (void)finishRecord;
- (void)KeyBordView:(KeyBordView* )keyBoardView textFiledBegin:(UITextField *)textFiled;
- (void)KeyBordView:(KeyBordView* )keyBoardView textFiledReturn:(UITextField *)textFiled;

@end

键盘的UI实现（用Masonry实现），但是语音，添加表情，图片等功能还未实现

.h

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

@interface KeyBordView : UIView

@property (nonatomic, assign) id <KeyBordVIewDelegate> delegate;

@end

.m

#import "Masonry.h"
#import "QQChating.h"
#import "KeyBordView.h"
#import "UIImage+StrethImage.h"

@interface KeyBordView () <UITextFieldDelegate>

@property (nonatomic, strong) UIButton* voiceButton;
@property (nonatomic, strong) UIButton* imageButton;
@property (nonatomic, strong) UIButton* addButton;
@property (nonatomic, strong) UIButton* speakButton;
@property (nonatomic, strong) UITextField* textFiled;
@property (nonatomic, strong) UIImageView* backImageView;

@end

@implementation KeyBordView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    
    if (self)
    {
        [self setBackgroundColor:[UIColor blackColor]];
        [self initialData];
    }
    
    return self;
}


#pragma mark - 初始化通UIButton

- (UIButton*)buttonWithNormal:(NSString* )normal hightLight:(NSString* )hightLight
                       action:(SEL)action
{
    UIButton* btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:hightLight] forState:UIControlStateHighlighted];
    [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    
    return btn;
}


#pragma mark - 初始化数据

- (void)initialData
{

    UIView* superview = self;
    
    self.backImageView = [UIImageView new];
    [self.backImageView setBackgroundColor:[UIColor blackColor]];
    [superview addSubview:self.backImageView];
    
    self.voiceButton = [self buttonWithNormal:@"chat_bottom_voice_nor.png"
                                   hightLight:@"chat_bottom_voice_press.png"
                                       action:@selector(voiceBtnPress:)];
    [superview addSubview:self.voiceButton];
    
    
    self.textFiled = [UITextField new];
    self.textFiled.returnKeyType = UIReturnKeySend;
    self.textFiled.font = [UIFont fontWithName:@"HelveticaNeue" size:14];
    self.textFiled.placeholder = @"请输入";
    self.textFiled.background = [UIImage imageNamed:@"chat_bottom_textfield.png"];
    self.textFiled.delegate = self;
    [superview addSubview:self.textFiled];
    
    
    self.imageButton = [self buttonWithNormal:@"chat_bottom_smile_nor.png"
                                   hightLight:@"chat_bottom_smile_press.png"
                                       action:@selector(imageBtnPress:)];
    [self addSubview:self.imageButton];
    
    
    self.addButton = [self buttonWithNormal:@"chat_bottom_up_nor.png"
                                 hightLight:@"chat_bottom_up_press.png"
                                     action:@selector(addBtnPress:)];
    [self addSubview:self.addButton];
    
    
    self.speakButton = [self buttonWithNormal:nil hightLight:nil action:@selector(speakBtnPress:)];
    [self.speakButton setTitle:@"按住说话" forState:UIControlStateNormal];
    [self.speakButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [self.speakButton addTarget:self action:@selector(touchDown:)
               forControlEvents:UIControlEventTouchDown];
    [self.speakButton setTitleColor:[UIColor redColor]
                           forState:(UIControlState)UIControlEventTouchDown];
    [self.speakButton setBackgroundColor:[UIColor whiteColor]];
    self.speakButton.hidden = YES;
    [self addSubview:self.speakButton];
    
    
    [self.backImageView mas_makeConstraints:^(MASConstraintMaker* make){
        
        make.size.mas_equalTo(superview);
        make.center.mas_equalTo(superview);
        
    }];
    
    
    [self.voiceButton mas_makeConstraints:^(MASConstraintMaker* make){
        
        make.centerY.mas_equalTo(superview.mas_centerY);
        make.left.mas_equalTo(superview.mas_left).with.offset(10);
        make.width.equalTo(@33);
        make.height.equalTo(@33);
        
    }];
    
    
    [self.textFiled mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.centerY.mas_equalTo(superview);
        make.left.mas_equalTo(self.voiceButton.mas_right).with.offset(10);
        make.right.mas_equalTo(self.imageButton.mas_left).with.offset(-10);
        make.top.mas_equalTo(superview.mas_top).with.offset(5);
        make.bottom.mas_equalTo(superview.mas_bottom).with.offset(-5);
        
    }];
    
    [self.imageButton mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.centerY.mas_equalTo(superview);
        make.left.mas_equalTo(self.textFiled.mas_right).with.offset(10);
        make.right.mas_equalTo(self.addButton.mas_left).with.offset(-10);
        make.width.equalTo(@33);
        make.height.equalTo(@33);
    
    }];
    
    [self.addButton mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.centerY.mas_equalTo(superview);
        make.right.mas_equalTo(superview.mas_right).with.offset(-10);
        make.width.equalTo(@33);
        make.height.equalTo(@33);
    
    }];
    
    [self.speakButton mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.center.mas_equalTo(self.textFiled);
        make.size.mas_equalTo(self.textFiled);
    
    }];
    
}

- (void)updateConstraints
{
    
    [super updateConstraints];
}

#pragma mark - 语音相关
//用的是替换方式，太low了。但是也要掌握
- (void)voiceBtnPress:(UIButton*)voiceButton
{
    NSString* normal = NULL;
    NSString* hightLight = NULL;
    
    if (self.speakButton.hidden == YES)
    {
        self.speakButton.hidden = NO;
        self.textFiled.hidden   = YES;
        normal = @"chat_bottom_keyboard_nor.png";
        hightLight = @"chat_bottom_keyboard_press.png";
    }
    else
    {
        self.speakButton.hidden = YES;
        self.textFiled.hidden   = NO;
        normal = @"chat_bottom_voice_nor.png";
        hightLight = @"chat_bottom_voice_press.png";
    }
    
    [voiceButton setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
    [voiceButton setImage:[UIImage imageNamed:hightLight] forState:UIControlStateHighlighted];
}


- (void)touchDown:(UIButton*)voiceButton
{
    //开始录音
    
    
}

- (void)speakBtnPress:(UIButton*)voiceButton
{
    //结束录音
}


#pragma mark - 表情相关

- (void)imageBtnPress:(UIButton*)imageButton
{
    
}


#pragma mark - 添加功能相关

- (void)addBtnPress:(UIButton*)addButton
{
    
}


#pragma mark - UITextField代理方法

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    if ([self.delegate respondsToSelector:@selector(KeyBordView:textFiledBegin:)])
    {
        [self.delegate KeyBordView:self textFiledBegin:textField];
    }
    
    return YES;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    if ([self.delegate respondsToSelector:@selector(KeyBordView:textFiledReturn:)])
    {
        [self.delegate KeyBordView:self textFiledReturn:textField];
    }
         
    return YES;
}

@end

视图控制器使用键盘，因为初创模版，所以先用了UIScrollView来测试：

#import "Masonry.h"
#import "QQChating.h"
#import "KeyBordView.h"
#import "ShowKeyboradViewController.h"

@interface ShowKeyboradViewController () <KeyBordVIewDelegate, UIScrollViewDelegate>

@property (nonatomic, strong) KeyBordView* keyBordView;

@end

@implementation ShowKeyboradViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    
    UIView* superview = self.view;

    UIScrollView* scrollView = [UIScrollView new];
    scrollView.backgroundColor = [UIColor lightGrayColor];
    scrollView.delegate = self;
    scrollView.contentSize = CGSizeMake(scrollView.bounds.size.width, 800);
    [scrollView flashScrollIndicators];
    [self.view addSubview:scrollView];
    
    
    self.keyBordView = [KeyBordView new];
    self.keyBordView.delegate = self;
    [self.view addSubview:self.keyBordView];

    [self.keyBordView mas_makeConstraints:^(MASConstraintMaker* make){
        
        make.width.mas_equalTo(superview.mas_width);
        make.height.mas_equalTo(@44);
        make.centerX.mas_equalTo(superview);
        make.bottom.mas_equalTo(superview.mas_bottom);
    
    }];
    
    [scrollView mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.edges.equalTo(superview).with.insets(UIEdgeInsetsMake(0, 0, -44, 0));
    
    }];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:)
                                                 name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:)
                                                 name:UIKeyboardWillHideNotification object:nil];
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
    
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

#pragma mark - NSNotificationCenter Operation

- (void)keyboardWillShow:(NSNotification* )noti
{
    CGRect keyBoardRect = [noti.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
    CGFloat deltaY = keyBoardRect.size.height;
    
    [UIView animateWithDuration:[noti.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue] animations:^{
    
        self.view.transform = CGAffineTransformMakeTranslation(0, -deltaY);
    
    }];
    
}

- (void)keyboardWillHide:(NSNotification* )noti
{
    [UIView animateWithDuration:[noti.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue] animations:^{
    
        self.view.transform = CGAffineTransformIdentity;
    }];
}


#pragma mark - KeyBordViewDelegate

- (void)beginRecord
{
    
}

- (void)finishRecord
{
    
}

- (void)KeyBordView:(KeyBordView *)keyBoardView textFiledBegin:(UITextField *)textFiled
{
    
}


- (void)KeyBordView:(KeyBordView *)keyBoardView textFiledReturn:(UITextField *)textFiled
{

}


#pragma mark - UIScrollViewDelegate

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self.view endEditing:YES];
}


@end

下一篇章会详细讲这里的重点和注意的地方，并分析技巧，以后的学习篇章也是如此，先放上成果，再分析其实现。