iOS - UITableViewCell 左滑多個按鈕(編輯俯在、更多、刪除等)及背景毛玻璃效果

人一切的痛苦娃惯,本質(zhì)上都是對自己的無能的憤怒跷乐。

** 上篇文章介紹了UITableView的最基本的使用,現(xiàn)在這篇補充一點左滑出現(xiàn)多個按鈕的功能 以及對這些按鈕的設(shè)置 **


效果演示

目錄

**1.左滑多個按鈕
2.對tableView背景設(shè)置毛玻璃
3.對滑動出來的按鈕設(shè)置背景圖片以及毛玻璃效果 **


左滑多個按鈕

  • iOS 8 之后的調(diào)用系統(tǒng)的方法
- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 添加一個刪除按鈕
    UITableViewRowAction *deleteRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"刪除" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"點擊了刪除");
    }];
    

    // 添加一個更多按鈕
    UITableViewRowAction *moreRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"更多" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"點擊了更多");  
    }];
    moreRowAction.backgroundColor = [UIColor clearColor];
    
    return @[deleteRowAction,moreRowAction];
}

/*
UITableViewRowAction 的幾個屬性
@property (nonatomic, copy, nullable) NSString *title;    名稱
@property (nonatomic, copy, nullable) UIColor *backgroundColor; // default background color is dependent on style    背景顏色
@property (nonatomic, copy, nullable) UIVisualEffect* backgroundEffect;    毛玻璃效果
*/

注:
1.這里設(shè)置 UITableViewRowAction 屬性不要使用代碼塊中的action來設(shè)置趾浅,我嘗試過愕提,沒有效果。
2.這里這個毛玻璃效果我也使用它來設(shè)置過皿哨,也是沒有效果的浅侨,不知道是不是我沒設(shè)置好,如果哪位清楚证膨,歡迎再評論中指點如输。
3.這里數(shù)組中添加順序是從右到左的,也就是央勒,數(shù)組當(dāng)中的第一個不见,就是你按鈕中最右邊的那個

  • iOS 8 之前的話,網(wǎng)上有些第三方崔步,以及其他方法稳吮,因為現(xiàn)在iOS10出來了,并且9井濒、10升級率占九成以上灶似,這里就不寫了列林。

對UItableView背景設(shè)置毛玻璃效果

  • 首先設(shè)置背景圖片
  • 然后在背景圖片上添加毛玻璃效果
  • 然后將cell設(shè)置為透明的就可以了
    UIImageView * imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tableViewBackgroundImage"]];
    
    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
    effectView.frame = self.view.bounds;
    [imageView addSubview:effectView];

    tableView.backgroundView = imageView;
cell.backgroundColor = [UIColor clearColor];

對滑動出來的按鈕設(shè)置背景圖片以及毛玻璃效果

  • 首先 我們要搞清楚這里 UITableViewCell 中間子控件的層級關(guān)系
層級關(guān)系

這里可以清晰的看到,cell有兩個子控件酪惭,一個是我們常見的
UITableViewCellContentView希痴,還有一個就是
UITableViewCellDeleteConfirmationView,而這個就是我們側(cè)滑出來的按鈕位子的父視圖撞蚕。
那我們直接是沒有辦法調(diào)用到這個UITableViewCellDeleteConfirmationView的润梯,因此,我們要在自定義的cell中自己去遍歷cell的子控件甥厦,來找出這個視圖纺铭。

弄清楚了層級關(guān)系,那么我的想法就是在UITableViewCellDeleteConfirmationView 上添加一個背景圖片刀疙,并且添加上毛玻璃效果就可以了

自定義的cell中實現(xiàn)這個方法

