[iOS微博项目

github: https://github.com/hellovoidworld/HVWWeibo

 

A.发微博界面：自定义UITextView

1.需求

• 用UITextView做一个编写微博的输入框
• 没有输入任何文本的时候显示占位文本
• 统一占位文本和正文的字体

 

2.思路

• 系统自带的输入控件有UITextField和UITextView两种
• UITextField：自带占位文本属性，不能换行
• UITextView：没有占位文本属性，能换行
• 这里我们选择UITextView进行改造
• 根据是否输入文本决定是否显示占位文本(placeholder)，可能使用代理或通知机制来监听文本输入，这里我们使用通知。因为设置代理只有一个，设为view本身不合理，这样就不能设置控制器代理了。
• 在UITextView中加入一个UILabel，专门用来显示placeholder

 

3.实现

自定义一个集成UITextView的控件

带有一个placeHolder属性

实现相关方法

//
//  HVWComposeTextView.h
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/6.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HVWComposeTextView : UITextView

/** placeholder 占位文本 */
@property(nonatomic, copy) NSString *placeHolder;

@end
 
//
//  HVWComposeTextView.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/6.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWComposeTextView.h"

@interface HVWComposeTextView()

@property(nonatomic, strong) UILabel *placeHolderLabel;

@end

@implementation HVWComposeTextView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
   
    if (self) {
        // 可以拖曳
        self.scrollEnabled = YES;
        self.alwaysBounceVertical = YES;
       
        // 添加placeHolderLabel
        [self setupPlaceHolder];
      
        // 设置默认字体
        [self setFont:[UIFont systemFontOfSize:14]];

        // 设置通知
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(inputtingText) name:UITextViewTextDidChangeNotification object:self];
    }
   
    return self;
}

/** 添加placeHolder */
- (void) setupPlaceHolder {
    UILabel *placeHolderLabel = [[UILabel alloc] init];
    self.placeHolderLabel = placeHolderLabel;
   
    placeHolderLabel.textColor = [UIColor lightGrayColor];
    placeHolderLabel.userInteractionEnabled = NO;
    placeHolderLabel.numberOfLines = 0; // 自动换行
    placeHolderLabel.backgroundColor = [UIColor clearColor];
   
    [self addSubview:placeHolderLabel];
}

/** 设置子控件frame */
- (void)layoutSubviews {
    [super layoutSubviews];
   
    self.placeHolderLabel.x = 5;
    self.placeHolderLabel.y = 8;
   
    NSMutableDictionary *attr = [NSMutableDictionary dictionary];
    attr[NSFontAttributeName] = self.placeHolderLabel.font;
    CGFloat placeHolderWidth = self.width - 2 * self.placeHolderLabel.x;
   
    CGRect tempRect = [self.placeHolderLabel.text boundingRectWithSize:CGSizeMake(placeHolderWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attr context:nil];
    self.placeHolderLabel.size = tempRect.size;
}

- (void)setPlaceHolder:(NSString *)placeHolder {
    self.placeHolderLabel.text = placeHolder;
   
    // 重新计算frame，可能不会立即调用layoutSubviews
    [self setNeedsLayout];
}

/** 重写setFont，更改正文font的时候也更改placeHolder的font */
- (void)setFont:(UIFont *)font {
    [super setFont:font];
    self.placeHolderLabel.font = font;
   
    // 重新计算frame，可能不会立即调用layoutSubviews
    [self setNeedsLayout];
}

- (void)dealloc {
    // 注销通知监听
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

/** 正在输入文本 */
- (void) inputtingText {
    if (self.text.length) {
        self.placeHolderLabel.hidden = YES;
    } else {
        self.placeHolderLabel.hidden = NO;
    }
}

@end

 

 

在控制器中使用

//  HVWComposeViewController.m
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 初始化一些功能按钮
    self.title = @"发微博";
   
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"退出" style:UIBarButtonItemStylePlain target:self action:@selector(dismiss)];
   
    // 添加自定义UITextView
    HVWComposeTextView *composeView = [[HVWComposeTextView alloc] init];
    self.composeView = composeView;
    composeView.frame = self.view.bounds;
    composeView.delegate = self;
   
    composeView.placeHolder = @"分享点滴精彩阿里山的会计法律考试大姐夫；拉可接受的；浪费空间阿斯顿；离开房间啊；数量的会计法律；阿克苏交电费；拉可接受的分；垃圾可适当；浪费就卡死；老地方就卡死；懒得看积分；阿里快速的减肥；拉等级考试...";
   
    [self.view addSubview:composeView];
}

 

 

 

