仿QQ左侧抽屉 Swift编写

原创 2015年09月15日 09:25:14
//
//  RootViewController.swift
//  抽屉_Swift
//
//  Created by zhangqiang on 15/7/30.
//  Copyright (c) 2015年 zhangqiang. All rights reserved.
//

import UIKit

let kScreenSize         =            UIScreen.mainScreen().bounds.size
let kScreenWidth        =            UIScreen.mainScreen().bounds.size.width
let kScreenHeight       =            UIScreen.mainScreen().bounds.size.height
let kMainScale:CGFloat  =            0.8
let kRightContentWidth:CGFloat =     100
let kLeftWidth:CGFloat  =            200

class RootViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
    var backImage:UIImageView!
    var tableView:UITableView?                          //左侧视图
    var backView:UIView?                                //蒙板
    var currentTranslateX:CGFloat?
    var contentView:UIView?                             //当前显示的视图
    
    var currentViewController:UIViewController = UIViewController(){//当前显示的控制器
        willSet(newCurrentViewController){
            self.currentViewController.view.removeFromSuperview()
        }
        didSet(currentViewController){
            //不能每次都添加手势,后面得改,可以创建一个UIView(rootView)作为替换,更换控制器后就将视图加到rootView上
            self.contentView!.addSubview(self.currentViewController.view)
        }
    }
    
    var viewControllers:Array<UIViewController> = []{   //子控制器
        //属性监听,相当于OC中的setter方法
        willSet(newViewControllers){
            
        }
        didSet(newViewControllers){
            for viewController:UIViewController in newViewControllers {
                self.addChildViewController(viewController)
            }
        }
    }
    
    func closeLeftView(){
        //关闭左侧视图
        UIView.transitionWithView(self.contentView!, duration: 0.15, options: UIViewAnimationOptions.BeginFromCurrentState, animations: { () -> Void in
            
            self.contentView!.transform = CGAffineTransformMakeTranslation(0, 0)
            self.updateFrameWithTransX(0, maxTrans: kScreenWidth - 100 / kMainScale)
            
            }, completion: nil)
        
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.addViews()
        self.currentViewController = self.viewControllers[0]
        
    }
    
    func addViews(){
        
        backImage = UIImageView(frame: self.view.bounds)
        backImage.image = UIImage(named: "backImage")
        backImage.userInteractionEnabled = true
        self.view.addSubview(backImage)
        
        createLeftView()
        
        self.backView = UIView(frame: self.view.bounds)
        self.backView!.backgroundColor = UIColor.blackColor()
        self.view.addSubview(self.backView!)
        
        let pan:UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: "showLeftView:")
        self.contentView = UIView(frame: self.view.bounds)
        self.contentView!.addGestureRecognizer(pan)
        self.view.addSubview(self.contentView!)
        
    }
    
    // MARK: 私有方法
    func createLeftView(){
        var leftView = UIView(frame: CGRectMake(0, 0, kScreenWidth - kRightContentWidth, kScreenHeight))
        
        var headerView = UIView(frame: CGRectMake(0, 20, self.view.bounds.size.width, 150))
        headerView.backgroundColor = UIColor.clearColor()
        headerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "tapActon"))
        
        self.tableView = UITableView(frame: CGRectMake(0, CGRectGetMaxY(headerView.frame), self.view.bounds.size.width, self.view.bounds.size.height - 100 - CGRectGetMaxY(headerView.frame)), style: UITableViewStyle.Plain)
        self.tableView!.delegate = self
        self.tableView!.dataSource = self
        self.tableView!.backgroundColor = UIColor.clearColor()
        self.tableView!.separatorStyle = UITableViewCellSeparatorStyle.None
        
        self.view.addSubview(leftView)
        self.view.addSubview(headerView)
        self.view.addSubview(self.tableView!)
    }
    
    func showLeftView(sender:UIPanGestureRecognizer){
        
        if sender.state == UIGestureRecognizerState.Began {
            currentTranslateX = self.contentView!.transform.tx
             println(currentTranslateX)
        }
        
        if sender.state == UIGestureRecognizerState.Changed {
            var point:CGPoint = sender.translationInView(self.contentView!)
            var transX:CGFloat = point.x + currentTranslateX!
           
            if transX > 0 {
            //根据视图的位置计算缩放比例
                var scale:CGFloat = 1 - transX * (1 - kMainScale) / (kScreenWidth - kRightContentWidth / kMainScale)
                sender.view!.transform = CGAffineTransformMake(scale, 0, 0, scale, transX, 0)
//                self.leftVC!.updateFrameWithTransX(transX,kScreenWidth - 100 / kMainScale)
                self.updateFrameWithTransX(transX, maxTrans: kScreenWidth - 100 / kMainScale)
                //设置不超过临界点 视图左边离屏幕边界为100(最终偏移量为kScreenWidth - 100 / kMainScale)
                if transX >= kScreenWidth - 100 / kMainScale{
                    sender.view!.transform = CGAffineTransformMake(kMainScale, 0, 0, kMainScale, kScreenWidth - kRightContentWidth / kMainScale, 0)
                }

            }else{
                sender.view!.transform = CGAffineTransformMakeTranslation(0, 0)
            }
        }
        if sender.state == UIGestureRecognizerState.Ended {
            if sender.view!.frame.origin.x >= kScreenWidth * 0.3 {
                UIView.transitionWithView(sender.view!, duration: 0.15, options: UIViewAnimationOptions.BeginFromCurrentState, animations: { () -> Void in
                    sender.view!.transform = CGAffineTransformMake(kMainScale, 0, 0, kMainScale, kScreenWidth - kRightContentWidth / kMainScale, 0)
                    self.updateFrameWithTransX(kScreenWidth - 100 / kMainScale, maxTrans: kScreenWidth - 100 / kMainScale)
                }, completion: { (Bool) -> Void in
                    
                })
            }else{
                UIView.transitionWithView(sender.view!, duration: 0.15, options: UIViewAnimationOptions.BeginFromCurrentState, animations: { () -> Void in
                    sender.view!.transform = CGAffineTransformMakeTranslation(0, 0)
                    }, completion: nil)
            }
        }
    }
    
    func updateFrameWithTransX(transX:CGFloat,maxTrans:CGFloat){
        //根据主视图的偏移量和最大偏移量计算左侧视图的缩放比例
        var scale:CGFloat = (1-kMainScale) * transX / maxTrans + kMainScale
        //kLeftWidth为超出左侧屏幕的宽度
        var transX1:CGFloat =  -(kScreenWidth / 2 + kLeftWidth) * scale + kScreenWidth / 2 + kLeftWidth
        //计算透明度
        var backAlpha:CGFloat = -(1 / (1 - kMainScale)) * scale + (1 / (1 - kMainScale))
        println(transX1)
        if(scale <= 1){
            self.tableView!.transform = CGAffineTransformMake(scale, 0, 0, scale, -transX1, 0);
            self.backView!.alpha = backAlpha
        }
    }
    
    // MARK: UITableViewDataSource
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
        return 10
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        let identifier:String = "Mycell"
        var cell:UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell
        if (cell == nil) {
            cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: identifier)
            cell!.backgroundColor = UIColor.clearColor()
        }
        cell!.textLabel?.text = "测试"
        cell!.textLabel?.textColor = UIColor.whiteColor()
        cell!.selectionStyle = UITableViewCellSelectionStyle.None
        return cell!
    }
    
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
        self.currentViewController = self.viewControllers[indexPath.row]
        self.closeLeftView()
        
    }
    
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 60
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

