首页 > 代码库 > iOS开发项目篇—29自定义工具条

iOS开发项目篇—29自定义工具条

iOS开发项目篇—29自定义工具条

一、简单说明

1.实现效果:

2.实现思路:

(1)尝试:

 1 //添加子控件 2 -(void)setupTextView 3 { 4     //1.创建输入控件 5     YYTextView *textView=[[YYTextView alloc]init]; 6     //设置frame 7     textView.frame=self.view.bounds; 8     [self.view addSubview:textView]; 9     self.textView=textView;10     11     //2.设置占位文字提醒12     textView.placehoder=@"分享新鲜事···";13     //3.设置字体(说明:该控件继承自UITextfeild,font是其父类继承下来的属性)14     textView.font=[UIFont systemFontOfSize:15];15     //设置占位文字的颜色为棕色16     textView.placehoderColor=[UIColor lightGrayColor];17     18     //4.设置键盘顶部的工具条19     textView.inputAccessoryView=[UIButton buttonWithType:UIButtonTypeContactAdd];20 }

(2)实现方案

自定义一个继承自UIView的类,实现工具条。在View的内部添加五个按钮。

导入图片素材

二、实现

1.搭建toolbar

YYComposeToolBar.m文件

 1 // 2 //  YYComposeToolBar.m 3 // 4  5 #import "YYComposeToolBar.h" 6  7 @implementation YYComposeToolBar 8  9 - (id)initWithFrame:(CGRect)frame10 {11     self = [super initWithFrame:frame];12     if (self) {13         //设置工具条的背景图片14         self.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageWithName:@"compose_toolbar_background"]];15         16         //添加所有的子控件17         [self addButtonWithIcon:@"compose_trendbutton_background" highIcon:@"compose_trendbutton_background_highlighted" tag:YYComposeToolbarButtonTypeTrend];18         [self addButtonWithIcon:@"compose_camerabutton_background" highIcon:@"compose_camerabutton_background_highlighted"tag: YYComposeToolbarButtonTypeCamera];19         [self addButtonWithIcon:@"compose_toolbar_picture" highIcon:@"compose_toolbar_picture_highlighted" tag:YYComposeToolbarButtonTypePicture];20         [self addButtonWithIcon:@"compose_emoticonbutton_background" highIcon:@"compose_emoticonbutton_background_highlighted"tag: YYComposeToolbarButtonTypeEmotion];21         [self addButtonWithIcon:@"compose_mentionbutton_background" highIcon:@"compose_mentionbutton_background_highlighted" tag:YYComposeToolbarButtonTypeMention];22     }23     return self;24 }25 26 /**27  *  添加一个按钮28  *29  *  @param icon     默认图标30  *  @param highIcon 高亮图标31  */32 - (void)addButtonWithIcon:(NSString *)icon highIcon:(NSString *)highIcon tag:(HMComposeToolbarButtonType)tag33 {34     UIButton *button=[[UIButton alloc]init];35     [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];36     [button setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal];37     [button setImage:[UIImage imageWithName:highIcon] forState:UIControlStateHighlighted];38     [self addSubview:button];39 }40 -(void)buttonClick:(UIButton *)button41 {42     YYLog(@"%@--",button);43 }44 45 -(void)layoutSubviews46 {47     [super layoutSubviews];48     int count=self.subviews.count;49     50     CGFloat buttonW=self.width/count;51     CGFloat buttonH=self.height;52     for (int i=0; i<count; i++) {53         UIButton *button=self.subviews[i];54         button.y=0;55         button.width=buttonW;56         button.height=buttonH;57         button.x=i*buttonW;58     }59     60 }61 62 @end

YYComposeToolBar.h文件

 1 // 2 //  YYComposeToolBar.h 3 //  22-微博自定义工具条 4 // 5  6 #import <UIKit/UIKit.h> 7  8 @interface YYComposeToolBar : UIView 9 10 //使用枚举11 typedef enum {12     YYComposeToolbarButtonTypeCamera, // 照相机13     YYComposeToolbarButtonTypePicture, // 相册14     YYComposeToolbarButtonTypeMention, // 提到@15     YYComposeToolbarButtonTypeTrend, // 话题16     YYComposeToolbarButtonTypeEmotion // 表情17 } YYComposeToolbarButtonType;18 19 @end

