iOS開發UI篇--一個支援圖文混排的ActionSheet

邏輯教育-楚陽發表於2018-11-14
iOSUI

一、簡介

UIActionSheet是IOS提供給我們開發者的底部彈出選單控制元件，一般用於選單選擇、操作確認、刪除確認等功能。
IOS官方提供的以下方式對UIActionView進行例項化：

- (instancetype)initWithTitle:(NSString *)title delegate:(id<UIActionSheetDelegate>)delegate cancelButtonTitle:(NSString *)cancelButtonTitle destructiveButtonTitle:(NSString *)destructiveButtonTitle otherButtonTitles:(NSString *)otherButtonTitles, ... );複製程式碼

從這個api我們可以看出，我們只能設定文字標題，包括destructiveButtonTitle、cancelButtonTitle和otherButtonTitles，官方提供的該控制元件並不支援圖文混排。但有的時候，互動提給我們的需求又需要我們的ActionSheet具有圖文混排的效果，那就需要我們自己仿造系統自帶的ActionSheet，完成該需求。
專案演示如下：


iOS開發UI篇--一個支援圖文混排的ActionSheet


二、使用說明

第一步、構建資料模型

@interface Item : NSObject
@property (nonatomic , strong) NSString *icon;//圖片地址
@property (nonatomic , strong) NSString *title;//標題
@end複製程式碼

第二步、根據資料模型構建資料

Item *item1 = [[Item alloc] init];
item1.icon = @"journey_phone";
item1.title = @"15195905888";
Item *item2 = [[Item alloc] init];
item2.icon = @"journey_phone";
item2.title = @"15195905777";
Item *item3 = [[Item alloc] init];
item3.icon = @"journey_phone";
item3.title = @"15195905777";
NSArray *listData = [NSArray arrayWithObjects:item1,item2,item3, nil];複製程式碼

第三步、使用以上資料將控制元件初始化

PicAndTextActionSheet *sheet = [[PicAndTextActionSheet alloc] initWithList:listData title:@"撥打電話"];
sheet.delegate = self;//該控制元件使用的代理模式
[sheet showInView:self];複製程式碼

因為該控制元件使用了代理模式，所以在當前Controller需要實現以下代理方法：

-(void) didSelectIndex:(NSInteger)index{
}複製程式碼

該代理方法，主要是在Controller中能夠實現在自定義ActionSheet中的點選事件。

三、實現原理

因為ActionSheet不能支援圖片的顯示，所以我們就放棄使用擴充套件UIActionSheet控制元件的方法。我在本專案中使用的是UITableView+動畫，高仿ActionSheet的方法。UTableView可以製作列表選項，動畫可以實現系統自帶ActionSheet的自底向上和漸變效果。

注意點：複製程式碼

如果tableview處於uiview上面，uiview整個背景有點選事件，但是我們需要如果我們點選tableview的時候，處理tableview的點選事件，而不是uiview的事件。在這裡，我們需要判斷我們點選事件是否在uiview上還是在uitableview上。

解決方案如下：

1、實現代理：

<UIGestureRecognizerDelegate>
複製程式碼

2、讓gesture設定為代理

UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tappedCancel)];
tapGesture.delegate = self;
複製程式碼

3、實現代理方法，判斷點選的是否是uiview還是tableview

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
    if([touch.view isKindOfClass:[self class]]){
        return YES;
    }
    return NO;
}
複製程式碼

四、總結

任何一個複雜控制元件，基本上都是有基礎控制元件組合實現而成。該擴充套件的ActionSheet也可以用於以下場景：


iOS開發UI篇--一個支援圖文混排的ActionSheet


iOS開發UI篇--一個支援圖文混排的ActionSheet


五、下載地址

Demo下載地址：這是一個我的iOS交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。

如果覺得對你還有些用，就關注小編+喜歡這一篇文章。你的支援是我繼續的動力。

下篇文章預告：iOS開發UI篇--一個側滑選單SlidingMenu

文章來源於網路，如有侵權，請聯絡小編刪除。


相關文章