在寫代碼的過程中,可能遇到很多button,但是布局并不是默認(rèn)情況那樣圖片在左,文字在右的樣式。
這個(gè)時(shí)候一般會(huì)有幾種解決方案
1、把button拆分為一個(gè)只有圖片的button,和一個(gè)label兩個(gè)控件去實(shí)現(xiàn),但是這樣的話點(diǎn)擊區(qū)域又要去做處理。
2、重寫button的的兩個(gè)方法
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
一般來說這樣也能解決,但是這樣又很繁瑣,復(fù)用性太差,不可能每次為了寫個(gè)button就寫個(gè)子類
3、利用TitleEdgeInsets和ImageEdgeInsets屬性
如果是在xib畫的,直接看著屬性慢慢調(diào)
這樣一般也能得到自己想要的效果。
但是試用了3方法之后,肯定會(huì)想想TitleEdgeInsets和ImageEdgeInsets是個(gè)什么東西，代碼怎么實(shí)現(xiàn)的,設(shè)置的具體數(shù)值是什么含義，設(shè)置為多少是合適的。因此就開始研究?jī)蓚€(gè)屬性，首先翻開了官方文檔,雖然對(duì)他們有一些介紹,但是具體有意義的東西卻沒有發(fā)現(xiàn)。然后就網(wǎng)上找資料看看關(guān)于這兩個(gè)屬性，有很多博客內(nèi)容。但是大致看了一些覺得還是沒有講清楚，于是自己寫了個(gè)Demo去一探究竟。
首先可以確定的是TitleEdgeInsets和ImageEdgeInsets的初始值都是UIEdgeInsetsZero。按照許多博文的說法對(duì)于TitleEdgeInsets和ImageEdgeInsets的解釋如下:
image的UIEdgeInsets屬性的top，left，bottom都是相對(duì)于按鈕的，right是相對(duì)于title；
title的UIEdgeInsets屬性的top，bottom，right都是相對(duì)于按鈕的，left是相對(duì)于image；
按照這個(gè)解釋的話,那我們要對(duì)button內(nèi)部label與imageView的位置做調(diào)整的話,就重新設(shè)置這兩個(gè)屬性就可以了。
對(duì)于top與bottom來說,因?yàn)槭且詁utton為參照,所以很直觀的設(shè)置offset的時(shí)候,偏移會(huì)是top與bottom的累加效果。我一開始以為top與bottom是各自生效，但是根據(jù)我自己的實(shí)驗(yàn),top與bottom并不是直觀的相對(duì)偏移,它們兩個(gè)是一起對(duì)label或者iamgeview在Y軸上偏移的總量產(chǎn)生影響,根據(jù)實(shí)驗(yàn)得出的一個(gè)初步結(jié)論是offsetY = (top - bottom)/2 .但是有一個(gè)現(xiàn)象就是即使offsetY值一樣會(huì)使image(title)的center的移動(dòng)距離一致，但是由于top和bottom設(shè)置的不同,可能會(huì)發(fā)生image(title)壓縮或者放大的效果.
相比之下對(duì)于right與left的影響就更復(fù)雜了一下,我猜想是因?yàn)閠itle與image會(huì)互相影響。這里也沒探出個(gè)究竟。
如果在做布局變化的時(shí)候,保持top和bottom一直,left與right一致。這樣比較能達(dá)到理想的效果。
做上下布局的時(shí)候top與bottom的變化，截圖里用的labelHeight 其實(shí)用imageHeight也是沒什么問題。
我建議還是要自己寫個(gè)Demo去測(cè)試一下.反正我是沒徹底弄明白這個(gè)位移的規(guī)律。
相關(guān)的博客特別多,但是我也沒找到把原理說的特別清的。也算是給自己埋了個(gè)坑。。
實(shí)現(xiàn)Button文字(titleLabel)和圖片(imageView)上下排列
注意的是這個(gè)博文里的例子是在sb里面畫的button,因此是一個(gè)尺寸剛剛適合文字與圖片的button,但是實(shí)際上你如果自己代碼init然后賦值frame的話，可能尺寸并沒那么恰好,可能button是有留白的。這個(gè)時(shí)候?qū)嶒?yàn)發(fā)現(xiàn)會(huì)有變形情況。
總之也是沒搞清楚到底怎么回事。。。有點(diǎn)煩。
