iOS 抽屜效果 ViewDeck

抽屜效果目前比較有名的有第三方RESideMenuMMDrawerController。但是項(xiàng)目要求抽屜效果為拉出形式邑跪,并且要有黑色透明遮罩層粉铐,然后在GitHub發(fā)現(xiàn)了一個(gè)更好用的庫ViewDeck

ViewDeck

  • 支持左邊和右邊側(cè)邊欄
  • 抽屜拉出效果,帶有黑色透明遮罩層
  • 支持點(diǎn)擊和滑動(dòng)打開溺拱、關(guān)閉側(cè)邊欄
  • 側(cè)邊欄顯示內(nèi)容尺寸可以控制
  • 省心省力逃贝,簡(jiǎn)潔好用谣辞,快速集成

目前側(cè)滑關(guān)閉功能僅在示例demo里,作者并未發(fā)布到cocoapods issues沐扳。通過pods方式導(dǎo)入的并沒有側(cè)滑關(guān)閉功能泥从,如需側(cè)滑功能,請(qǐng)手動(dòng)導(dǎo)入本demo或GitHub demo ViewDeck文件夾 —20190105

ViewDeck抽屜效果.gif
1.配置側(cè)邊欄
    UITabBarController *tarBarCtr=[[UITabBarController alloc]init];
    [tarBarCtr setViewControllers:[NSArray arrayWithObjects:centNvi,centSecNvi, nil]];
    _rootTabbarCtrV=tarBarCtr;
    //左邊view 采用xib多種形式研究
    LeftSideViewController *leftVC =[[LeftSideViewController alloc]initWithNibName:@"LeftSideViewController" bundle:[NSBundle mainBundle]];
    //右邊
    RightSideViewController *rightView=[[RightSideViewController alloc]init];
    UINavigationController *rightNvi=[[UINavigationController alloc]initWithRootViewController:rightView];
    //配置側(cè)邊欄
    IIViewDeckController *viewDeckController =[[IIViewDeckController alloc]initWithCenterViewController:_rootTabbarCtrV leftViewController:leftVC rightViewController:rightNvi];
    //只有左側(cè)邊欄
//  IIViewDeckController *viewDeckController =[[IIViewDeckController alloc]initWithCenterViewController:_rootTabbarCtrV leftViewController:leftVC];
    viewDeckController.delegate=self;
    self.window.rootViewController=viewDeckController;
2.首頁點(diǎn)擊側(cè)邊欄按鈕和跳轉(zhuǎn)下一頁

通過openSide:(IIViewDeckSide)方法可以左沪摄、右側(cè)邊欄; panningEnabled屬性僅可以控制滑動(dòng)打開關(guān)閉躯嫉,但點(diǎn)擊關(guān)閉和openSide:打開是不在這個(gè)屬性的控制范圍內(nèi)的

typedef NS_ENUM(NSInteger, IIViewDeckSide) {
    IIViewDeckSideNone = 0, /// This identifies no side, basically meaning that neither the left nor the right side is relevant.
    IIViewDeckSideLeft, /// This identifies the left view controller of an IIViewDeckController
    IIViewDeckSideRight, /// This identifies the right view controller of an IIViewDeckController

    IIViewDeckSideUnknown = IIViewDeckSideNone, /// This has the same logic as IIViewDeckSideNone but means that the side is yet unknown.

    IIViewDeckLeftSide __deprecated_enum_msg("Use IIViewDeckSideLeft instead.") = IIViewDeckSideLeft,
    IIViewDeckRightSide __deprecated_enum_msg("Use IIViewDeckSideRight instead.") = IIViewDeckSideRight,
};

//點(diǎn)擊打開左側(cè)側(cè)邊欄
-(void)actionOfTapLeftEvent{
    [self.viewDeckController openSide:IIViewDeckSideLeft animated:YES];
}
//跳轉(zhuǎn)下一頁
-(void)actionOfTapRightEvent{
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
//不需要類似RESideMenu把panGestureEnabled關(guān)閉
    [self.navigationController pushViewController:infoView animated:YES];
}
3.側(cè)邊欄顯示內(nèi)容寬度設(shè)置和跳轉(zhuǎn)

