iOS UIButton設(shè)置兩種狀態(tài)切換之間的效果

昨天,在公司的項(xiàng)目中,給UI在測(cè)試機(jī)上跑了一下項(xiàng)目,過了一會(huì),UI拿著手機(jī)過來說按鈕點(diǎn)擊的顏色太深了,需要改一下。
在這里,新建一個(gè)工程
具體情況:


具體的情況.gif

代碼:

    // 按照按鈕背景圖片的大小來設(shè)置button的frame
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 200, 36, 20.5)];
    [button setBackgroundImage:[UIImage imageNamed:@"question_turn_off_back"] forState:UIControlStateNormal];
    [button setBackgroundImage:[UIImage imageNamed:@"question_turn_on_back"] forState:UIControlStateSelected];
    [button setImage:[UIImage imageNamed:@"question_turn_off"] forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"question_turn_on"] forState:UIControlStateSelected];
    [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    
- (void)buttonClicked:(UIButton *)button {
    
    button.selected = !button.isSelected;
}

在這里,按照平常的方法給按鈕設(shè)置了默認(rèn)狀態(tài)下的 backgroundImage 和 image,還有選中狀態(tài)下的 backgroundImage 和 image。發(fā)現(xiàn)按鈕按下去之后,有一片灰色蒙板一樣的東西,毋庸置疑,肯定是 UIButton 的 highlighted 屬性搞的鬼。但是這里 UIButton 創(chuàng)建的時(shí)候使用 init 方式,記得MJ在視頻里說過這樣創(chuàng)建一個(gè)按鈕就相當(dāng)于 UIButtonTypeCustom類型的,但是還是去把按鈕的創(chuàng)建方式改成 UIButtonTypeCustom ,其他的代碼不變。

    // 按照按鈕背景圖片的大小來設(shè)置button的frame
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(100, 200, 36, 20.5);
UIButtonTypeCustom.gif

發(fā)現(xiàn)還是不好使,緊接著又設(shè)置 UIControlStateHighlighted 狀態(tài)下的背景圖片還是沒用。在網(wǎng)上搜,但是沒有找到(可能是搜索的方向有問題),由于項(xiàng)目緊,就又回到項(xiàng)目中去,跳入 UIControlState 中去查看,想看看有沒有新的發(fā)現(xiàn)。

typedef NS_OPTIONS(NSUInteger, UIControlState) {
    UIControlStateNormal       = 0,
    UIControlStateHighlighted  = 1 << 0,                  // used when UIControl isHighlighted is set
    UIControlStateDisabled     = 1 << 1,
    UIControlStateSelected     = 1 << 2,                  // flag usable by app (see below)
    UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3, // Applicable only when the screen supports focus
    UIControlStateApplication  = 0x00FF0000,              // additional flags available for application use
    UIControlStateReserved     = 0xFF000000               // flags reserved for internal framework use
};

這是蘋果對(duì) UIControlState 的定義,在這里發(fā)現(xiàn)它的類型是 NS_OPTIONS 類型,這種類型在 《Effective Objective-C2.0編寫高質(zhì)量的iOS和OS X代碼的52個(gè)有效方法》 第1章第5條有描述:

《Effective Objective-C2.0編寫高質(zhì)量的iOS和OS X代碼的52個(gè)有效方法》對(duì) NS_OPTIONS 使用場(chǎng)景描述.png

既然它是 NS_OPTIONS 類型可以進(jìn)行位運(yùn)算,想起學(xué)校時(shí)期寫單片機(jī)程序的時(shí)候,可以按照位運(yùn)算來組合自己想要的一種狀態(tài)。

typedef NS_OPTIONS(NSUInteger, UIControlState) {
        UIControlStateNormal       = 0,  // 二進(jìn)制 : 0000 十進(jìn)制:0
        UIControlStateHighlighted  = 1 << 0,    // 1向左挪動(dòng)0位  二進(jìn)制 : 0001 十進(jìn)制:1
        UIControlStateDisabled     = 1 << 1,    // 1向左挪動(dòng)1位  二進(jìn)制 : 0010 十進(jìn)制:2
        UIControlStateSelected     = 1 << 2,    // 1向左挪動(dòng)2位  二進(jìn)制 : 0100  十進(jìn)制:4
        UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3,  // 1向左挪動(dòng)3位  二進(jìn)制 : 1000  十進(jìn)制:8 
        UIControlStateApplication  = 0x00FF0000,
        UIControlStateReserved     = 0xFF000000
    };

于是增加一行代碼,設(shè)置默認(rèn)和高亮狀態(tài)這個(gè)過程的背景圖片

[button setBackgroundImage:[UIImage imageNamed:@"question_turn_off_back"] forState:UIControlStateHighlighted | UIControlStateNormal];

效果:


UIControlStateHighlighted | UIControlStateNormal.gif

之前的效果:

之前的效果.gif

對(duì)比發(fā)現(xiàn),按鈕從默認(rèn)狀態(tài)到高亮狀態(tài)的時(shí)候,沒有那一層類似蒙板一樣的東西了,只是 Image 還存在那種情況。
于是再加上幾句代碼

    // 設(shè)置背景圖片在默認(rèn)狀態(tài)與高亮狀態(tài)之間切換的圖片
    [button setBackgroundImage:[UIImage imageNamed:@"question_turn_off_back"] forState:UIControlStateHighlighted | UIControlStateNormal];
    // 設(shè)置背景圖片在選中狀態(tài)與高亮狀態(tài)之間切換的圖片
    [button setBackgroundImage:[UIImage imageNamed:@"question_turn_on_back"] forState:UIControlStateSelected | UIControlStateHighlighted];
    // 設(shè)置圖片在默認(rèn)狀態(tài)與高亮狀態(tài)之間切換的圖片
    [button setImage:[UIImage imageNamed:@"question_turn_off"] forState:UIControlStateNormal | UIControlStateHighlighted];
    // 設(shè)置圖片在選中狀態(tài)與高亮狀態(tài)之間切換的圖片
    [button setImage:[UIImage imageNamed:@"question_turn_on"] forState:UIControlStateSelected | UIControlStateHighlighted];

最后的效果:

最后設(shè)置的效果.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容