- 首先蜕乡,效果圖
qq側(cè)邊欄滑動.gif
實現(xiàn)思路:
- 基本布局: 左邊自定義一個View,右邊的主視圖是TabBarVc梗夸,然后這兩個添加在根視圖上层玲,并且設(shè)置TabBarVC成為根視圖控制器的子視圖(方便TabBarVC接受事件,并處理事件)
- 具體操作: 給根視圖控制器添加一個拖拽手勢反症,通過判斷手勢是否結(jié)束和拖拽的偏移量是否大于屏幕寬的一半(這個自己定義界限)來決定怎么改變左右view的形變屬性
思路圖.png
- 具體代碼
//
// RootViewController.m
// QQ側(cè)邊欄效果
//
// Created by liyang on 16/8/8.
// Copyright ? 2016年 liyang. All rights reserved.
//
#import "RootViewController.h"
#import "MainViewController.h"
#import "LeftView.h"
#define kAnimateDuration 0.5
#define kOffset_x self.view.frame.size.width * 3 / 4 // 偏移量
@interface RootViewController ()
@property (nonatomic, strong) LeftView *leftView;
@property (nonatomic, strong) UIButton *coverView;
@end
@implementation RootViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self setupUI];
}
- (void)setupUI
{
LeftView *leftView = [LeftView leftView];
leftView.frame = CGRectMake(-kOffset_x, 0, kOffset_x, self.view.frame.size.height);
[self.view addSubview:leftView];
self.leftView = leftView;
MainViewController *mainVc = [[MainViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:mainVc];
mainVc.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"左側(cè)按鈕" style:UIBarButtonItemStylePlain target:self action:@selector(leftBarBtn:)];
UITabBarController *barVc = [[UITabBarController alloc] init];
[barVc addChildViewController:nav];
[self addChildViewController:barVc];
[self.view addSubview:barVc.view];
nav.tabBarItem.title = @"首頁";
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panTheView:)];
[self.view addGestureRecognizer:pan];
}
/**
* 給主視圖添加一個按鈕擋板
*
* @param view 視圖
*/
- (void)addCoverToView:(UIView *)view
{
UIButton *cover = [[UIButton alloc] initWithFrame:view.bounds];
[cover addTarget:self action:@selector(coverPressed:) forControlEvents:UIControlEventTouchUpInside];
[view addSubview:cover];
self.coverView = cover;
}
// 點(diǎn)擊了coverView
- (void)coverPressed:(UIButton *)sender
{
[sender removeFromSuperview];
UINavigationController *nav = [self.childViewControllers firstObject];
[UIView animateWithDuration:kAnimateDuration animations:^{
// clear transform
nav.view.transform = CGAffineTransformIdentity;
self.leftView.transform = CGAffineTransformIdentity;
}];
}
// navBar上的左側(cè)按鈕
- (void)leftBarBtn:(UIBarButtonItem *)sender
{
UINavigationController *nav = [self.childViewControllers firstObject];
[UIView animateWithDuration:kAnimateDuration animations:^{
// animation of View controller
UIView *view = nav.view;
// add cover
[self addCoverToView:view];
view.transform = CGAffineTransformMakeTranslation(kOffset_x, 0);
// animation of left menu
self.leftView.transform = CGAffineTransformMakeTranslation(kOffset_x, 0);
}];
}
// 主視圖上的拖拽手勢
- (void)panTheView:(UIPanGestureRecognizer *)sender
{
UINavigationController *nav = [self.childViewControllers firstObject];
UIView *view = nav.view;
CGPoint translation = [sender translationInView:self.view];
CGFloat width = self.view.frame.size.width;
// 判斷此時手勢是否結(jié)束了
if (sender.state == UIGestureRecognizerStateEnded) {
// 結(jié)束
// 判斷偏移量是否大于屏幕寬度的一半
if (translation.x > width/2) {
// 大于的話辛块,改變左右的偏移量到指定位置
[UIView animateWithDuration:kAnimateDuration animations:^{
NSLog(@"動畫進(jìn)行中");
view.transform = CGAffineTransformMakeTranslation(kOffset_x, 0);
// animation of left menu
self.leftView.transform = CGAffineTransformMakeTranslation(kOffset_x, 0);
} completion:^(BOOL finished) {
NSLog(@"動畫完成");
[self addCoverToView:view];
}];
}else{
// 沒有大于,清除偏移量
[UIView animateWithDuration:kAnimateDuration animations:^{
// clear transform
nav.view.transform = CGAffineTransformIdentity;
self.leftView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
// 移除coverView
if (self.coverView) {
[self.coverView removeFromSuperview];
}
}];
}
}else{
// 手勢動作還沒有結(jié)束
// 判斷 偏移量有沒有大于kOffset_x
if (translation.x <= kOffset_x && translation.x > 0){
// 不大于kOffset_x,并且偏移量是正的铅碍,左右偏移量隨著拖拽改變
self.leftView.transform = CGAffineTransformMakeTranslation(translation.x, 0);
view.transform = CGAffineTransformMakeTranslation(translation.x, 0);
}else if (translation.x < 0){
// 此時小于0,說明往左滑動润绵,用戶是要關(guān)閉leftView,我們清空形變
[UIView animateWithDuration:kAnimateDuration animations:^{
self.leftView.transform = CGAffineTransformIdentity;
view.transform = CGAffineTransformIdentity;
}];
}
}
}
@end