通過preferredContentSize屬性設(shè)置側(cè)邊欄的內(nèi)容寬度尺寸

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
   //ViewDeck默認(rèn)高度始終是視圖控制器本身的高度上
    self.preferredContentSize = CGSizeMake(ScreenWidth/3*2, ScreenHeight);
    self.view.backgroundColor=[UIColor whiteColor];
    
}
- (IBAction)goNextView:(UIButton *)sender {
    /**
     關(guān)閉側(cè)邊欄
     */
    [self.viewDeckController closeSide:YES];
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}
4.打開關(guān)閉IIViewDeckControllerDelegate代理

可以通過代理控制某些情況下才能打開側(cè)邊欄等情況,也可以做些打開關(guān)閉時(shí)的相關(guān)操作

//即將打開側(cè)邊欄杨拐。 return NO 側(cè)滑無法打開祈餐,但通過openSide:方法可以強(qiáng)行打開;
- (BOOL)viewDeckController:(IIViewDeckController *)viewDeckController willOpenSide:(IIViewDeckSide)side;
//已經(jīng)打開側(cè)邊欄哄陶》簦可以做一些后續(xù)操作
- (void)viewDeckController:(IIViewDeckController *)viewDeckController didOpenSide:(IIViewDeckSide)side;
//即將關(guān)閉
- (BOOL)viewDeckController:(IIViewDeckController *)viewDeckController willCloseSide:(IIViewDeckSide)side;
//即將打開
- (void)viewDeckController:(IIViewDeckController *)viewDeckController didCloseSide:(IIViewDeckSide)side;
4.關(guān)閉側(cè)邊欄時(shí),可滑動(dòng)關(guān)閉

IIViewDeckController.mm 源碼文件中屋吨,decorationTapGestureRecognizer蜒谤、dismissGestureRecognizer是關(guān)閉側(cè)邊欄的手勢(shì),其中一個(gè)是點(diǎn)擊關(guān)閉一個(gè)是新加的滑動(dòng)關(guān)閉

@property (nonatomic) UIScreenEdgePanGestureRecognizer *leftEdgeGestureRecognizer;
@property (nonatomic) UIScreenEdgePanGestureRecognizer *rightEdgeGestureRecognizer;
@property (nonatomic) UITapGestureRecognizer *decorationTapGestureRecognizer;
//滑動(dòng)關(guān)閉側(cè)邊欄
@property (nonatomic) UIPanGestureRecognizer *dismissGestureRecognizer;

下面這個(gè)庫是個(gè)古董級(jí)的至扰,不過功能齊全鳍徽,實(shí)際使用除了個(gè)別需要注意外也還不錯(cuò)。歡迎體驗(yàn): REFrostedViewController

REFrostedViewController

  • 側(cè)邊欄顯示內(nèi)容尺寸可以控制
  • 抽屜拉出效果敢课,帶有黑色透明遮罩層
  • 可以側(cè)滑關(guān)閉(重點(diǎn))
  • 缺點(diǎn):僅支持單邊側(cè)邊欄(左邊或右邊)
  • 缺點(diǎn):顯示側(cè)邊欄時(shí)需要手動(dòng)實(shí)現(xiàn)滑動(dòng)手勢(shì)阶祭,會(huì)有隱藏隱患
  • 缺點(diǎn):拉出和關(guān)閉時(shí),黑色遮罩并不完美
  • 缺點(diǎn):已經(jīng)停止維護(hù)了三四年了(老古董了)
1.配置側(cè)邊欄
    //側(cè)邊欄
    REFMenuViewController *menuView = [[REFMenuViewController alloc]init];
   REFrostedViewController *rostedViewController = [[REFrostedViewController alloc] initWithContentViewController:tarBarCtr menuViewController:menuView];
    rostedViewController.direction = REFrostedViewControllerDirectionLeft;
    rostedViewController.liveBlurBackgroundStyle = REFrostedViewControllerLiveBackgroundStyleDark;
    rostedViewController.liveBlur = YES;
    rostedViewController.limitMenuViewSize = YES;
    rostedViewController.backgroundFadeAmount=0.5;
    rostedViewController.delegate = self;
    rostedViewController.menuViewSize=CGSizeMake(leftSideMeunWidth, ScreenHeight);