B.使用代理监听UITextView的拖曳，缩回键盘

//  HVWComposeViewController.m
#pragma mark - UIScrollViewDelegate
/** 开始拖曳 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 缩回键盘
    [self.composeView resignFirstResponder];
}

 

 

 

整理一下“发微博”控制器代码：

//
//  HVWComposeViewController.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/3.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWComposeViewController.h"
#import "HVWComposeTextView.h"

@interface HVWComposeViewController () <UITextViewDelegate, UIScrollViewDelegate>

@property(nonatomic, strong) HVWComposeTextView *composeView;

@end

@implementation HVWComposeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
   
    // 设置导航栏
    [self setupNavigationBar];
   
    // 添加自定义UITextView
    [self setupTextView];

    // 添加工具栏
    [self setupToolBar];
}

/** 设置工具栏 */
- (void) setupToolBar {
   
}

/** 设置输入控件 */
- (void) setupTextView {
    HVWComposeTextView *composeView = [[HVWComposeTextView alloc] init];
    self.composeView = composeView;
    composeView.frame = self.view.bounds;
    composeView.delegate = self;
   
    composeView.placeHolder = @"分享点滴精彩...";
   
    [self.view addSubview:composeView];
}

/** 设置导航栏 */
- (void) setupNavigationBar {
    // 标题
    self.title = @"发微博";
   
    // 导航栏左方按钮
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"退出" style:UIBarButtonItemStylePlain target:self action:@selector(dismiss)];
}

- (void)viewDidAppear:(BOOL)animated {
    // 自动弹出键盘
    [self.composeView becomeFirstResponder];
}

- (void) dismiss {
    [self.composeView resignFirstResponder];
    [self dismissViewControllerAnimated:YES completion:nil];
   
}


#pragma mark - UIScrollViewDelegate
/** 开始拖曳 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 缩回键盘
    [self.composeView resignFirstResponder];
}

@end

 

 

C.键盘上方的工具条

1.需求

紧贴在键盘上方的工具栏，可随键盘伸缩，始终可视

工具栏上的功能按钮有：照相机、相册、提到@、话题、表情

 

2.思路

自定义一个UIView，封装上述功能

使用代理监听按钮点击

监听键盘弹出缩回通知，使用transform移动工具条

 

3.实现

（1）自定义UIView

//
//  HVWComposeToolBar.h
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef enum {
    HVWComposeToolBarButtonTagCamera, // 照相机
    HVWComposeToolBarButtonTagPhotoLib, // 相册
    HVWComposeToolBarButtonTagMention, // 提到@
    HVWComposeToolBarButtonTagTrend, // 话题
    HVWComposeToolBarButtonTagEmotion // 表情
} HVWComposeToolBarButtonTag;

@class HVWComposeToolBar;
@protocol HVWComposeToolBarDelegate <NSObject>

@optional
- (void) composeToolBar:(HVWComposeToolBar *) composeToolBar didButtonClicked:(HVWComposeToolBarButtonTag) tag;

@end

@interface HVWComposeToolBar : UIView

/** 代理 */
@property(nonatomic, weak) id<HVWComposeToolBarDelegate> delegate;

@end

 

//
//  HVWComposeToolBar.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWComposeToolBar.h"

