實現(xiàn)Button文字(titleLabel)和圖片(imageView)上下排列

1缕探、我最開始實現(xiàn)這個采用的方法:
重新自定義一個view,然后有兩個屬性label和imageView唆铐,然后設置位置布局哲戚,再添加單擊手勢,用代理回傳點擊方法艾岂。

2顺少、第二種方法:
自定義一個Button繼承Button,有兩個屬性label和imageView王浴,然后設置布局脆炎。這樣就不用添加單擊手勢。

3氓辣、第三種方法:
直接用Button自帶的titleLabel和imageView腕窥,寫個Category,用來設置label和image的排列方式筛婉,eg:上下、左右
明顯前兩種是很不好的癞松,所以這里只說第三種:

Button有兩個屬性:titleEdgeInsets和imageEdgeInsets爽撒,通過設置這兩個,就可以實現(xiàn)所有需要的Button的樣式响蓉,如:image在上硕勿、image在下、image在左枫甲、image在右源武。
在設置這兩個之前,我們先要理解Button上面的titleLabel和imageView的位置關系(想象Button默認的image和label的顯示):

titleEdgeInsets是titleLabel相對于其上下左右的inset想幻,跟tableView的contentInset是類似的粱栖;
如果只有title,那titleLabel的 上下左右 都是 相對于Button 的脏毯;
如果只有image闹究,那imageView的 上下左右 都是 相對于Button 的;
如果同時有image和label食店,那image的 上下左 是 相對于Button 的渣淤,右 是 相對于label 的;
label的 上下右 是 相對于Button的吉嫩, 左 是 相對于label 的价认。
上面一段很重要

理解了,然后我們就可以看懂下面的代碼

創(chuàng)建一個Button的Category自娩,.h文件如下用踩,定義一個Enum,用于決定image和label的樣式;一個方法用于調(diào)用設置捶箱。

#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
    MKButtonEdgeInsetsStyleTop, // image在上智什,label在下
    MKButtonEdgeInsetsStyleLeft, // image在左,label在右
    MKButtonEdgeInsetsStyleBottom, // image在下丁屎,label在上
    MKButtonEdgeInsetsStyleRight // image在右荠锭,label在左
};
@interface UIButton (ImageTitleSpacing)
/**
 *  設置button的titleLabel和imageView的布局樣式,及間距
 *
 *  @param style titleLabel和imageView的布局樣式
 *  @param space titleLabel和imageView的間距
 */
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space;
.m文件如下晨川,實現(xiàn)方法
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space
{
    // 1. 得到imageView和titleLabel的寬证九、高
    CGFloat imageWith = self.imageView.frame.size.width;
    CGFloat imageHeight = self.imageView.frame.size.height;

    CGFloat labelWidth = 0.0;
    CGFloat labelHeight = 0.0;
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size為0,用下面的這種設置
        labelWidth = self.titleLabel.intrinsicContentSize.width;
        labelHeight = self.titleLabel.intrinsicContentSize.height;
    } else {
        labelWidth = self.titleLabel.frame.size.width;
        labelHeight = self.titleLabel.frame.size.height;
    }

    // 2. 聲明全局的imageEdgeInsets和labelEdgeInsets
    UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;

    // 3. 根據(jù)style和space得到imageEdgeInsets和labelEdgeInsets的值
    switch (style) {
        case MKButtonEdgeInsetsStyleTop:
        {
            imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleLeft:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
        }
            break;
        case MKButtonEdgeInsetsStyleBottom:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleRight:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
        }
            break;
        default:
            break;
    }
    // 4. 賦值
    self.titleEdgeInsets = labelEdgeInsets;
    self.imageEdgeInsets = imageEdgeInsets;
}
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末共虑,一起剝皮案震驚了整個濱河市愧怜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌妈拌,老刑警劉巖拥坛,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異尘分,居然都是意外死亡猜惋,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門培愁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來著摔,“玉大人,你說我怎么就攤上這事定续〉兀” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵私股,是天一觀的道長摹察。 經(jīng)常有香客問我,道長庇茫,這世上最難降的妖魔是什么港粱? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮旦签,結果婚禮上查坪,老公的妹妹穿的比我還像新娘。我一直安慰自己宁炫,他們只是感情好偿曙,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著羔巢,像睡著了一般望忆。 火紅的嫁衣襯著肌膚如雪罩阵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天启摄,我揣著相機與錄音稿壁,去河邊找鬼。 笑死歉备,一個胖子當著我的面吹牛傅是,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蕾羊,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼喧笔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了龟再?” 一聲冷哼從身側(cè)響起书闸,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎利凑,沒想到半個月后浆劲,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡哀澈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年梳侨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片日丹。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蚯嫌,靈堂內(nèi)的尸體忽然破棺而出哲虾,到底是詐尸還是另有隱情,我是刑警寧澤择示,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布束凑,位于F島的核電站,受9級特大地震影響栅盲,放射性物質(zhì)發(fā)生泄漏汪诉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一谈秫、第九天 我趴在偏房一處隱蔽的房頂上張望扒寄。 院中可真熱鬧,春花似錦拟烫、人聲如沸该编。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽课竣。三九已至嘉赎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間于樟,已是汗流浹背公条。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留迂曲,地道東北人靶橱。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像奢米,于是被迫代替她去往敵國和親抓韩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容