天天看點

xib Button 上同時顯示文字和圖檔的處理

最近比較閑,對之前踩過的坑做一個總結

為了實作這種類似的button,左邊文字,右邊圖檔,或者是左邊圖檔,右邊圖檔

xib Button 上同時顯示文字和圖檔的處理
xib Button 上同時顯示文字和圖檔的處理
xib Button 上同時顯示文字和圖檔的處理
  • 方法一:xib 設定屬性

在xib button 上有個屬性,Semantic,Force Right-to-Left ,Force Left-to-Right

Force Right-to-Left  是圖檔在右,文字在左,Force Left-to-Right 是正好相反。 

xib Button 上同時顯示文字和圖檔的處理
xib Button 上同時顯示文字和圖檔的處理

選中編輯button,切換到size inspector頁面,預設情況下 content Insets、Title Insets、Image Insets三個的預設值都為0,

設定Title Insets 的右邊距或者是Image Insets 的左邊距,可以調節文字和圖檔之間的距離。

xib Button 上同時顯示文字和圖檔的處理

但是Semantic這個屬性對ios8 是無效的,iOS8沒記錯的話應該都是圖檔在左,文字在右,查了相關文獻,針對ios8解決的方法如下:

/**
 針對ios8 調整button 圖檔和文字的位置
 
 @param button 帶文字和圖檔button
 @param offset 右邊圖檔距文字的距離
 @return 調整後的button
 */
+ (UIButton *)adjustmentaImageAndTitleOfbtn:(UIButton *)button Offset:(CGFloat)offset;
           
+ (UIButton *)adjustmentaImageAndTitleOfbtn:(UIButton *)button Offset:(CGFloat)offset {
    NSString *version= [UIDevice currentDevice].systemVersion;
    if (version.doubleValue < 9.0) {
        button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width + offset);
        button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);
    } else {
        
    }
    return button;
}
           
  • 方法二:還是xib 文字和圖檔邊距設定

無需設定Semantic 這個屬性,可以直接調節TitleLabel的右邊距,給圖像留出空間,然後把圖像左邊距調到titleLabel的寬度,圖像就出現在titleLabel的右邊了,但是這個方法有時候很難設定。

xib Button 上同時顯示文字和圖檔的處理
  • 方法三:代碼實作
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNormal];
[btn setTitle:@"title" forState:UIControlStateNormal];
[btn setTitleEdgeInsets:UIEdgeInsetsMake(0, - btn.imageView.image.size.width, 0, btn.imageView.image.size.width)];
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, btn.titleLabel.bounds.size.width, 0, -btn.titleLabel.bounds.size.width)]
           

UIButton預設是左圖檔,右文字。并且在設定edge insets之前, 位置已經有了設定。是以設定title的edge insets,真實的作用是在原來的邊距值基礎上增加或減少某個間距,負值便是減少。以title為例,設定右邊距增加圖檔寬度,就使得自己的右邊界距離按鈕的右邊界多了圖檔的寬度,正好放下圖檔。此時,titleLabel變小了,而titleLabel的左邊界還在原來的位置上,是以label的左邊界距離按鈕的左邊界減少圖檔的寬度,label就和原來一樣大了,而且左側起始位置和圖檔的左側起始位置相同了。

參考:https://blog.csdn.net/u014599371/article/details/80111211

ps:了解一下semantic 這個屬性,是允許iOS知道視圖是否被反轉的規則,有多種選擇:

Unspecified: 視圖的預設值,當從左到右和從右到左的布局進行切換時,視圖被翻轉。

Playback: 表示播放控制的視圖,如播放,倒帶或快進按鈕或播放頭清洗器。在從左到右和從右到左的布局之間切換時,這些視圖不會翻轉。

Force Left-To_Right: 始終使用從左到右布局顯示的視圖。

Force Right-To-Left: 始終使用從右到左的布局顯示的視圖。