@implementation HVWComposeToolBar

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
   
    if (self) {
        // 背景色
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageWithNamed:@"compose_toolbar_background"]];
       
        // 添加按钮
        [self addButtonWithIcon:@"compose_camerabutton_background" highlightedIcon:@"compose_camerabutton_background_highlighted" tag:HVWComposeToolBarButtonTagCamera];
       
        [self addButtonWithIcon:@"compose_toolbar_picture" highlightedIcon:@"compose_toolbar_picture_highlighted" tag:HVWComposeToolBarButtonTagPhotoLib];
       
        [self addButtonWithIcon:@"compose_mentionbutton_background" highlightedIcon:@"compose_mentionbutton_background_highlighted" tag:HVWComposeToolBarButtonTagMention];
       
        [self addButtonWithIcon:@"compose_trendbutton_background" highlightedIcon:@"compose_trendbutton_background_highlighted" tag:HVWComposeToolBarButtonTagTrend];
       
        [self addButtonWithIcon:@"compose_emoticonbutton_background" highlightedIcon:@"compose_emoticonbutton_background_highlighted" tag:HVWComposeToolBarButtonTagEmotion];
    }
   
   
    return self;
}

/** 添加一个按钮 */
- (void) addButtonWithIcon:(NSString *) icon highlightedIcon:(NSString *) highlightedIcon tag:(HVWComposeToolBarButtonTag) tag {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:[UIImage imageWithNamed:icon] forState:UIControlStateNormal];
    [button setImage:[UIImage imageWithNamed:highlightedIcon] forState:UIControlStateHighlighted];
    button.tag = tag;
   
    // 按钮点击事件
    [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
   
    [self addSubview:button];
}

/** 设置frame */
- (void)layoutSubviews {
    [super layoutSubviews];
   
    CGFloat buttonWidth = self.width / self.subviews.count;
   
    // 设置每个按钮
    for (int i=0; i<self.subviews.count; i++) {
        UIButton *button = self.subviews[i];
       
        CGFloat buttonHeight = buttonWidth;
        CGFloat buttonX = i * buttonWidth;
        CGFloat buttonY = (self.height - buttonHeight) * 0.5;
        button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
    }
}

/** 按钮点击 */
- (void) buttonClicked:(UIButton *) button {
    // 通知代理
    if ([self.delegate respondsToSelector:@selector(composeToolBar:didButtonClicked:)]) {
        [self.delegate composeToolBar:self didButtonClicked:button.tag];
    }
}

@end

 

（2）在控制器上测试

//  HVWComposeViewController.m
/** 设置工具栏 */
- (void) setupToolBar {
    HVWComposeToolBar *toolBar = [[HVWComposeToolBar alloc] init];
    toolBar.width = self.view.width;
    toolBar.height = 44;
    toolBar.delegate = self;
   
    self.composeView.inputAccessoryView = toolBar;
}

 

 

（3）在控制器中调整工具条的位置

不要直接加载键盘的inputAccessoryView上，因为需要在键盘退出之后仍然显示在底部

所以独立设置位置，使用transform随着键盘移动

//  HVWComposeViewController.m
/** 设置工具栏 */
- (void) setupToolBar {
    HVWComposeToolBar *toolBar = [[HVWComposeToolBar alloc] init];
    self.toolBar = toolBar;
    toolBar.width = self.view.width;
    toolBar.height = 44;
    toolBar.delegate = self;
   
    toolBar.x = 0;
    // 在底部显示
    toolBar.y = self.view.height - toolBar.height;
   
    [self.view addSubview:toolBar];
}

/** 设置输入控件 */
- (void) setupTextView {
    HVWComposeTextView *composeView = [[HVWComposeTextView alloc] init];
    self.composeView = composeView;
    composeView.frame = self.view.bounds;
    composeView.delegate = self;
   
    composeView.placeHolder = @"分享点滴精彩...";
   
    [self.view addSubview:composeView];
   
    // 监听键盘通知
    // 键盘将弹出
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
   
    // 键盘将缩回
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
   
    // 添加图片显示区
    [self setupImageDisplayView];
}
 