YYComposeViewController.m文件

 1 // 2 //  YYComposeViewController.m 3 // 4  5 #import "YYComposeViewController.h" 6 #import "YYTextView.h" 7 #import "YYComposeToolBar.h" 8  9 @interface YYComposeViewController ()10 @property(nonatomic,weak)YYTextView *textView;11 @end12 13 @implementation YYComposeViewController14 15 16 - (void)viewDidLoad17 {18     [super viewDidLoad];19   20     //设置导航栏21     [self setupNavBar];22     23     //添加子控件24     [self setupTextView];25     26     //添加工具条27     [self setupToolbar];28     29 }30 31 -(void)setupToolbar32 {33     //1.创建34     YYComposeToolBar *toolBar=[[YYComposeToolBar alloc]init];35     toolBar.width=self.view.width;36     toolBar.height=44;37     38     //2.显示39     self.textView.inputAccessoryView=toolBar;40 }41 //添加子控件42 -(void)setupTextView43 {44     //1.创建输入控件45     YYTextView *textView=[[YYTextView alloc]init];46     //设置frame47     textView.frame=self.view.bounds;48     [self.view addSubview:textView];49     self.textView=textView;50     51     //2.设置占位文字提醒52     textView.placehoder=@"分享新鲜事···";53     //3.设置字体(说明:该控件继承自UITextfeild,font是其父类继承下来的属性)54     textView.font=[UIFont systemFontOfSize:15];55     //设置占位文字的颜色为棕色56     textView.placehoderColor=[UIColor lightGrayColor];57     58 }59 60 //设置导航栏61 -(void)setupNavBar62 {63     self.title=@"发消息";64     self.view.backgroundColor=[UIColor whiteColor];65     self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"取消" style:UIBarButtonItemStyleBordered target:self action:@selector(cancel)];66     self.navigationItem.rightBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"发送" style:UIBarButtonItemStyleBordered target:self action:@selector(send)];67     self.navigationItem.rightBarButtonItem.enabled=NO;68 }69 70 -(void)send71 {72     YYLog(@"发送----");73 }74 75 -(void)cancel76 {77 //    [self dismissViewControllerAnimated:YES completion:nil];78     self.textView.text=@"测试";79 }80 @end

实现效果:

打印查看:

2.设置代理,监听按钮的点击事件

获取按钮的几种方式:

此处通过给button设置tag,而tag定义为枚举。

优点:不论添加按钮的顺序如何改变,程序都不会出错,而且可读性好。

1 //使用枚举2 typedef enum {3     YYComposeToolbarButtonTypeCamera, // 照相机4     YYComposeToolbarButtonTypePicture, // 相册5     YYComposeToolbarButtonTypeMention, // 提到@6     YYComposeToolbarButtonTypeTrend, // 话题7     YYComposeToolbarButtonTypeEmotion // 表情8 } YYComposeToolbarButtonType;

实现代码如下:

YYComposeToolBar.h文件

 1 // 2 //  YYComposeToolBar.h 3 //  22-微博自定义工具条 4 // 5  6 #import <UIKit/UIKit.h> 7  8 //使用枚举 9 typedef enum {10     YYComposeToolbarButtonTypeCamera, // 照相机11     YYComposeToolbarButtonTypePicture, // 相册12     YYComposeToolbarButtonTypeMention, // 提到@13     YYComposeToolbarButtonTypeTrend, // 话题14     YYComposeToolbarButtonTypeEmotion // 表情15 } YYComposeToolbarButtonType;16 17 @class YYComposeToolBar;18 @protocol YYComposeToolBarDelegate <NSObject>19 20 -(void)composeTool:(YYComposeToolBar *)toolbar didClickedButton:(YYComposeToolbarButtonType)buttonType;21 22 @end23 @interface YYComposeToolBar : UIView24 @property(nonatomic,weak)id<YYComposeToolBarDelegate> delegate;25 @end

YYComposeToolBar.m文件

 1 // 2 //  YYComposeToolBar.m 3 //  22-微博自定义工具条 4 // 5  6 #import "YYComposeToolBar.h" 7  8 @implementation YYComposeToolBar 9 10 - (id)initWithFrame:(CGRect)frame11 {12     self = [super initWithFrame:frame];13     if (self) {14         //设置工具条的背景图片15         self.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageWithName:@"compose_toolbar_background"]];16         17         //添加所有的子控件18         [self addButtonWithIcon:@"compose_trendbutton_background" highIcon:@"compose_trendbutton_background_highlighted" tag:YYComposeToolbarButtonTypeTrend];19         [self addButtonWithIcon:@"compose_camerabutton_background" highIcon:@"compose_camerabutton_background_highlighted"tag: YYComposeToolbarButtonTypeCamera];20         [self addButtonWithIcon:@"compose_toolbar_picture" highIcon:@"compose_toolbar_picture_highlighted" tag:YYComposeToolbarButtonTypePicture];21         [self addButtonWithIcon:@"compose_emoticonbutton_background" highIcon:@"compose_emoticonbutton_background_highlighted"tag: YYComposeToolbarButtonTypeEmotion];22         [self addButtonWithIcon:@"compose_mentionbutton_background" highIcon:@"compose_mentionbutton_background_highlighted" tag:YYComposeToolbarButtonTypeMention];23     }24     return self;25 }26 27 /**28  *  添加一个按钮29  *30  *  @param icon     默认图标31  *  @param highIcon 高亮图标32  */33 - (void)addButtonWithIcon:(NSString *)icon highIcon:(NSString *)highIcon tag:(YYComposeToolbarButtonType)tag34 {35     UIButton *button=[[UIButton alloc]init];36     button.tag=tag;37     [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];38     [button setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal];39     [button setImage:[UIImage imageWithName:highIcon] forState:UIControlStateHighlighted];40     [self addSubview:button];41 }42 -(void)buttonClick:(UIButton *)button43 {44 //    YYLog(@"%@--",button);45     if ([self.delegate respondsToSelector:@selector(composeTool:didClickedButton:)]) {46         [self.delegate composeTool:self didClickedButton:button.tag];47     }48 }49 50 -(void)layoutSubviews51 {52     [super layoutSubviews];53     int count=self.subviews.count;54     55     CGFloat buttonW=self.width/count;56     CGFloat buttonH=self.height;57     for (int i=0; i<count; i++) {58         UIButton *button=self.subviews[i];59         button.y=0;60         button.width=buttonW;61         button.height=buttonH;62         button.x=i*buttonW;63     }64     65 }66 67 @end

