UIButton的EdgeInsets詳解

在使用UIButton的時候,大家對setImageEdgeInsets、setTitleEdgeInsets、setContentEdgeInsets了解嗎??

以前寫代碼如果單獨只有一個的話,用著也不用那么費事,一般設置也都是文字居中,或者圖片居中。這些系統都為你自動計算好了,而且擺放好了位置。

復雜一點的話,文字居左或者居右:contentHorizontalAlignment 這個屬性可以滿足大家的需求。

如果Image和title同時存在呢?或者現在需要:有個圖片和文字的Button或者View。最開始的時候我一般都是設個UIButton然后放上去一個ImageView和UILabel,是不是太遜了。o(╯□╰)o

以前對UIButton的三個EdgeInsets感覺老是摸不著邊,其實總結一句話:UIButton 中的內容都是默認居中,設置EdgeInsets之后還是居中。


詳解:

一:只設置Image

沒有設置setImageEdgeInsets

然后設置setImageEdgeInsets之后通過Debug View 查看ImageView的frame,得到數據:(Unbutton的Width都為335,圖片的Size為(32,32))


ImageView.x ? ? ? ? ? ?ImageEdgeInsets ? ? ? ? ? ? ? ? ? ? ? ?x得到的規則

151.5 ? ? ? ? ? ? ? ? ? ? ? (0, 0, 0, 0) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(335 - 32 )/ 2

156.5 ? ? ? ? ? ? ? ? ? ? ? (0, 10, 0, 0) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(335 - 32 - 10 )/ 2 + 10

101.5? ? ? ? ? ? ? ? ? ? ? (0, 0, 0, 100) ? ? ? ? ? ? ? ? ? ? ? ? ? ? (335 - 32 - 100 )/ 2 + 0

106.5? ? ? ? ? ? ? ? ? ? ? (0, 10, 0, 100) ? ? ? ? ? ? ? ? ? ? ? ? ? (335 - 32 - 10 - 100 )/ 2 + 10


是不是發現規律了,就是(button的寬度 - 離左右的距離 - 圖片的寬度)/ 2 + 離左邊的距離。所以還是居中嘍。

只有title的自己可以試試哈。

二:既設置Image,又設置title

沒有設置任何EdgeInsets

然后設置setImageEdgeInsets、setTitleEdgeInsets之后通過Debug View 查看ImageView的frame,得到數據:(Unbutton的Width都為335,圖片的Size為(32,32))

UIButton *tempButton = [UIButton buttonWithType:UIButtonTypeCustom];

tempButton.frame = CM(20, 100, Screen_Width - 40, 40);

tempButton.backgroundColor = OrangeColor;

[tempButton setTitle:@"秀美甲" forState:UIControlStateNormal];

[tempButton setImage:[UIImage imageNamed:@"first_selected"] forState:UIControlStateNormal];

tempButton.imageView.backgroundColor = RedColor;

[self.view addSubview:tempButton];


ImageView.x ? ?Label.frame ? ? ? ? ?ImageEdgeInsets ? ? ?TitleEdgeInsets ?

124.5? ? ? ? ? (156.5,9.5,54,21.5) ? ? ?(0,0,0,0) ? ? ? ? ? ? ? ? ? (0,0,0,0)

149.5? ? ? ? ? (156.5,9.5,54,21.5)? ? ? (0,50,0,0) ? ? ? ? ? ? ? ? (0,0,0,0)

149.5? ? ? ? ? (106.5,9.5,54,21.5)? ? ? (0,50,0,0) ? ? ? ? ? ? ? ? (0,0,0,100)


ImageView.x的計算規則有一點變化了:(button的寬度 - 離左右的距離 - 圖片的寬度 -Label的寬度)/ 2 + 離左邊的距離。

Label.x 的計算規則:(button的寬度 - 離左右的距離 - 圖片的寬度 -Label的寬度)/ 2 + 離左邊的距離 + 圖片的寬度。(默認左邊總有你設置的圖片似得)

既有圖片又有title的話,計算居中時總是以他倆的寬度為一體的。所以也是居中

三:在第二種的基礎上,再設置setContentEdgeInsets


ImageView.x ? ? ? ? ? ? ? ?Label.frame ? ? ? ? ? ? ?setContentEdgeInsets

134.5? ? ? ? ? ? ? ? ? ? (166.5, 9.5, 54, 21.5) ? ? ? ? ?(0, 20, 0, 0)


這個就是在原有的基礎上相當于把button的Width - 離左右邊的距離,之后再計算Image和Label的位置。

總之:還是居中。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,252評論 4 61
  • 導語 系統的 UIButton 默認狀態下的樣式是圖標在左標題在右,但有時候可能需要不同的排版。當然可以通過繼承添...
    iOSugarCom閱讀 3,162評論 1 2
  • *7月8日上午 N:Block :跟一個函數塊差不多,會對里面所有的內容的引用計數+1,想要解決就用__block...
    炙冰閱讀 2,553評論 1 14
  • 對書的品讀和占有,是看世界的方法之一。但凡發生的事,一定有解,時間機緣而已。 2016年底入手了讀庫出品的黃永玉詩...
    天上京閱讀 384評論 0 0
  • 宋冬野吸毒了,然后呢? 有人說民謠是不是變味了,有人說董小姐知不知道,有人說斑馬斑馬你不要吸大麻了。有病啊! 很奇...
    misite_J閱讀 693評論 0 1