經(jīng)常會遇到button中同時存在文字和圖片的情況,UI還會標(biāo)注間距,調(diào)來調(diào)去的超級抓狂,所以從各種大大們分享的博客扒些資料,自己總結(jié)一下,方便理解.
對齊方式
首先是.contentHorizontalAlignment屬性,之前很少接觸,每次都是根據(jù)字體大小算button的frame,設(shè)置跟其他控件的間距,但是這樣就會出現(xiàn)button的點擊區(qū)域太小的問題. 通過設(shè)置contentHorizontalAlignment是讓button內(nèi)的titleLabel或者ImageView緊貼邊框:
UIButton * button = [UIButton buttonWithType:(UIButtonTypeCustom)];
[button setTitle:@"十指戀jing" forState:(UIControlStateNormal)];
button.titleLabel.backgroundColor = [UIColor yellowColor];
button.titleLabel.textAlignment = NSTextAlignmentRight; // 文字在titleLabel中右對齊(并沒有看出有什么卵用)
[button setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
button.frame = CGRectMake(50, 300, 300, 40);
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 1;
[self.view addSubview:button];
效果如下:
// 設(shè)置button的內(nèi)容位置。嘉熊。設(shè)置content是title和image一起變化
// 讓titleLabel 緊貼button右邊框
[button setContentHorizontalAlignment:(UIControlContentHorizontalAlignmentRight)];
/*
UIControlContentHorizontalAlignmentCenter 居中
UIControlContentHorizontalAlignmentLeft 居左
UIControlContentHorizontalAlignmentRight 居右
UIControlContentHorizontalAlignmentFill 充滿(但是實際看了下效果跟居左一樣,沒懂啥情況,歡迎大神解讀)
*/
圖片和文字共存
這里設(shè)置間距用到contentEdgeInsets屬性,設(shè)置邊界值 UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) // 上,左,下,右
contentEdgeInsets屬性改變的為當(dāng)前位置,是針對它當(dāng)前的位置起作用的牧抵，并不是針對它距離button邊框的距離的,舉個栗子:在上面的代碼中已設(shè)置titleLabel居右,此時設(shè)置 [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0 )];并無任何變化,應(yīng)為所有距當(dāng)前的位置的偏移量都為0;
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 10 )];// 此時titleLabel距button的右邊距為10
如果只有title仗嗦，那它上下左右都是相對于button的，image也是一樣涛菠；如果同時有image和label，那這時候image的上左下是相對于button，右邊是相對于label的铁材；title的上右下是相對于button，左邊是相對于image的,所以一般情況下button內(nèi)的titleLAbel在右,imageView在左;
[button setTitle:@"十指戀jing" forState:(UIControlStateNormal)];
[button setImage:[UIImage imageNamed:@"info"] forState:(UIControlStateNormal)];
[button setContentHorizontalAlignment:(UIControlContentHorizontalAlignmentRight)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20 )]; // 文字距離右邊距20
[button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 50)]; // 圖片距離文字50
圖片在右 文字在左的情況
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, - button.imageView.frame.size.width - 20, 0, button.imageView.frame.size.width + 20)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];
/*
設(shè)置右邊距增加圖片寬度奕锌，就使得自己的右邊界距離按鈕的右邊界多了圖片的寬度著觉，正好放下圖片。
此時惊暴，title lable變小了饼丘，而title lable的左邊界還在原來的位置上，
所以lable的左邊界距離按鈕的左邊界減少圖片的寬度辽话，
lable就和原來一樣大了肄鸽，而且左側(cè)起始位置和圖片的左側(cè)起始位置相同了。
*/
圖片與文字上下放置時與左右類似
設(shè)置 contentVerticalAlignment改變UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)的top 和 bottom即可
下面是關(guān)于UIButton中titleLabel與imageView的顯示原則
1.當(dāng)button.width < image.width時油啤，只顯示被壓縮后的圖片典徘，圖片是按fillXY的方式壓縮。
2.當(dāng)button.width > image.width益咬，且 button.width < (image.width + text.width)時逮诲，圖片正常顯示，文本被壓縮。
3.當(dāng)button.width > (image.width + text.width),兩者并列默認(rèn)居中顯示梅鹦，可通過button的屬性contentHorizontalAlignment改變對齊方式裆甩。