YYComposeViewController.m文件

  1 //  2 //  YYComposeViewController.m  3 //  4   5 #import "YYComposeViewController.h"  6 #import "YYTextView.h"  7 #import "YYComposeToolBar.h"  8   9 @interface YYComposeViewController ()<YYComposeToolBarDelegate,UITextViewDelegate> 10 @property(nonatomic,weak)YYTextView *textView; 11 @end 12  13 @implementation YYComposeViewController 14  15  16 - (void)viewDidLoad 17 { 18     [super viewDidLoad]; 19    20     //设置导航栏 21     [self setupNavBar]; 22      23     //添加子控件 24     [self setupTextView]; 25      26     //添加工具条 27     [self setupToolbar]; 28      29 } 30  31 -(void)setupToolbar 32 { 33     //1.创建 34     YYComposeToolBar *toolBar=[[YYComposeToolBar alloc]init]; 35     toolBar.width=self.view.width; 36     toolBar.height=44; 37     //设置代理 38     toolBar.delegate=self; 39      40     //2.显示 41     self.textView.inputAccessoryView=toolBar; 42 } 43  44 #pragma mark-YYComposeToolBarDelegate 45 -(void)composeTool:(YYComposeToolBar *)toolbar didClickedButton:(YYComposeToolbarButtonType)buttonType 46 { 47     switch (buttonType) { 48         case YYComposeToolbarButtonTypeCamera://照相机 49             YYLog(@"打开照相机"); 50             break; 51         case YYComposeToolbarButtonTypePicture://相册 52             YYLog(@"打开相册"); 53             break; 54         case YYComposeToolbarButtonTypeMention://提到 55             YYLog(@"提到"); 56             break; 57         case YYComposeToolbarButtonTypeEmotion://表情 58             YYLog(@"打开表情"); 59             break; 60         case YYComposeToolbarButtonTypeTrend://话题 61             YYLog(@"打开话题"); 62             break; 63              64         default: 65             break; 66     } 67 } 68  69 /** 70  *  view显示完毕的时候再弹出键盘,避免显示控制器view的时候会卡住 71  */ 72 - (void)viewDidAppear:(BOOL)animated 73 { 74     [super viewDidAppear:animated]; 75      76     // 成为第一响应者(叫出键盘) 77     [self.textView becomeFirstResponder]; 78 } 79  80 #pragma mark-UITextViewDelegate 81 /** 82  *  当用户开始拖拽scrollView时调用 83  */ 84 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView 85 { 86     [self.view endEditing:YES]; 87 } 88 //添加子控件 89 -(void)setupTextView 90 { 91     //1.创建输入控件 92     YYTextView *textView=[[YYTextView alloc]init]; 93     //设置垂直方向上拥有弹簧效果 94     textView.alwaysBounceVertical=YES; 95     textView.delegate=self; 96     //设置frame 97     textView.frame=self.view.bounds; 98     [self.view addSubview:textView]; 99     self.textView=textView;100     101     //2.设置占位文字提醒102     textView.placehoder=@"分享新鲜事···";103     //3.设置字体(说明:该控件继承自UITextfeild,font是其父类继承下来的属性)104     textView.font=[UIFont systemFontOfSize:15];105     //设置占位文字的颜色为棕色106     textView.placehoderColor=[UIColor lightGrayColor];107     108 }109 110 //设置导航栏111 -(void)setupNavBar112 {113     self.title=@"发消息";114     self.view.backgroundColor=[UIColor whiteColor];115     self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"取消" style:UIBarButtonItemStyleBordered target:self action:@selector(cancel)];116     self.navigationItem.rightBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"发送" style:UIBarButtonItemStyleBordered target:self action:@selector(send)];117     self.navigationItem.rightBarButtonItem.enabled=NO;118 }119 120 -(void)send121 {122     YYLog(@"发送----");123 }124 125 -(void)cancel126 {127     [self dismissViewControllerAnimated:YES completion:nil];128 //    self.textView.text=@"测试";129 }130 @end

注意点

设置垂直方向上的弹簧效果

退出键盘

效果:拖动的时候键盘消失