- UIButton是iOS UI中最简单的一个控件了。
- 这里给出5类示例。如下图。
1.button 类型
2.button 属性及方法(详见代码)
3.xib 实现图片、标题一体
4.纯代码实现图片、标题一体
5.button 按标题长度设置大小且可选返回示例
- 1、能够定义的button类型有以下6种,但是现在已经没有这么多形态了,因为苹果UI全部换成扁平化,现在只剩下四种形态:系统的,自定义的,加号,叹号,最后那种圆角可以画的。
typedef enum {
UIButtonTypeCustom = 0, //自定义风格
UIButtonTypeRoundedRect, //圆角矩形
UIButtonTypeDetailDisclosure, //蓝色小箭头按钮,主要做详细说明用
UIButtonTypeInfoLight,// 亮色感叹号
UIButtonTypeInfoDark, //暗色感叹号
UIButtonTypeContactAdd,// 十字加号按钮
} UIButtonType;
- 2、button属性及方法(详见代码)
//btn 类型
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
//btn frame
btn.frame = CGRectMake(0, 0, 100, 50);
btn.center = self.view.center;
//背景色
btn.backgroundColor = [UIColor cyanColor];
//设置button 的填充图片
[btn setImage:[UIImage imageNamed:@"share_qq"] forState:UIControlStateNormal];
//选中状态下的图片
[btn setImage:[UIImage imageNamed:@"share_pengyouquan"] forState:UIControlStateSelected];
//背静图片
[btn setBackgroundImage:[UIImage imageNamed:@"share_weixin"] forState:UIControlStateNormal];
//设置tag值
btn.tag = 12345;
//添加事件
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
//加载到view上
[self.view addSubview:btn];
//取消按钮已经添加的所有事件:(这个比较重要,若添加了两个事件 两个事件都会被触发)
[btn removeTarget:nil action:nil forControlEvents:UIControlEventTouchUpInside];
- 3、xib 实现图片、标题一体
一个button 有图片有标题的时候我们应该怎么来合理的安排它们在button 中的位置呢?
3.1 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets
UIEdgeInsetsMake
里面的四个参数表示距离上边界、左边界、下边界、右边界的距离,默认都为零,title/image
在button
的正中央
UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) {
UIEdgeInsets insets = {top, left, bottom, right};
return insets;
}
设置imageEdgeInsets 是图片相对于button的位置
设置titleEdgeInsets是标题相对于button的位置
设置ContentEdgeInsets是图片和标题一起变化
方法
如果是xib设置的话,看到一个button控件上放了一张填充图片和一个标题,然后右侧的工具栏看到 Edge这一栏,可选的有Image,Title,Content,下面有Inset栏我们一般选择Title和Image调整即可。如图可以随便得到你想要的效果。
4.纯代码实现图片、标题一体
示例代码:
- (void)setUI {
//第一种
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(0, 0, 48, 70);
btn.center = CGPointMake(self.view.frame.size.width/2, 200);
btn.backgroundColor = [UIColor orangeColor];
//1.给 btn 添加图片
[btn setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
//2.设置image 在 btn 上的位置(上,左,下,右)
btn.imageEdgeInsets = UIEdgeInsetsMake(-15, 0, 0, 0);
//3.添加标题
[btn setTitle:@"短信" forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont systemFontOfSize:12];
[btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
//4.设置 title 在 btn 上的位置
btn.titleEdgeInsets = UIEdgeInsetsMake(60, -48, 5, 0);
btn.tag = 10001;
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
//第二种
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(0, 0, 48, 70);
btn1.center = CGPointMake(self.view.frame.size.width/2, 300);
btn1.backgroundColor = [UIColor orangeColor];
//1.给 btn 添加图片
[btn1 setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
//2.设置image 在 btn 上的位置(上,左,下,右)
btn1.imageEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0);
//3.添加标题
[btn1 setTitle:@"短信" forState:UIControlStateNormal];
btn1.titleLabel.font = [UIFont systemFontOfSize:12];
[btn1 setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
//4.设置 title 在 btn 上的位置
btn1.titleEdgeInsets = UIEdgeInsetsMake(-50, -48, 0, 0);
btn1.tag = 10002;
[btn1 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
[self.view addSubview:btn1];
}
效果图:
5.button 按标题长度设置大小且可选返回示例
1.按button标题的长度计算button的frame
2.可以选择或取消选择
3.完成后可以用block把选择的按钮值传回上一级菜单