自定义UIButton
2016-07-13 11:31
417 查看
偶尔逛简书能看见很多值得记下来的东西,有的接触过有的没接触过,接触过的也可能过段时间就忘记了,再上手的时候可能手足无措,所以决定有些觉得值得记下来的东西还是记录一下。博客是个好地方,因为很多人都能搜索到,所以迫使自己要认真点写,不然就很丢人了,所以在这里记录一些东西可能是对自己而言以后再次翻看最清晰的记录了,推荐大家都可以写一下,就当做笔记了,这样比收藏别人的文章更好,因为别人的思路转换为自己的东西还是需要一个过程的,自己把自己的领悟写下来就是这个过程。
写了这么多废话,下面开始主题了:
继承UIButton,我常用的类前缀是AT,所以自定义按钮就是ATButton了,我们在ATButton重写layoutSubviews方法。
一般常见的样式就是图片在上文字标题在下,或者图片在右标题文字在左,图片在右文字在左就不用说了吧,默认样式,图片在下文字在上至今没见过,不过也不难实现,但是这里就不写了,只写前两种,会了前两种最后一种也就不难懂了。
控制器:
效果图:
控制器:
效果图:(我都是让它们居中显示的,如果你想改的话调一下位置也很容易)
效果图:
效果图:
OK,就是这么多了,最后说一下UIEdgeInsetsMake():它的参数顺序有点奇怪,是上左下右,怎么用呢?这么记比较简单:比如说你想让按钮中的图片向左移10,你就在第二个参数写10,前面加负号就OK了,其他位置都一样,这样用比较容易理解一些,也比较容易记。
github:https://github.com/alan12138/Custom-Control
写了这么多废话,下面开始主题了:
第一种方式:子类重新布局
很简单就直接上代码了:继承UIButton,我常用的类前缀是AT,所以自定义按钮就是ATButton了,我们在ATButton重写layoutSubviews方法。
一般常见的样式就是图片在上文字标题在下,或者图片在右标题文字在左,图片在右文字在左就不用说了吧,默认样式,图片在下文字在上至今没见过,不过也不难实现,但是这里就不写了,只写前两种,会了前两种最后一种也就不难懂了。
图片在上文字标题在下
ATButton.m//更改上下方向图片和文字的位置 - (void)layoutSubviews{ [super layoutSubviews]; CGRect imageRect = self.imageView.frame; imageRect.origin.x = self.frame.size.width * 0.5 - imageRect.size.width * 0.5; imageRect.origin.y = self.frame.size.height * 0.5 - imageRect.size.height; CGRect titleRect = self.titleLabel.frame; titleRect.origin.x = self.frame.size.width * 0.5 - titleRect.size.width * 0.5; titleRect.origin.y = self.frame.size.height * 0.5 ; self.imageView.frame = imageRect; self.titleLabel.frame = titleRect; }
控制器:
ATButton *btn = [[ATButton alloc] init]; [btn setBackgroundColor:[UIColor greenColor]]; [btn setFrame:CGRectMake(100, 100, 100, 100)]; [btn setTitle:@"按钮" forState:UIControlStateNormal]; [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal]; [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn];
效果图:
图片在右文字标题在左
ATButton.m//更改左右方向图片和文字的位置 - (void)layoutSubviews { [super layoutSubviews]; CGRect imageRect = self.imageView.frame; imageRect.origin.x = self.frame.size.width * 0.5 ; imageRect.origin.y = self.frame.size.height * 0.5 - imageRect.size.height * 0.5; CGRect titleRect = self.titleLabel.frame; titleRect.origin.x = self.frame.size.width * 0.5 - titleRect.size.width; titleRect.origin.y = self.frame.size.height * 0.5 - titleRect.size.height * 0.5; self.imageView.frame = imageRect; self.titleLabel.frame = titleRect; }
控制器:
ATButton *btn = [[ATButton alloc] init]; [btn setBackgroundColor:[UIColor greenColor]]; [btn setFrame:CGRectMake(100, 100, 100, 100)]; [btn setTitle:@"按钮" forState:UIControlStateNormal]; [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal]; [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn];
效果图:(我都是让它们居中显示的,如果你想改的话调一下位置也很容易)
第二种方式:EdgeInsets(不需要创建子类直接在控制器两行代码更改位置)
图片在右文字标题在左
UIButton *btn = [[UIButton alloc] init]; [btn setBackgroundColor:[UIColor greenColor]]; [btn setFrame:CGRectMake(100, 100, 100, 100)]; [btn setTitle:@"按钮" forState:UIControlStateNormal]; [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal]; [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]; btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width * 0.5, 0, 0); btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.frame.size.width + (btn.frame.size.width * 0.5 - btn.titleLabel.frame.size.width), 0, 0); [self.view addSubview:btn];
效果图:
图片在上文字标题在下
UIButton *btn = [[UIButton alloc] init]; [btn setBackgroundColor:[UIColor greenColor]]; [btn setFrame:CGRectMake(100, 100, 100, 100)]; [btn setTitle:@"按钮" forState:UIControlStateNormal]; [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal]; [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]; btn.imageEdgeInsets = UIEdgeInsetsMake(-(btn.imageView.frame.size.height),btn.frame.size.width * 0.5 - btn.imageView.frame.size.width * 0.5, 0, 0); btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.titleLabel.frame.size.width * 0.5, -(btn.titleLabel.frame.size.height), 0); [self.view addSubview:btn];
效果图:
OK,就是这么多了,最后说一下UIEdgeInsetsMake():它的参数顺序有点奇怪,是上左下右,怎么用呢?这么记比较简单:比如说你想让按钮中的图片向左移10,你就在第二个参数写10,前面加负号就OK了,其他位置都一样,这样用比较容易理解一些,也比较容易记。
github:https://github.com/alan12138/Custom-Control
相关文章推荐
- include与require的区别
- UESTC 2016 Summer Training #2 Div.2(未完待续)
- UI -- UITableView 数据源协议与委托协议
- 解决PKIX:unable to find valid certification path to requested target 的问题
- UGUI富文本
- HDU 5538 House Building
- iOS多线程编程之Operation Queues
- require的按需加载
- easyui在datagrid用formatter添加linkbutton后列表和行号错位
- easyui datagrid宽度设置在ie8无效的问题
- iOS开发工程师与UI视觉设计师不得不说的故事
- UE4通过代码逻辑触发相应事件,相应事件逻辑在蓝图实现
- codeforces 361 D - Friends and Subsequences
- easyui容易被忽略掉的部分
- Request对象中可以获取各种路径信息
- [转]easyui data-options的使用
- [转]EasyUI——常见用法总结
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- 异常org.hibernate.QueryException: could not resolve property的原因 解决办法
- 【JDBC 报错】Connections could not be acquired from the underlying database!