UI实现简单的侧滑效果

UI实现简单的侧滑效果

闲来无事,研究了一下类似于QQ的一个简单的侧滑效果,侧滑效果图如下:

 

 

实现起来其实很简单,只有四个UIViewController.一个实现所有功能的SlidersViewController,和三个可视化的中间视图,左侧视图和右侧视图.

主要说一下SlidersViewController的构建过程:

1..h文件中,构建属性和初始化方法

@interfaceSlidersViewController : UIViewController
{
CGFloat speedf;//这里定义一个滑动速度的实例变量
CGFloat scalef;   //移动距离
}
 
@property (nonatomic, retain) UIViewController*centerVC;
@property (nonatomic, retain) UIViewController *leftVC;
@property (nonatomic, retain) UIViewController *rightVC;
 
- (id)initWithCenter:(UIViewController *)centerVCwithLeft:(UIViewController *)leftView withRight:(UIViewController *)rightVC;
 
@end

 

2. .m文件中实现方法

首先是初始化方法

- (id)initWithCenter:(UIViewController *)centerVCwithLeft:(UIViewController *)leftVC withRight:(UIViewController *)rightVC
{
if (self) {
   //滑动速度默认是0.5
        _speed = 0.5;
        self.centerVC = centerVC;
        self.leftVC = leftVC;
        self.rightVC = rightVC;
        //拖拽手势 让视图随着你手指移动的位置移动
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
        [self.view addGestureRecognizer:pan];
       
        //单击手势 单击中间视图让它恢复位置
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
        tap.numberOfTapsRequired = 1;
        [self.view addGestureRecognizer:tap];
        //先隐藏左右视图
        self.leftVC.view.hidden = YES;
        self.rightVC.view.hidden = YES;
       
        [self.view addSubview:leftVC.view];
        [self.view addSubview:centerVC.view];
        [self.view addSubview:rightVC.view];
    }
    return self;
}

这里可以稍微去了解一下UIPanGestureRecognizer的用法,便于理解下面拖拽方法的代码.

然后是拖拽手势的方法实现:

- (void) panAction: (UIPanGestureRecognizer *)rec{
   <p align="left">//该方法返回在横坐标上、纵坐标上拖动了多少像素,因为拖动起来一直是在递增，所以每次都要用setTranslation:方法制0这样才不至于不受控制般滑动出视图</p>    CGPoint point = [rec translationInView:self.view];
   
    scalef = (point.x*speedf+scalef); //滑动手势在x轴方向移动的距离
 
    //根据视图位置判断是左滑还是右边滑动
    if (rec.view.frame.origin.x>=0){//右滑
        NSLog(@"x:%.2f",rec.view.frame.origin.x);
        rec.view.center = CGPointMake(rec.view.center.x + point.x*speedf,rec.view.center.y);
        rec.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1-scalef/1000,1-scalef/1000);
        [rec setTranslation:CGPointMake(0, 0) inView:self.view];
       
        righControl.view.hidden = YES;
        leftControl.view.hidden = NO;
       
    }
    else//左滑
    {
        NSLog(@"x:%.2f",rec.view.frame.origin.x);
         //移动
        rec.view.center = CGPointMake(rec.view.center.x + point.x*speedf,rec.view.center.y);
         //缩小
        rec.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1+scalef/1000,1+scalef/1000);
        [rec setTranslation:CGPointMake(0, 0) inView:self.view];
   
       
        righControl.view.hidden = NO;
        leftControl.view.hidden = YES;
    }
 
   
   
    //手势结束后修正位置
    if (rec.state == UIGestureRecognizerStateEnded) {
        if (scalef>140*speedf){
            [self showLeftView];
        }
        else if (scalef<-140*speedf) {
            [self showRighView];        }
        else
        {
            [self showMainView];
            scalef = 0;
        }
    }
 
}

继续单击手势的实现方法:

-(void) tapAction:(UITapGestureRecognizer *)tap{
   
    if (tap.state == UIGestureRecognizerStateEnded) {
        [UIView beginAnimations:nil context:nil];
         //恢复原来的大小
        tap.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);
        tap.view.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2,[UIScreen mainScreen].bounds.size.height/2);
        [UIView commitAnimations];
        scalef = 0;
 
    }
 
}

最后是上面调用的调整视图位置的方法的实现:

//恢复位置
-(void)showMainView{
    [UIView beginAnimations:nil context:nil];
    mainControl.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);
    mainControl.view.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2,[UIScreen mainScreen].bounds.size.height/2);
    [UIView commitAnimations];
}
 
//显示左视图
-(void)showLeftView{
    [UIView beginAnimations:nil context:nil];
    mainControl.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.8,0.8);
    mainControl.view.center = CGPointMake(340,[UIScreen mainScreen].bounds.size.height/2);
    [UIView commitAnimations];
 
}
 
//显示右视图
-(void)showRighView{
    [UIView beginAnimations:nil context:nil];
    mainControl.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.8,0.8);
    mainControl.view.center = CGPointMake(-60,[UIScreen mainScreen].bounds.size.height/2);
    [UIView commitAnimations];
}

 

3.对左中右三个视图控制器做你想要显示的修改,我的这个demo里只改变了背景颜色

4.在AppDelegate.m中初始化

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    MainViewController *mianVC = [[MainViewController alloc]init];
    LeftViewController *leftVC = [[LeftViewController alloc]init];
    RightViewController *rightVC = [[RightViewController alloc]init];
    WWSideslipViewController *rootVC = [[WWSideslipViewController alloc]initWithLeftView:leftVC andMainView:mianVC andRightView:rightVC andBackgroundImage:[UIImage imageNamed:@"64248310.jpg"]];
    self.window.rootViewController = rootVC;
    return YES;
}

到此这个简单的侧滑效果就实现了,这个demo非常简单,还有很多需要扩充的地方,例如:侧滑过去之后,单击左(右)视图也可以使中间视图恢复位置,实现思路和点击中间视图恢复位置类似,实现方法可以写在SlidersViewController中,也可以写在左右视图控制器自己的类中.