ios開發之--UIButton中imageView和titleLabel的位置調整

在使用UIButton時，有時候需要調整按鈕內部的imageView和titleLabel的位置和尺寸。在默認情況下，按鈕內部的imageView和titleLabel的顯示效果是圖片在左文字在右，然后兩者緊挨在一起構成組合居中顯示。

如下圖：

我們可以使用setImageEdgeInsets:和setTitleEdgeInsets:方法來調整兩者的位置。在使用這兩個方法之前，我們首先要將imageView和titleLabel定位在UIButton的左上角位置，方便參照坐標調節位置。使用以下語句來定位(UIButton實例名為btn)：

[btn setContentHorizontalAlignment: UIControlContentHorizontalAlignmentLeft];
[btn setContentVerticalAlignment: UIControlContentVerticalAlignmentTop];

1、正常情況：

使用上面的方法，不進行任何操作，此時顯示情況和坐標情況如下：

2，將imageview居中，將titlelabel左移至貼邊：

使用下面方法來實現：

[btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-btn.imageView.bounds.size.width)*0.5, 0, 0)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(0, -btn.imageView.bounds.size.width, 0, 0)];

 

 

3，是imageview和titlelabel都居中，使用下面的方法來實現這種情況：

[btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-btn.imageView.bounds.size.width)*0.5, 0, 0)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];

4，這是如果imageview的尺寸被壓縮，使用下面的語句來講imageview壓縮下：

#define kImageWidth 100.
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];

會出現以下情況：

這個時候，可以看出來titlabel不居中了，這說明在使用了setImageEdgeInsets:方法后，imageView的尺寸會被改變。

那么為何titleLabel在水平方向上還會偏移呢？原因是這樣的，我們一直把titleLabel的初始x值和imageView的寬度等同看待了。而在這里imageView的寬度變小了，但是titleLabel的初始x值仍然是等於縮小前的imageView的寬度的，我們卻使用一個縮小后的imageView的寬度來代替titleLabel的初始x值，於是導致了偏移的出現。

要處理這種情況，有兩種方法：

5、處理方法1，先定義titleLabel再定義imageView：

    使用以下語句來實現這種情況：

#define kImageWidth 100.
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(kImageWidth, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];

此時按鈕的顯示情況和坐標情況如下：

由於titleLabel在imageView被壓縮前就使用了它的寬度來定位，所以能准確定位，也不會被之后的imageView壓縮所影響。

 

6、處理方法2，先將imageView形變前的寬度記錄下來：

    使用以下語句來實現這種情況：

#define kImageWidth 100.
    CGFloat imageWidth = btn.imageView.bounds.size.width;
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-imageWidth, 0, 0)];

7，另外，如果想將imageView放大，比如將imageView的寬度定為180，那么會有以下情況：

可以發現，imageView的尺寸還是150x150，並沒有沒放大，反而imageView的居中受到了影響，產生偏移了。

 

8、經過上面的測試，可以得到以下結論：

(1)、在UIButton中，titleLabel的初始x值是imageView的寬度；

(2)、imageView可以被壓縮；

(3)、當imageView被壓縮后，imageView的寬度會變小，此時就不可以再用imageView的寬度來代替titleLabel的初始x值來調整位置了；

(4)、imageView不可以被放大。