2.首頁點(diǎn)擊側(cè)邊欄按鈕和跳轉(zhuǎn)下一頁
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationItem.title=@"首頁";
    UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc]initWithTitle:@"左邊欄" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapLeftEvent:)];
    self.navigationItem.leftBarButtonItem=leftBarButton;
    UIBarButtonItem *rightBarButton=[[UIBarButtonItem alloc]initWithTitle:@"下一頁" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapRightEvent)];
    self.navigationItem.rightBarButtonItem=rightBarButton;
    /**
     如需要側(cè)滑顯示側(cè)邊欄翎猛,則要實(shí)現(xiàn)滑動(dòng)手勢(shì)
     */
    [self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureRecognized:)]];
    [self creatVC];
}
//點(diǎn)擊顯示側(cè)邊欄
-(void)actionOfTapLeftEvent:(UIButton *)sender{
    [self.frostedViewController presentMenuViewController];
}
//滑動(dòng)顯示側(cè)邊欄
- (void)panGestureRecognized:(UIPanGestureRecognizer *)sender{
    [self.frostedViewController panGestureRecognized:sender];
}
3.側(cè)邊欄關(guān)閉和跳轉(zhuǎn)
//跳轉(zhuǎn)下一頁
-(void)actionOfTapRightEvent{
    /**
     關(guān)閉右側(cè)側(cè)邊欄
     */
    [self.frostedViewController hideMenuViewController];
    
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    REFInfoViewController *infoView=[[REFInfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}
4.當(dāng)視圖內(nèi)含有UIScrollView時(shí)胖翰,會(huì)導(dǎo)致側(cè)滑失效,解決方案之一可以繼承UIScrollView并實(shí)現(xiàn)如下:
/**
 *  重寫手勢(shì)切厘,如果是左滑萨咳,則禁用掉scrollview自帶的;右滑很少出現(xiàn)疫稿,此處未實(shí)現(xiàn)
 */
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]])
    {
        UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)gestureRecognizer;
        if([pan translationInView:self].x > 0.0f && self.contentOffset.x == 0.0f)
        {
            return NO;
        }
    }
    return [super gestureRecognizerShouldBegin:gestureRecognizer];
}

最后小demo附上:ViewDeckStudy 內(nèi)含ViewDeck和REFrostedViewController使用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末培他,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子遗座,更是在濱河造成了極大的恐慌舀凛,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件途蒋,死亡現(xiàn)場(chǎng)離奇詭異猛遍,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門懊烤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梯醒,“玉大人,你說我怎么就攤上這事腌紧∪紫埃” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵壁肋,是天一觀的道長(zhǎng)号胚。 經(jīng)常有香客問我,道長(zhǎng)浸遗,這世上最難降的妖魔是什么猫胁? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮跛锌,結(jié)果婚禮上杜漠,老公的妹妹穿的比我還像新娘。我一直安慰自己察净,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布盼樟。 她就那樣靜靜地躺著氢卡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晨缴。 梳的紋絲不亂的頭發(fā)上译秦,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音击碗,去河邊找鬼筑悴。 笑死,一個(gè)胖子當(dāng)著我的面吹牛稍途,可吹牛的內(nèi)容都是我干的阁吝。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼械拍,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼突勇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起坷虑,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤甲馋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后迄损,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體定躏,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了痊远。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垮抗。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖拗引,靈堂內(nèi)的尸體忽然破棺而出借宵,到底是詐尸還是另有隱情,我是刑警寧澤矾削,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布壤玫,位于F島的核電站,受9級(jí)特大地震影響哼凯,放射性物質(zhì)發(fā)生泄漏欲间。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一断部、第九天 我趴在偏房一處隱蔽的房頂上張望猎贴。 院中可真熱鬧,春花似錦蝴光、人聲如沸她渴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽趁耗。三九已至,卻和暖如春疆虚,著一層夾襖步出監(jiān)牢的瞬間苛败,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國(guó)打工径簿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留罢屈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓篇亭,卻偏偏與公主長(zhǎng)得像缠捌,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子暗赶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

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

  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,727評(píng)論 22 665
  • 友誼蹂随,如清風(fēng)似的輕輕吹進(jìn)了我心里十嘿,蕩起了一片片美麗浪花,又似細(xì)雨般一樣灑落心底岳锁,灌溉出一朵朵友誼之花绩衷。 那時(shí),正至...
    程佳平閱讀 439評(píng)論 0 6