#pragma mark - 键盘通知处理
/** 键盘将弹出 */
- (void) keyboardWillShow:(NSNotification *) note {
    // 键盘弹出需要时间
    CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
   
    // 移动工具条
    [UIView animateWithDuration:duration animations:^{
        // 获取键盘高度
        CGRect keyboardFrame = [note.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
        CGFloat keyboardHeight = keyboardFrame.size.height;
       
        self.toolBar.transform = CGAffineTransformMakeTranslation(0, -1 * keyboardHeight);
    }];
}

/** 键盘将缩回 */
- (void) keyboardWillHide:(NSNotification *) note {
    // 键盘缩回需要时间
    CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
   
    // 移动工具条
    [UIView animateWithDuration:duration animations:^{
        self.toolBar.transform = CGAffineTransformIdentity;
    }];
}

 

 

D.相机 & 相册 选择图片功能

1.需求

点击“相机”/“相册”进入相应界面，完成后把选择的图片显示在输入框

 

2.思路

使用UIImagePickerController打开相机/相册

使用picker的代理方法，在完成选择后获取图片

创建一个UIView用来装载图片，然后放在输入框内

 

3.实现

//
//  HVWComposeImageDisplayView.h
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HVWComposeImageDisplayView : UIView

- (void) addImage:(UIImage *) image;

@end

 

//
//  HVWComposeImageDisplayView.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWComposeImageDisplayView.h"

#define MaxColumn 4

@implementation HVWComposeImageDisplayView

/** 添加图片 */
- (void) addImage:(UIImage *) image {
    HVWLog(@"addImage");
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
   
    [self addSubview:imageView];
   
    [self setNeedsDisplay];
}

/** 设置frame */
- (void)layoutSubviews {
    [super layoutSubviews];
   
    UIImageView *imageView = [self.subviews lastObject];
    int index = self.subviews.count - 1;
    // 所在列
    int column = index % MaxColumn;
    // 所在行
    int row = index / MaxColumn;
   
    CGFloat margin = 10;
    CGFloat imageWidth = (self.width - (MaxColumn + 1) * margin) / MaxColumn;
    CGFloat imageHeight = imageWidth;
    CGFloat imageX = column * (imageWidth + margin) + margin;
    CGFloat imageY = row * (imageHeight + margin);
   
    imageView.frame = CGRectMake(imageX, imageY, imageWidth, imageHeight);
}

@end

 

//
//  HVWComposeViewController.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/3.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWComposeViewController.h"
#import "HVWComposeTextView.h"
#import "HVWComposeToolBar.h"
#import "HVWComposeImageDisplayView.h"

@interface HVWComposeViewController () <UITextViewDelegate, UIScrollViewDelegate, HVWComposeToolBarDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate>

/** 输入框 */
@property(nonatomic, strong) HVWComposeTextView *composeView;

/** 工具条 */
@property(nonatomic, strong) HVWComposeToolBar *toolBar;

/** 图片显示区 */
@property(nonatomic, strong) HVWComposeImageDisplayView *imageDisplayView;

@end

@implementation HVWComposeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
   
    // 设置导航栏
    [self setupNavigationBar];
   
    // 添加自定义UITextView
    [self setupTextView];

    // 添加工具栏
    [self setupToolBar];
}

/** 设置工具栏 */
- (void) setupToolBar {
    HVWComposeToolBar *toolBar = [[HVWComposeToolBar alloc] init];
    self.toolBar = toolBar;
    toolBar.width = self.view.width;
    toolBar.height = 44;
    toolBar.delegate = self;
   
    toolBar.x = 0;
    // 在底部显示
    toolBar.y = self.view.height - toolBar.height;
   
    [self.view addSubview:toolBar];
}

