美文网首页
QQ侧滑效果图示

QQ侧滑效果图示

作者: 他们谁 | 来源:发表于2018-07-26 20:18 被阅读0次

    效果图如下:

    前言

    左滑重点不在动画效果的实现,而在于左边视图事件响应后,怎么push进入主视图的NavigationController,如果主视图是TabBar的话,要获取当前TabBar的selecteItem,并push进入对应的导航容器中,正文以最为典型的TabBar作为Main主视图。

    实现步骤:

    1、首先实现工具类EVNSideSlideViewController,支持左滑和右滑,左视图-主视图-右视图,记得用的时候要将EVNSideSlideViewController做为你的根视图;

    2、左右视图的设计及主视图控制器的设计,按照原来做;

    3、使用单例类记录主视图TabBar的选择状态,以便于push到当前页面所在的NavigationController中;

    4、左右视图单击事件处理,详情见,正文的第三部分。

    下面的BaseViewController可以改成UIViewController

    EVNSideSlideViewController.h

    ////  EVNSideSlideViewController.h//  MMB-Saler////  Created by developer on 16/6/28.//  Copyright © 2016年 仁伯安. All rights reserved.//#import"BaseViewController.h"@interfaceEVNSideSlideViewController:BaseViewController{@privateUIImageView* imgBackground;CGFloatscalef;}@property(strong,nonatomic)UIViewController*leftViewController;@property(strong,nonatomic)UIViewController*mainViewController;@property(strong,nonatomic)UIViewController*righViewController;/**

    *  滑动速度系数,建议在[0.5, 1]之间,默认为0.5

    */@property(assign,nonatomic)CGFloatsideSlideSpeed;/**

    *  初始化,带有左右滑功能的视图

    *

    *  @param LeftViewController 左边设置的视图

    *  @param MainViewController 主视图,可以是TabBarController

    *  @param RighViewController 右滑显示的视图

    *  @param image              当前视图背景图

    *

    *  @return EVNSideSlideViewController object

    */- (instancetype)initWithLeftViewController:(UIViewController*)LeftViewController andMainViewController:(UIViewController*)MainViewController andRightViewController:(UIViewController*)RighViewController andBackgroundImage:(UIImage*)image;/**

    *  显示主视图控制器

    */- (void)showMainViewController;/**

    *  显示左视图控制器

    */- (void)showLeftViewController;/**

    *  显示右视图控制器

    */- (void)showRighViewController;@end

    EVNSideSlideViewController.m

    ////  EVNSideSlideViewController.m//  MMB-Saler////  Created by developer on 16/6/28.//  Copyright © 2016年 仁伯安. All rights reserved.//#import"EVNSideSlideViewController.h"@interfaceEVNSideSlideViewController()@end@implementationEVNSideSlideViewController- (instancetype)initWithLeftViewController:(UIViewController*)LeftViewController andMainViewController:(UIViewController*)MainViewController andRightViewController:(UIViewController*)RighViewController andBackgroundImage:(UIImage*)image{self= [superinit];if(self)    {        _sideSlideSpeed =0.5;        _leftViewController = LeftViewController;        _mainViewController = MainViewController;        _righViewController = RighViewController;UIImageView* imgview = [[UIImageViewalloc]initWithFrame:[UIScreenmainScreen].bounds];        [imgview setImage:image];        [self.view addSubview:imgview];    }returnself;}- (void)viewDidLoad{    [superviewDidLoad];/**

        * 添加滑动手势

        */UIPanGestureRecognizer*panGes = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(handlePan:)];    [_mainViewController.view addGestureRecognizer:panGes];    _leftViewController.view.hidden =YES;    _righViewController.view.hidden =YES;    [self.view addSubview:_leftViewController.view];    [self.view addSubview:_righViewController.view];    [self.view addSubview:_mainViewController.view];}- (void)didReceiveMemoryWarning {    [superdidReceiveMemoryWarning];// Dispose of any resources that can be recreated.}/**

    *  滑动手势

    *

    *  @param panGestureRecognizer 滑动手势

    */- (void)handlePan:(UIPanGestureRecognizer*)panGestureRecognizer{CGPointpoint = [panGestureRecognizer translationInView:self.view];    scalef = (point.x*_sideSlideSpeed + scalef);/**

        *  根据视图位置判断是左滑还是右边滑动

        */if(panGestureRecognizer.view.frame.origin.x >=0)    {        panGestureRecognizer.view.center =CGPointMake(panGestureRecognizer.view.center.x + point.x*_sideSlideSpeed,panGestureRecognizer.view.center.y);        panGestureRecognizer.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,1- scalef/1000,1- scalef/1000);        [panGestureRecognizer setTranslation:CGPointMake(0,0) inView:self.view];        _righViewController.view.hidden =YES;        _leftViewController.view.hidden =NO;    }else{        panGestureRecognizer.view.center =CGPointMake(panGestureRecognizer.view.center.x + point.x*_sideSlideSpeed,panGestureRecognizer.view.center.y);        panGestureRecognizer.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,1+ scalef/1000,1+ scalef/1000);        [panGestureRecognizer setTranslation:CGPointMake(0,0) inView:self.view];        _righViewController.view.hidden =NO;        _leftViewController.view.hidden =YES;    }/**

        *  有效手势判断、并调整相应的视图

        */if(panGestureRecognizer.state ==UIGestureRecognizerStateEnded)    {if(scalef >120*_sideSlideSpeed)        {            [selfshowLeftViewController];        }elseif(scalef < -120*_sideSlideSpeed)        {            [selfshowRighViewController];        }else{            [selfshowMainViewController];            scalef =0;        }    }}- (void)showMainViewController{    [UIViewbeginAnimations:nilcontext:nil];    _mainViewController.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);    _mainViewController.view.center =CGPointMake([UIScreenmainScreen].bounds.size.width/2.f, [UIScreenmainScreen].bounds.size.height/2.f);    [UIViewcommitAnimations];}- (void)showLeftViewController{    [UIViewbeginAnimations:nilcontext:nil];    _mainViewController.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,0.9,0.9);    _mainViewController.view.center =CGPointMake([UIScreenmainScreen].bounds.size.width *3/2.f -88.f, [UIScreenmainScreen].bounds.size.height/2.f);    [UIViewcommitAnimations];}- (void)showRighViewController{    [UIViewbeginAnimations:nilcontext:nil];    _mainViewController.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,0.9,0.9);    _mainViewController.view.center =CGPointMake(-[UIScreenmainScreen].bounds.size.width/2.f +88.f, [UIScreenmainScreen].bounds.size.height/2.f);    [UIViewcommitAnimations];}@end

    二、CommonHelper 单例记录TabBar的状态

    CommonHelper.h

    #import#import@interfaceCommonHelper:NSObject@property(strong,nonatomic)UIViewController*rootViewController; + (instancetype)shareInstance;- (void)setObjValue;@end

    CommonHelper.m

    #import"CommonHelper.h"staticid_instance;@implementationCommonHelper///**// *  只要系统中引用了该类,程序运行,就会主动调用load(不用手动调用,而且只会加载1次)// *///+ (void)load//{//    _instance = [[CommonHelper alloc] init];//}+ (instancetype)allocWithZone:(struct_NSZone *)zone{staticdispatch_once_tonceToken;dispatch_once(&onceToken, ^{        _instance = [superallocWithZone:zone];    });return_instance;} + (instancetype)shareInstance{staticdispatch_once_tonceToken;dispatch_once(&onceToken, ^{        _instance = [[selfalloc] init];    });return_instance;}- (id)copyWithZone:(NSZone*)zone{return_instance;}- (id)mutableCopyWithZone:(NSZone*)zone{return_instance;}// 设置当前window的根视图- (void)setObjValue{    [_instance setRootViewController:[[UIApplicationsharedApplication] keyWindow].rootViewController];}@end

    三、左、右视图点击事件触发写法

    - (void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{    CommonHelper *common = [CommonHelper shareInstance];    [common setObjValue];NSLog(@"%@",NSStringFromClass([common.rootViewControllerclass]));    EVNSideSlideViewController *sideSlideViewController = (EVNSideSlideViewController *)common.rootViewController;    [sideSlideViewController showMainViewController];//    NSLog(@"%@", NSStringFromClass(sideSlideViewController.mainViewController));BuyerTabbarCtrl *toolController = (BuyerTabbarCtrl *)sideSlideViewController.mainViewController;NSIntegerselectIndex = toolController.selectedIndex;//    NSLog(@"%@", NSStringFromClass(toolController.viewControllers[0]));// 关于AboutMaibeiViewController * aboutMaibeiViewController = [[AboutMaibeiViewController alloc] init];    aboutMaibeiViewController.hidesBottomBarWhenPushed =YES;    [toolController.viewControllers[selectIndex] pushViewController:aboutMaibeiViewController animated:YES];}

    @interface FirstViewController ()

    {

        NSArray *arr;

    }

    @property(nonatomic,strong)UIScrollView *sc1;

    @property(nonatomic,strong)UIScrollView *sc2;

    @property(nonatomic,strong)UIView *move;

    @end

    @implementation FirstViewController

    - (void)viewDidLoad

    {

        [super viewDidLoad];

        arr=@[@"新闻",@"体育",@"经济",@"生活",@"女性"];

        self.view.backgroundColor = [UIColor whiteColor];

        self.sc1=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 45)];

        _sc1.contentSize=CGSizeMake(arr.count/5*self.view.frame.size.width, 30);

        _sc1.userInteractionEnabled=YES;

        _sc1.tag=2;

        _sc1.delegate = self;

        _sc1.pagingEnabled=YES;

        _sc1.bounces=NO;

        _sc1.showsVerticalScrollIndicator=NO;

        _sc1.showsHorizontalScrollIndicator=NO;

        [self.view addSubview:_sc1];

        for (int i=0; i

    i++) {

            UIButton *but=[[UIButton alloc] initWithFrame:CGRectMake(i*self.view.frame.size.width/5, 0, self.view.frame.size.width/5, 44)];

            [butsetTitle:arr[i] forState:UIControlStateNormal];

            [butsetTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

            if (i==1) {

                [butsetTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];

            }

            but.tag= i + 100;

            [butaddTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];

            [_sc1 addSubview:but];

            self.sc2=[[UIScrollView alloc] initWithFrame:CGRectMake(0,45+64, self.view.frame.size.width, self.view.frame.size.height-45-64-49)];

            _sc2.contentSize=CGSizeMake(self.view.frame.size.width*arr.count, 0);

                _sc2.userInteractionEnabled=YES;

                _sc2.pagingEnabled=YES;

                _sc2.tag=200;

                _sc2.bounces=NO;

                _sc2.delegate=self;

                _sc2.showsVerticalScrollIndicator=NO;

                _sc2.showsHorizontalScrollIndicator=NO;

            for (int i=0; i

    i++) {

                UIView *view=[[UIView alloc] initWithFrame:CGRectMake(i*self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height-40-45-64)];

                view.backgroundColor=[UIColor clearColor];

                if (i==1) {

                    UITableView *table=[[UITableView alloc] initWithFrame:self.view.frame];

                    table.delegate=self;

                    table.dataSource=self;

                    table.rowHeight=80;

                    [viewaddSubview:table];

                }

                [_sc2 addSubview:view];

            }

            [self.view addSubview:_sc2];

        }

        _move = [[UIView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 5.0, 44 + 62, self.view.frame.size.width  /5.0, 2)];

        _move.backgroundColor =

    [UIColor orangeColor];

        [self.view addSubview:_move];

    }

    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

    {

        return 20;

    }

    -(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

    {

        static NSString*ID=@"cell";

        UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];

        if (cell==nil) {

            cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];

        }

        cell.textLabel.text=@"我爱你";

        cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;

        return cell;

    }

    -(void)click:(UIButton *)but

    {

        _move.frame= CGRectMake(self.view.frame.size.width/5.0*(but.tag - 100), 44+62, self.view.frame.size.width/5.0, 2);

        for (int i=0; i

    i++) {

            UIButton *button=[self.view viewWithTag:i+100];

            if (but.tag==button.tag) {

                [buttonsetTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];

                [_sc2 setContentOffset:CGPointMake(((but.tag-100)*self.view.frame.size.width), 0)];

            }

            else

            {

                [buttonsetTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

            }

        }

    }

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView

    {

        if (scrollView.tag==200) {

            _move.frame=CGRectMake(scrollView.contentOffset.x/self.view.frame.size.width*(self.view.frame.size.width/5), 44+62, self.view.frame.size.width/5, 2);

            for (int i=0; i

    i++) {

                UIButton * button = [self.view viewWithTag:100+i];

                if((button.tag-100) == (scrollView.contentOffset.x/self.view.frame.size.width)){

                    [buttonsetTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];

                }else{

                    [buttonsetTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

                }

            }

        }

    }

    @end

    相关文章

      网友评论

          本文标题:QQ侧滑效果图示

          本文链接:https://www.haomeiwen.com/subject/aakimftx.html