|
UIButton內(nèi)部文本和圖片的布局是我們?nèi)粘４a中，不可缺少的部分，按鈕默認(rèn)左邊圖片右邊文本，那要實(shí)現(xiàn)左邊文本，右邊圖片，我們?cè)撛趺唇鉀Q呢，上面圖片，下面文本又該怎么辦呢 其實(shí)很簡(jiǎn)單，今天總結(jié)下，目前主要用兩種方式，一種就是重寫(xiě)按鈕，另一種就是通過(guò)setTitleEdgeInsets和setImageEdgeInsets方法解決 下圖是按鈕默認(rèn)情況下的圖文布局
左邊文本，右邊圖片 - (void)layoutSubviews
{ [super layoutSubviews];
CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) ;
imageRect.origin.y = (self.frame.size.height - 30)/2.0f;
CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - imageRect.size.width- titleRect.size.width);
titleRect.origin.y = (self.frame.size.height - titleRect.size.height)/2.0f;
self.imageView.frame = imageRect; self.titleLabel.frame = titleRect;
} 效果如下：
上面圖片，下面文本 - (void)layoutSubviews{
[super layoutSubviews]; CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) * 0.5;
imageRect.origin.y = self.frame.size.height * 0.5 - 40; CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - titleRect.size.width) * 0.5;
titleRect.origin.y = self.frame.size.height * 0.5 ; self.imageView.frame = imageRect; self.titleLabel.frame = titleRect;
} 效果如下： 另一種方法就是通過(guò)setTitleEdgeInsets和setImageEdgeInsets方法解決 UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(50, 100, 80, 40);
[btn1 setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn1 setTitle:@'首頁(yè)' forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn1.backgroundColor = [UIColor redColor]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 40);
[btn setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn setTitle:@'首頁(yè)' forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor]; //上左下右
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width - btn.imageView.frame.origin.x - btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, -(btn.frame.size.width - btn.imageView.frame.size.width ), 0, 0);
[self.view addSubview:btn1];
[self.view addSubview:btn]; 完全顛倒的效果
上面圖片下面文本 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 60);
[btn setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn setTitle:@'首頁(yè)的事' forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];
btn.imageEdgeInsets = UIEdgeInsetsMake(- (btn.frame.size.height - btn.titleLabel.frame.size.height- btn.titleLabel.frame.origin.y),(btn.frame.size.width -btn.titleLabel.frame.size.width)/2.0f -btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(btn.frame.size.height-btn.imageView.frame.size.height-btn.imageView.frame.origin.y, -btn.imageView.frame.size.width, 0, 0);
[self.view addSubview:btn]; 效果圖：
關(guān)于setTitleEdgeInsets和setImageEdgeInsets下面進(jìn)行一些解釋?zhuān)?br>UIButton內(nèi)有兩個(gè)控件titleLabel和imageView，可以用來(lái)顯示一個(gè)文本和圖片，這里的圖片區(qū)別于背景圖片。給UIButton設(shè)置了title和image后，它們會(huì)圖片在左邊，文本在圖片右邊顯示。它們兩個(gè)做為一個(gè)整體依賴(lài)于button的contentHorizontalAlignment居左居右或居中顯示。 顯示格式區(qū)分： 想改變兩個(gè)子控件的顯示位置，可以分別通過(guò)setTitleEdgeInsets和setImageEdgeInsets來(lái)實(shí)現(xiàn)。對(duì)titleLabel和imageView設(shè)置偏移是針對(duì)他當(dāng)前的位置起作用的，并不是針對(duì)距離button邊框的距離的。 typedefNS_ENUM(NSInteger, UIControlContentHorizontalAlignment) { 想兩改變兩個(gè)子控件的顯示位置，可以分別通過(guò)setTitleEdgeInsets和setImageEdgeInsets來(lái)實(shí)現(xiàn)。需要注意的是，對(duì)titleLabel和imageView設(shè)置偏移，是針對(duì)它當(dāng)前的位置起作用的，并不是針對(duì)它距離button邊框的距離的。感覺(jué)設(shè)置不設(shè)置UIControlContentHorizontalAlignmentCenter居中都沒(méi)有影響，這個(gè)網(wǎng)上也找了些相關(guān)的信息，感覺(jué)都沒(méi)有說(shuō)到重點(diǎn)，我這里也沒(méi)有完全理解透徹，之前都是在設(shè)置setTitleEdgeInsets和setImageEdgeInsets這些參數(shù)時(shí)都是不停的嘗試得到的結(jié)果。目前這是我理解后，代碼實(shí)現(xiàn)最后的答案，希望可以幫到大家。 文章轉(zhuǎn)自 Migi000的簡(jiǎn)書(shū)
|
|
|
來(lái)自： dxw121 > 《水電費(fèi)》