/** 设置输入控件 */
- (void) setupTextView {
    HVWComposeTextView *composeView = [[HVWComposeTextView alloc] init];
    self.composeView = composeView;
    composeView.frame = self.view.bounds;
    composeView.delegate = self;
   
    composeView.placeHolder = @"分享点滴精彩...";
   
    [self.view addSubview:composeView];
   
    // 监听键盘通知
    // 键盘将弹出
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
   
    // 键盘将缩回
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
   
    // 添加图片显示区
    [self setupImageDisplayView];
}

/** 设置导航栏 */
- (void) setupNavigationBar {
    // 标题
    self.title = @"发微博";
   
    // 导航栏左方按钮
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"退出" style:UIBarButtonItemStylePlain target:self action:@selector(dismiss)];
}

/** 添加图片显示区 */
- (void) setupImageDisplayView {
    HVWComposeImageDisplayView *imageDisplayView = [[HVWComposeImageDisplayView alloc] init];
    imageDisplayView.size = self.composeView.size;
    imageDisplayView.x = 0;
    imageDisplayView.y = 100;
   
    self.imageDisplayView = imageDisplayView;
   
    [self.composeView addSubview:imageDisplayView];
}

- (void)viewDidAppear:(BOOL)animated {
    // 自动弹出键盘
    [self.composeView becomeFirstResponder];
}

- (void) dismiss {
    [self.composeView resignFirstResponder];
    [self dismissViewControllerAnimated:YES completion:nil];
   
}


#pragma mark - UIScrollViewDelegate
/** 开始拖曳 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 缩回键盘
    [self.composeView resignFirstResponder];
}

#pragma mark - HVWComposeToolBarDelegate
/** 工具栏的按钮被点击了 */
- (void)composeToolBar:(HVWComposeToolBar *)composeToolBar didButtonClicked:(HVWComposeToolBarButtonTag)tag {
    // 判断哪个按钮被点击
    switch (tag) {
        case HVWComposeToolBarButtonTagCamera: // 相机
            [self openCamera];
            break;
        case HVWComposeToolBarButtonTagPhotoLib: // 相册
            [self openAlbum];
            break;
        case HVWComposeToolBarButtonTagMention: // 提到@
           
            break;
        case HVWComposeToolBarButtonTagTrend: // 话题
           
            break;
        case HVWComposeToolBarButtonTagEmotion: // 表情
           
            break;
        default:
            break;
    }
}

/** 打开相机 */
- (void) openCamera {
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    picker.delegate = self;
   
    [self presentViewController:picker animated:YES completion:nil];
}

/** 打开相册 */
- (void) openAlbum {
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    picker.delegate = self;
   
    [self presentViewController:picker animated:YES completion:nil];
}

#pragma mark - UIImagePickerControllerDelegate
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    // 取得原图
    UIImage *image = info[UIImagePickerControllerOriginalImage];
    [self.imageDisplayView addImage:image];
   
    [picker dismissViewControllerAnimated:YES completion:nil];
}

#pragma mark - 键盘通知处理
/** 键盘将弹出 */
- (void) keyboardWillShow:(NSNotification *) note {
    // 键盘弹出需要时间
    CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
   
    // 移动工具条
    [UIView animateWithDuration:duration animations:^{
        // 获取键盘高度
        CGRect keyboardFrame = [note.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
        CGFloat keyboardHeight = keyboardFrame.size.height;
       
        self.toolBar.transform = CGAffineTransformMakeTranslation(0, -1 * keyboardHeight);
    }];
}

/** 键盘将缩回 */
- (void) keyboardWillHide:(NSNotification *) note {
    // 键盘缩回需要时间
    CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
   
    // 移动工具条
    [UIView animateWithDuration:duration animations:^{
        self.toolBar.transform = CGAffineTransformIdentity;
    }];
}

@end