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

我們可以使用setImageEdgeInsets:和setTitleEdgeInsets:方法來調整兩者的位置。在使用這兩個方法之前,我們首先要將imageView和titleLabel定位在UIButton的左上角位置,方便參照坐標調節位置。使用以下語句來定位(UIButton實例名為btn):
[btn setContentHorizontalAlignment: UIControlContentHorizontalAlignmentLeft];
[btn setContentVerticalAlignment: UIControlContentVerticalAlignmentTop];
另外需要說明,btn的高度為200、寬度為屏幕寬度,imageView的圖片的原本尺寸為150x150,titleLabel使用了sizeToFit:方法。在定義后,我們分多種情況來討論imageView和titleLabel的位置:
使用了上述的語句后,不進行任何操作,此時按鈕的顯示情況和坐標情況如下:

imageView.x=0.000000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=150.000000, titleLabel.y=0.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
可以看到:titleLabel的x值是150,說明普通狀態下,titleLabel的原點是(150 ,0)。
使用以下語句來實現這種情況:
[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)];
此時按鈕的顯示情況和坐標情況如下:

可以看到,imageView和titleLabel兩者是有可能重疊的,并且titleLabel的x值確實是imageView的寬度。
使用以下語句來實現這種情況
[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)];
此時按鈕的顯示情況和坐標情況如下:

imageView.x=112.500000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=97.250000, titleLabel.y=150.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
此時一切正常,符合猜想。
使用以下語句來將imageView壓縮成100x100:
#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)];
此時按鈕的顯示情況和坐標情況如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=147.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
可以發現,問題出現了,此時titleLabel在水平方向上不再居中了。但是我們同時可以發現,titleLabel在垂直方向上的位置仍然是正確的,并且可以看到titleLabel.y=100。這說明在使用了setImageEdgeInsets:方法后,imageView的尺寸會被改變。
那么為何titleLabel在水平方向上還會偏移呢?原因是這樣的,我們一直把titleLabel的初始x值和imageView的寬度等同看待了。而在這里imageView的寬度變小了,但是titleLabel的初始x值仍然是等于縮小前的imageView的寬度的,我們卻使用一個縮小后的imageView的寬度來代替titleLabel的初始x值,于是導致了偏移的出現。
要處理這種情況,有兩種方法:
使用以下語句來實現這種情況:
#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)];
此時按鈕的顯示情況和坐標情況如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=97.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
由于titleLabel在imageView被壓縮前就使用了它的寬度來定位,所以能準確定位,也不會被之后的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)];
此時按鈕的顯示情況和坐標情況如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=97.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
先將imageView的寬度記錄下來,用作titleLabel的初始x值,那么之后imageView的壓縮就不會再影響到這個值了。

imageView.x=97.500000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=97.250000, titleLabel.y=150.000000, titleLabel.width=180.500000, titleLabel.height=21.500000
可以發現,imageView的尺寸還是150x150,并沒有沒放大,反而imageView的居中受到了影響,產生偏移了。
發表評論 取消回復