iOS swift3.0 抽屉式侧滑布局的实现

        今天给大家讲解的这个东西呢，就是模仿手机QQ的侧滑抽屉式布局，如下图所示：

        首先我们的实现思路是用两层叠在一起的UIView来实现，当点击表层view的左上角按钮，或者手指向右滑动时，表层view向右移动一段距离，然后漏出底层的view，向左滑动之后表层view再回到最初的位置，具体代码如下，详情请看注释：

//

//  Created by 松洋 on 16/9/2.

//  Copyright © 2016年 com.du. All rights reserved.

//

import UIKit

class ChouTiViewController: UIViewController  {

     var swipeLeft :UISwipeGestureRecognizer!;   // 左滑手势

     var swipeRight :UISwipeGestureRecognizer!;  // 右滑手势

    

    @IBOutletweak var bottomView:UIView!        // 底层view

    @IBOutletweak var aboveView:UIView!         // 表层view

    var flag =0;

    overridefunc viewDidLoad() {

        

        super.viewDidLoad()

/＊

＊ 下面这段代码将滑动事件注册到我们的表层的view中，就是只有对表层的view滑动，才会触发滑动效果

＊／

        swipeLeft =UISwipeGestureRecognizer(target:self, action: #selector(ChouTiViewController.swipe(_:)))

        swipeLeft.direction =UISwipeGestureRecognizerDirection.left

        self.aboveView.addGestureRecognizer(swipeLeft)

        swipeRight =UISwipeGestureRecognizer(target:self, action: #selector(ChouTiViewController.swipe(_:)))

        swipeRight.direction =UISwipeGestureRecognizerDirection.right

        self.aboveView.addGestureRecognizer(swipeRight)

    }

     

      /＊

       ＊   注册的划定监听罪行的方法，

       ＊／    

     

    func swipe(_ recognizer:UISwipeGestureRecognizer){

        

        if recognizer.direction ==UISwipeGestureRecognizerDirection.left{

            UIView.animate(withDuration:0.5, animations: {

            if(self.flag%2 != 0){

                self.aboveView.center.x = self.view.bounds.width/2;

                self.flag+=1;

            }

          })

            

        }elseif recognizer.direction ==UISwipeGestureRecognizerDirection.right{

            UIView.animate(withDuration:0.5, animations: {

            if(self.flag%2 == 0){

                self.aboveView.center.x = self.aboveView.center.x+self.view.bounds.width/1.5;

                self.flag+=1;

            }

          })

        }

    }

    

    overridefunc didReceiveMemoryWarning() {

        

        super.didReceiveMemoryWarning()

    }

      /＊

       ＊  定义全局变量flag，每次通过flag，表层view来判断执行向左还是向右移动的动画，然后执行flag＋1，这样保证我们点击左上角按钮        ＊  的时候，奇数情况下就是关闭抽屉，偶数情况则为打开抽屉

       ＊／    

    @IBActionfunc openDraw(_ sender:AnyObject) {     

        UIView.animate(withDuration:0.5, animations: {

            if(self.flag%2 == 0){

              self.aboveView.center.x = self.aboveView.center.x+self.view.bounds.width/1.5;

            }else{

              self.aboveView.center.x = self.view.bounds.width/2;

            }

            self.flag+=1;

        })   

    }    

}

 给大家看看效果哈，只是简单的做了个布局：