[iOS微博项目 - 3.1] - 发微博界面

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:]];

         // 设置通知
         [[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 = ; // 自动换行
     placeHolderLabel.backgroundColor = [UIColor clearColor];

     [self addSubview:placeHolderLabel];
 }

 /** 设置子控件frame */
 - (void)layoutSubviews {
     [super layoutSubviews];

     self.placeHolderLabel.x = ;
     self.placeHolderLabel.y = ;

     NSMutableDictionary *attr = [NSMutableDictionary dictionary];
     attr[NSFontAttributeName] = self.placeHolderLabel.font;
     CGFloat placeHolderWidth = self.width -  * 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=; 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 = ;
     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 = ;
     toolBar.delegate = self;

     toolBar.x = ;
     // 在底部显示
     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(, - * 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 - ;
     // 所在列
     int column = index % MaxColumn;
     // 所在行
     int row = index / MaxColumn;

     CGFloat margin = ;
     CGFloat imageWidth = (self.width - (MaxColumn + ) * 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 = ;
     toolBar.delegate = self;

     toolBar.x = ;
     // 在底部显示
     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 = ;
     imageDisplayView.y = ;

     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(, - * keyboardHeight);
     }];
 }

 /** 键盘将缩回 */
 - (void) keyboardWillHide:(NSNotification *) note {
     // 键盘缩回需要时间
     CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

     // 移动工具条
     [UIView animateWithDuration:duration animations:^{
         self.toolBar.transform = CGAffineTransformIdentity;
     }];
 }

 @end