應用場景:
開發(fā)中經(jīng)常需要設置點擊控件時要求圖片文字同時高亮或者變色迂尝,這種情況通常有兩種方式設置闯估,一種是使用兩個控件監(jiān)聽點擊事件去改變這兩個控件的狀態(tài)舟陆,另外也可以使用button去改變其內(nèi)部TitleLabel和ImageView的位置背亥,實現(xiàn)上下和左右的布局般眉,其中左右布局是系統(tǒng)默認的方式,上下布局需要自己去操作布局慎宾。
設置button內(nèi)部控件布局的兩種方式
一、通過自定義button控件浅悉,重寫其中的布局方法
- (CGRect)backgroundRectForBounds:(CGRect)bounds{
NSLog(@"%f----%f",bounds.size.width,bounds.size.height);
return bounds;
}
- (CGRect)contentRectForBounds:(CGRect)bounds{
NSLog(@"%f======%f",bounds.size.width,bounds.size.height);
return bounds;
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
NSLog(@"%f----%f----%f----%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
CGRect rect = CGRectMake(50, contentRect.origin.y+25, contentRect.size.width-50, 30);
return rect;
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
NSLog(@"%f====%f====%f====%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
CGRect rect = CGRectMake(10, contentRect.origin.y+25, 30, 30);
return rect;
}
方法就不介紹了每個方法的方法名描述的都很清楚趟据,你只需設置想要的frame和bounds返回就可以了。
二术健、第二種方式是通過button內(nèi)部控件的EdgeInsets屬性來設置的汹碱,這個屬性也很常見可以設置其上左下右的值來改變button內(nèi)部label和ImageView的布局
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
我這里提供了一個計算方法可以很快的設置button內(nèi)部控件的上下布局
計算代碼
///計算button中心點imageview最大x的差
CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
///button的label中心點減去上面的差值就是label的到button中心點的偏移量
CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
///計算imageview到button中心點的偏移量
CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
Demo代碼
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 120, 80)];
button.backgroundColor = [UIColor yellowColor];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:12.0];
[button setTitle:@"收藏" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"button-1"] forState:UIControlStateNormal];
button.titleLabel.backgroundColor = [UIColor redColor];
button.imageView.backgroundColor = [UIColor blueColor];
///計算button中心點imageview最大x的差
CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
///button的label中心點減去上面的差值就是label的到button中心點的偏移量
CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
///計算imageview到button中心點的偏移量
CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
[self.view addSubview:button];
}
這里只是計算了imageView和Label的居中 具體的高度沒有計算,所以大家使用時可以自己調(diào)整一下高度問題荞估,如果button寬度顯示不下可以調(diào)整b2的大小例如兩邊減去某個值咳促。
注意點:
使用上面的計算代碼時一定要先設置好圖片和標題稚新,不要先計算后設置,否則拿到的iamgeview和label的size可以為nil導致布局失敗跪腹。