按钮属于iOS中的一个基本控件.
项目中的各种需求也是对我们灵活使用各种控件的考验.
这次我遇到了一种按钮布局如图:给需要的同志们一个思路.也可以用我的代码,我会贴出来解决方法在下面
类似与这种设计,可以有三种放发去实现:
第一种:全部让UI切图,选中状态,和非选中切两套图,用UIButton的选中和非选中特性去做.这种不太灵活,每次按钮的个数增加,都要重新处理界面.
第二种:用view去做,封装一个View,这个view包含两个lable,上下各一个,然后在主视图循环加载四个出来,然后利用手势去触发时间,更改各个控件的背景颜色.这种做起来也比较绕.
第三种:用按钮去做,首先我们要明白一个文本需要分行时候在oc中常用的分行符\n,所有我就是利用这种特性去做按钮的分行,然后每个按钮里面的字体颜色我们可以用NSMutableAttributedString去修饰,根绝字符串截取去修饰不同的颜色和字体,具体代码:
初始化一个视图容器
UIView *bgMoenyView = [[UIView alloc] initWithFrame:CGRectMake(0, 165, kScreen_Width, 150)];
bgMoenyView.backgroundColor = [UIColor whiteColor];
[self.viewaddSubview:bgMoenyView];
然后去循环加载按钮
CGFloat x = 15;
CGFloaty =15;
CGFloatwithTemp = (kScreen_Width-15*3)/2;//按钮的宽度
NSArray *titleArryT = @[@"充值100",@"充值100",@"充值100",@"充值100"];
NSArray *titleArryT2 = @[@"送50",@"送20",@"送50",@"送50"];
for (inti =0; i < titleArryT.count; i++) {
UIButton *btn = [UIButton buttonWithType:(UIButtonTypeCustom)];
btn.titleEdgeInsets = UIEdgeInsetsMake(0,0,5,0);
btn.titleLabel.font = [UIFont systemFontOfSize:14];
btn.tag=101+i;
btn.frame=CGRectMake(x, y, withTemp,60);
btn.titleLabel.font=kFont14;
btn.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
NSString*str =[NSStringstringWithFormat:@" %@\n %@",titleArryT[i],titleArryT2[i]];
[btnsetAttributedTitle:[self changeLabelWithText:str] forState:(UIControlStateNormal)];
btn.layer.cornerRadius = 5;
btn.layer.masksToBounds = YES;
btn.layer.borderColor = SecondColor.CGColor;
btn.layer.borderWidth=0.7;
[btnaddTarget:self action:@selector(handleTopBtnAction:) forControlEvents:(UIControlEventTouchUpInside)];
[btnsetTitleColor:[UIColor whiteColor] forState:(UIControlStateSelected)];
[bgMoenyViewaddSubview:btn];
if((i+1)%2==0){
x =15;
y = y+15+60;
}
else {
x = x + withTemp +x;
}
}
//用来修饰选中按钮的字体大小和颜色
-(NSMutableAttributedString*) changeLabelWithText:(NSString*)needText
{
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:needText];
UIFont*font =kFont16;
[attrStringaddAttribute:NSFontAttributeName value:font range:NSMakeRange(0,7)];
[attrStringaddAttribute:NSFontAttributeName value:kFont13 range:NSMakeRange(7,needText.length-7)];
[attrStringaddAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(0,7)];
[attrStringaddAttribute:NSForegroundColorAttributeName value:SecondColor range:NSMakeRange(7,needText.length-7)];
return attrString;
}
#pragma mark --------按钮的选中事件
- (void)handleTopBtnAction:(UIButton*)sender {
int indexBtn =(int) sender.tag-101;
for (inti =0; i <4; i++) {
UIButton*tempBtn = (UIButton*)[self.viewviewWithTag:101+i];
if (i+101== indexBtn+101) {
tempBtn.selected=YES;
[tempBtnsetAttributedTitle:[self changeLabelWithText2:sender.titleLabel.text] forState:(UIControlStateNormal)];
[tempBtnsetBackgroundColor:SecondColor];
}else {
tempBtn.selected=NO;
[tempBtnsetBackgroundColor:[UIColor whiteColor]];
[tempBtnsetAttributedTitle:[self changeLabelWithText:sender.titleLabel.text] forState:(UIControlStateNormal)];
}
}
}
//用来修饰非选中按钮的字体大小和颜色,方法可以和上一个选中的简化,这里就不在赘述怎么简化了
-(NSMutableAttributedString*) changeLabelWithText2:(NSString*)needText
{
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:needText];
UIFont*font =kFont16;
[attrStringaddAttribute:NSFontAttributeName value:font range:NSMakeRange(0,7)];
[attrStringaddAttribute:NSFontAttributeName value:kFont13 range:NSMakeRange(7,needText.length-7)];
[attrStringaddAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(0,7)];
[attrStringaddAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(7,needText.length-7)];
return attrString;
}
这样下来就能达到上面的效果,至于里面的字体位置,可以用按钮的titleEdgeInsets属性去微调.