你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> 5分鐘 搞定UIButton的文本與圖片的布局

5分鐘 搞定UIButton的文本與圖片的布局

編輯:IOS開發基礎

UIButton內部文本和圖片的布局是我們日常代碼中,不可缺少的部分,按鈕默認左邊圖片右邊文本,那要實現左邊文本,右邊圖片,我們該怎麼解決呢,上面圖片,下面文本又該怎麼辦呢

其實很簡單,今天總結下,目前主要用兩種方式,一種就是重寫按鈕,另一種就是通過setTitleEdgeInsets和setImageEdgeInsets方法解決

下圖是按鈕默認情況下的圖文布局

1.png

左邊文本,右邊圖片
首先介紹重寫按鈕吧,新建一個按鈕繼承UIButton,

- (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;

}

效果如下:

2.png

上面圖片,下面文本
同樣用重寫按鈕的方法

- (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;
}

效果如下:
![屏幕快照 2016-05-30 10.23.11.png](http://upload-images.jianshu.io/upload_images/616981-34430e2f6f66b344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

另一種方法就是通過setTitleEdgeInsets和setImageEdgeInsets方法解決
這種方法的最大好處,就是不要在重寫UIButton,直接在新建的UIButton中改變上面兩個屬性的值就可以達到我們想要的結果
左邊文本右邊圖片
代碼如下:

UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(50, 100, 80, 40);
    [btn1 setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
    [btn1 setTitle:@"首頁" 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:@"首頁" 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];

完全顛倒的效果

4.png

上面圖片下面文本
代碼如下:

 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(50, 50, 80, 60);
    [btn setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
    [btn setTitle:@"首頁的事" 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];

效果圖:

5.png

關於setTitleEdgeInsets和setImageEdgeInsets下面進行一些解釋:
UIButton內有兩個控件titleLabel和imageView,可以用來顯示一個文本和圖片,這裡的圖片區別於背景圖片。給UIButton設置了title和image後,它們會圖片在左邊,文本在圖片右邊顯示。它們兩個做為一個整體依賴於button的contentHorizontalAlignment居左居右或居中顯示。

顯示格式區分:
1.當button.width < image.width時,只顯示被壓縮後的圖片,圖片是按照fillXY的方式壓縮。
2.當button.width > image.width,且button.width < (image.width+text.width)時,圖片正常顯示,文本被壓縮。
3.當button.width > (image.width+text.width)時,兩者並列默認居中顯示,可通過button的屬性contentHorizontalAlignment改變對齊方式。

想改變兩個子控件的顯示位置,可以分別通過setTitleEdgeInsets和setImageEdgeInsets來實現。對titleLabel和imageView設置偏移是針對他當前的位置起作用的,並不是針對距離button邊框的距離的。

typedefNS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
   UIControlContentHorizontalAlignmentCenter =0,//居中
   UIControlContentHorizontalAlignmentLeft   =1,//居左
   UIControlContentHorizontalAlignmentRight  =2,//居右
   UIControlContentHorizontalAlignmentFill   =3,//

想兩改變兩個子控件的顯示位置,可以分別通過setTitleEdgeInsets和setImageEdgeInsets來實現。需要注意的是,對titleLabel和imageView設置偏移,是針對它當前的位置起作用的,並不是針對它距離button邊框的距離的。感覺設置不設置UIControlContentHorizontalAlignmentCenter居中都沒有影響,這個網上也找了些相關的信息,感覺都沒有說到重點,我這裡也沒有完全理解透徹,之前都是在設置setTitleEdgeInsets和setImageEdgeInsets這些參數時都是不停的嘗試得到的結果。目前這是我理解後,代碼實現最後的答案,希望可以幫到大家。



文章轉自 Migi000的簡書
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved