自定义UIButton

偶尔逛简书能看见很多值得记下来的东西，有的接触过有的没接触过，接触过的也可能过段时间就忘记了，再上手的时候可能手足无措，所以决定有些觉得值得记下来的东西还是记录一下。博客是个好地方，因为很多人都能搜索到，所以迫使自己要认真点写，不然就很丢人了，所以在这里记录一些东西可能是对自己而言以后再次翻看最清晰的记录了，推荐大家都可以写一下，就当做笔记了，这样比收藏别人的文章更好，因为别人的思路转换为自己的东西还是需要一个过程的，自己把自己的领悟写下来就是这个过程。

写了这么多废话，下面开始主题了：

第一种方式：子类重新布局

很简单就直接上代码了：

继承UIButton,我常用的类前缀是AT,所以自定义按钮就是ATButton了，我们在ATButton重写layoutSubviews方法。

一般常见的样式就是图片在上文字标题在下，或者图片在右标题文字在左，图片在右文字在左就不用说了吧，默认样式，图片在下文字在上至今没见过，不过也不难实现，但是这里就不写了，只写前两种，会了前两种最后一种也就不难懂了。

图片在上文字标题在下

ATButton.m

 1 //更改上下方向图片和文字的位置
 2 - (void)layoutSubviews{
 3     [super layoutSubviews];
 4     
 5     CGRect imageRect = self.imageView.frame;
 6     imageRect.origin.x = self.frame.size.width * 0.5 - imageRect.size.width * 0.5;
 7     imageRect.origin.y = self.frame.size.height * 0.5 - imageRect.size.height;
 8     
 9     CGRect titleRect = self.titleLabel.frame;
10     titleRect.origin.x = self.frame.size.width * 0.5 - titleRect.size.width * 0.5;
11     titleRect.origin.y = self.frame.size.height * 0.5 ;
12     
13     self.imageView.frame = imageRect;
14     self.titleLabel.frame = titleRect;
15 }

控制器：

1 ATButton *btn = [[ATButton alloc] init];
2 [btn setBackgroundColor:[UIColor greenColor]];
3 [btn setFrame:CGRectMake(100, 100, 100, 100)];
4 [btn setTitle:@"按钮" forState:UIControlStateNormal];
5 [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
6 [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal];
7 [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
8 [self.view addSubview:btn];

 效果图：

图片在右文字标题在左

ATButton.m

 1 //更改左右方向图片和文字的位置
 2 - (void)layoutSubviews
 3 {
 4     [super layoutSubviews];
 5     
 6     CGRect imageRect = self.imageView.frame;
 7     imageRect.origin.x = self.frame.size.width * 0.5 ;
 8     imageRect.origin.y = self.frame.size.height * 0.5  - imageRect.size.height * 0.5;
 9     
10     CGRect titleRect = self.titleLabel.frame;
11     titleRect.origin.x = self.frame.size.width * 0.5 - titleRect.size.width;
12     titleRect.origin.y = self.frame.size.height * 0.5 - titleRect.size.height * 0.5;
13     
14     self.imageView.frame = imageRect;
15     self.titleLabel.frame = titleRect;
16     
17 }

控制器：

1  ATButton *btn = [[ATButton alloc] init];
2  [btn setBackgroundColor:[UIColor greenColor]];
3  [btn setFrame:CGRectMake(100, 100, 100, 100)];
4  [btn setTitle:@"按钮" forState:UIControlStateNormal];
5  [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
6  [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal];
7  [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
8  [self.view addSubview:btn];

效果图：（我都是让它们居中显示的，如果你想改的话调一下位置也很容易）

第二种方式：EdgeInsets(不需要创建子类直接在控制器两行代码更改位置)

图片在右文字标题在左

 1 UIButton *btn = [[UIButton alloc] init];
 2 [btn setBackgroundColor:[UIColor greenColor]];
 3 [btn setFrame:CGRectMake(100, 100, 100, 100)];
 4 [btn setTitle:@"按钮" forState:UIControlStateNormal];
 5 [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
 6 [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal];
 7 [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
 8 btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width * 0.5, 0, 0);
 9 btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.frame.size.width + (btn.frame.size.width * 0.5 - btn.titleLabel.frame.size.width), 0, 0);
10 [self.view addSubview:btn];

 效果图：

图片在上文字标题在下

 1 UIButton *btn = [[UIButton alloc] init];
 2 [btn setBackgroundColor:[UIColor greenColor]];
 3 [btn setFrame:CGRectMake(100, 100, 100, 100)];
 4 [btn setTitle:@"按钮" forState:UIControlStateNormal];
 5 [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
 6 [btn setImage:[UIImage imageNamed:@"mainCellCaiClick"] forState:UIControlStateNormal];
 7 [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
 8 btn.imageEdgeInsets = UIEdgeInsetsMake(-(btn.imageView.frame.size.height),btn.frame.size.width * 0.5 - btn.imageView.frame.size.width * 0.5, 0, 0);
 9 btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.titleLabel.frame.size.width * 0.5, -(btn.titleLabel.frame.size.height), 0);
10 [self.view addSubview:btn];

 效果图：

 

OK，就是这么多了，最后说一下UIEdgeInsetsMake（）：它的参数顺序有点奇怪，是上左下右，怎么用呢？这么记比较简单：比如说你想让按钮中的图片向左移10，你就在第二个参数写10，前面加负号就OK了，其他位置都一样，这样用比较容易理解一些，也比较容易记。

 github:https://github.com/alan12138/Custom-Control

posted @ 2016-07-13 11:31  Alan12138  阅读(1508)  评论(0)  编辑  收藏  举报