6.动态布局按钮(标签)
2017-03-10 本文已影响95人
Lee丶Way
我就像那一只林中的小鸟
努力挣脱冲向蓝天怀抱
今天开始,改一改自己的写作方式,尽可能的在开始用图片展示一下今天要做的事情前提是图能说明问题
上图:
效果图解题思路
- 文字的长度
- 当下一个按钮的宽度,不满足该行的剩余宽度,换行
- 要考虑当文字长度超过了该行的最大宽度,是否应该换行
个人建议换行用Label,不换行就用Button(这句话我说错了,感谢@liwb的指正
所需技能
UIKIT
中NSStringDrawing
中计算字符串CGRect
的方法
- (CGRect)boundingRectWithSize:(CGSize)size
options:(NSStringDrawingOptions)options
attributes:(nullable NSDictionary<NSString *, id> *)attributes
context:(nullable NSStringDrawingContext *)context;
用这个方法可以根据指定的size
和NSStringDrawingOptions
以及字体的attributes
计算出文字所占的CGRect
根据需求,按钮的高度是一定的,所以这里size
就是CGSizeMake(MAXFLOAT, btnHeigh)
实现代码
1.循环构建button
CGFloat margin = 10; //间距
CGFloat offsetX = 10; //x坐标值
CGFloat offsetY = 0; //y坐标值
for (int i = 0; i < array.count; i++) {
NSString* titleString = array[i];
CGFloat btnHeigh = 20; //按钮的高度
CGSize size = [titleString boundingRectWithSize:CGSizeMake(MAXFLOAT, btnHeigh)
options:NSStringDrawingTruncatesLastVisibleLine
attributes:@{
NSFontAttributeName : [UIFont systemFontOfSize:12]
}
context:nil].size;
CGFloat btnWidth = size.width + 10;//为了使按钮更加好看,计算宽度时,多加10pt
CGFloat Screen_Width =[UIScreen mainScreen].bounds.size.width;
if (btnWidth >= Screen_Width - 20) {
btnWidth = Screen_Width - 30; // -30的缘故是,下面与-20作比较时是加上margin的
}else if (btnWidth < 50) { // 让按钮不至于太窄,显得难看
btnWidth = 50;
}
UIButton* button =
[self createTagBtnWithRect:CGRectMake(offsetX, offsetY * 27 + 10, btnWidth, btnHeigh) title:titleString];
[button addTarget:self
action:@selector(buttonClick:)
forControlEvents:UIControlEventTouchUpInside];
if (margin + button.width <= (Screen_Width - 20)) {
offsetX += button.width + margin;
} else {
offsetX = 10 + btnWidth + margin; // 10pt指的是最初时 offsetX的值是10
offsetY++;
button.frame = CGRectMake(margin, offsetY * 27 + 10, btnWidth, btnHeigh);
}
}
2.button的创建方法
- (UIButton*)createTagBtnWithRect:(CGRect)rect title:(NSString*)title {
UIButton* btn = [[UIButton alloc] initWithFrame:rect];
btn.titleLabel.font = [UIFont systemFontOfSize:12];
btn.layer.borderColor = [UIColor grayColor].CGColor;
btn.layer.borderWidth = 0.5f;
[btn setBackgroundColor:[UIColor whiteColor]];
[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
return btn;
}
- (void)buttonClick:(UIButton*)sender{
}
那带血的羽毛不向命运乞讨
跌倒只能让我越飞越高