UIButton的豎排圖片和文本

UIButton的豎排圖片和文本第一想法:實(shí)現(xiàn)思路第二種方法UIContentHorizontalAlignment/UIControlContentVerticalAlignment完整代碼片段:參考資料:更新

UIButton的豎排圖片和文本

UIButton的豎排的話,如果不知道方法,就會(huì)走很多彎路了

第一想法:實(shí)現(xiàn)思路

橙色-> 按鈕frame

紫色->圖片frame

綠色->文本frame

正常情況下,如果有圖片,有文本,在 按鈕寬度 > 圖片寬度+文字寬度的情況下,按鈕的frame布局是圖1所示.

然而我們需要實(shí)現(xiàn)的是圖4的效果.

如果將開始狀態(tài)和結(jié)束狀態(tài)重疊,如圖2.此時(shí),按照?qǐng)D2的圖片frame的改變,文本的frame的改變來(lái)計(jì)算,你有可能會(huì)計(jì)算正確,當(dāng)前也有可能計(jì)算不正確,這取決于iOS系統(tǒng)的心情,哈哈.

第二種方法UIContentHorizontalAlignment/UIControlContentVerticalAlignment

可以看看這兩個(gè)屬性:

• UIControlContentVerticalAlignment
• UIContentHorizontalAlignment

The horizontal alignment of content (text or image) within the receive

The vertical alignment of content (text and images) within a control.

(from: xcdoc://?url=developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIControl_Class/index.html )

在頭文件中也有這兩個(gè)屬性的說(shuō)明:

@property(nonatomic) UIControlContentVerticalAlignment contentVerticalAlignment; // how to position content vertically inside control. default is center

@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalAlignment; // how to position content hozontally inside control. default is center

(from UIKit/UIControl.h)

從這里可以看到,這兩個(gè)屬性默認(rèn)的值是center,也就是說(shuō):

控件內(nèi)部的元素的排列方式是:水平方向居中,垂直方向居中

也就是圖1的效果:

但是,如果我們將這兩個(gè)屬性都設(shè)置為左對(duì)齊,

? [button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft]; ? [button setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];

此時(shí),這兩個(gè)按鈕的位置就是圖3的效果了.

好了,這個(gè)時(shí)候,要想從圖3的狀態(tài)轉(zhuǎn)換到圖4的狀態(tài)就不是難事了.

? [button setImageEdgeInsets:UIEdgeInsetsMake(imageTopGap,//圖片距離頂部距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (buttonWidth-image.size.width)/2,//圖片向右偏移距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0)]; ? [button setTitleEdgeInsets:UIEdgeInsetsMake((image.size.height + imageTopGap) + textTopGap, //圖片底部+文字與圖片間距 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (buttonWidth - textWidth)/2 - image.size.width, //文字向右偏移距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0 )];

完整代碼片段:

? CGFloat buttonWidth = 80; ? CGFloat buttonHeight = 80;? ? CGFloat textWidth = 40; ? CGFloat imageTopGap = 10; ? CGFloat textTopGap = 10;? ? [self.nomorlButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft]; ? [self.nomorlButton setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];? ? [self.nomorlButton setImageEdgeInsets:UIEdgeInsetsMake(imageTopGap,//圖片距離頂部距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (buttonWidth-image.size.width)/2,//圖片向右偏移距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0, 0)]; ? [self.nomorlButton setTitleEdgeInsets:UIEdgeInsetsMake((image.size.height + imageTopGap) + textTopGap, //圖片底部+文字與圖片間距 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (buttonWidth - textWidth)/2 - image.size.width, //文字向右偏移距離 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0 )];

參考資料:

• http://blog.csdn.net/worldzhy/article/details/41284157
• www.developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIControl_Class/index.html

更新

更新時(shí)間更新內(nèi)容

2015-09-220905_04	fix: 圖編號(hào)錯(cuò)誤

undefined

總結(jié)

以上是生活随笔為你收集整理的UIButton的竖排图片和文本的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。