- (void)layoutSubviews
{
    [super layoutSubviews];
    for (UIView * subView in self.subviews) {
        if ([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) {

//這個判斷我認為是比較重要的 舶赔,避免你多次添加圖片,你不添加這個判斷谦秧,會發(fā)現(xiàn)會添加多次圖片
            if (self.backImage == nil) {
                self.backImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"123"]];
                self.backImage.frame = CGRectMake(0, 0, 134, 44);    //這里我是直接打印出兩個按鈕的位置來定的位置竟纳,實際項目中,更具你按鈕的個數(shù)進行調(diào)整
                [subView addSubview:self.backImage];
                
                UIBlurEffect * blurEffect =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
                // 毛玻璃視圖
                self.effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
                //添加到要有毛玻璃特效的控件中
                self.effectView.frame = self.backImage.frame;
                [subView addSubview:self.effectView];

                //注意:這里順序不能反疚鲤,要先將毛玻璃效果放到最后面锥累,再將圖片放在最后面,這樣才能確保毛玻璃是在圖片上面的
                [subView sendSubviewToBack:self.effectView];
                
                [subView sendSubviewToBack:self.backImage];
                
                break;
            } else {
                [subView addSubview:self.effectView];
                [subView sendSubviewToBack:self.effectView];
                
                [subView addSubview:self.backImage];
                [subView sendSubviewToBack:self.backImage];
                break;
            }

            
        }
    }
    
}

這里有幾個注意點 :
1.添加圖片的時候進行判斷集歇,因為這個方法調(diào)用時在你滑動的時候多次調(diào)用的桶略,不進行判斷就會多次添加圖片
2.添加圖片和毛玻璃的順序必須注意,讓圖片在毛玻璃下面


如果對文章有任何疑問或者有改進的地方诲宇,歡迎各位在評論中留言际歼,我會盡快回復(fù)改正

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市姑蓝,隨后出現(xiàn)的幾起案子鹅心,更是在濱河造成了極大的恐慌,老刑警劉巖纺荧,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旭愧,死亡現(xiàn)場離奇詭異,居然都是意外死亡宙暇,警方通過查閱死者的電腦和手機输枯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來客给,“玉大人,你說我怎么就攤上這事肢簿“薪#” “怎么了蜻拨?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長桩引。 經(jīng)常有香客問我缎讼,道長,這世上最難降的妖魔是什么坑匠? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任血崭,我火速辦了婚禮,結(jié)果婚禮上厘灼,老公的妹妹穿的比我還像新娘夹纫。我一直安慰自己,他們只是感情好设凹,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布舰讹。 她就那樣靜靜地躺著,像睡著了一般闪朱。 火紅的嫁衣襯著肌膚如雪月匣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天奋姿,我揣著相機與錄音锄开,去河邊找鬼。 笑死称诗,一個胖子當(dāng)著我的面吹牛萍悴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播粪狼,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼退腥,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了再榄?” 一聲冷哼從身側(cè)響起狡刘,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎困鸥,沒想到半個月后嗅蔬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡疾就,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年澜术,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猬腰。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸟废,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出姑荷,到底是詐尸還是另有隱情盒延,我是刑警寧澤缩擂,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站添寺,受9級特大地震影響胯盯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜计露,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一博脑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧票罐,春花似錦叉趣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至沈善,卻和暖如春乡数,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背闻牡。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工净赴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人罩润。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓玖翅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親割以。 傳聞我的和親對象是個殘疾皇子金度,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件严沥、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,096評論 4 62
  • 2017.02.22 可以練習(xí)猜极,每當(dāng)這個時候,腦袋就犯困消玄,我這腦袋真是神奇呀跟伏,一說讓你做事情,你就犯困翩瓜,你可不要太...
    Carden閱讀 1,342評論 0 1
  • 國慶期間受扳,我和先生帶著十三妹去陽江游玩了幾天。 一天中午兔跌,我們一家三口和朋友的一家三口一起吃飯勘高。另外還有一個五十多...
    夏天的田格子閱讀 542評論 2 4
  • 1、在表單驗證的時候,如果需要輸入的內(nèi)容是數(shù)字华望。提示xxx is not string(圖一) 需要在rule中添...
    jane4321閱讀 250評論 0 0
  • 我喜歡你 如鯨向海 如鳥投林
    巷巳閱讀 162評論 0 0