android 左侧抽屉效果(根据QQ改编)

android 左侧抽屉效果

ios swift 左侧抽屉简单实现

swift 右滑抽屉实现

iOS界面-仿网易新闻左侧抽屉式交互…

本文转自:http://blog.csdn.net/totogo2010/article/details/8637430 1、介绍 有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ,...
  • cc996
  • cc996
  • 2017年04月06日 18:09
  • 479

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

1、介绍有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现,上面的UINavigation如何嵌进去。可能不少人有这样的需求,现在花了些时间...

iOS界面-仿网易新闻左侧抽屉式交互

http://blog.csdn.net/totogo2010/article/details/8622400 1、介绍     用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,...

iOS界面-仿网易新闻左侧抽屉式交互

iOS界面-仿网易新闻左侧抽屉式交互 1、介绍     用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导航栏会跟着拖动出来,新闻内容列表会拉到最右侧。像一个抽屉拉出来一样。很...

iOS界面-仿网易新闻左侧抽屉式交互

http://blog.csdn.net/totogo2010/article/details/8622400 1、介绍     用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导...

OS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

1、介绍 有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现, 上面的UINavigation如何嵌进去。可能不少人有这样的需求...

iOS界面-仿网易新闻左侧抽屉式交互

iOS界面-仿网易新闻左侧抽屉式交互 1、介绍     用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导航栏会跟着拖动出来,新闻内容列表会拉到最右侧。像一个抽屉拉出来一样。很...
  • yxxxiao
  • yxxxiao
  • 2015年11月11日 15:30
  • 677

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

转自: http://blog.csdn.net/totogo2010/article/details/8637430 1、介绍 有的博友看了上篇博文 iOS界面-仿网易新闻左...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿QQ左侧抽屉 Swift编写
举报原因:
原因补充:

(最多只允许输入30个字)