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