美文网首页SwiftSwift专题iOS动画
Swift 版本很好的卡片切换效果基于ZLSwipeableVi

Swift 版本很好的卡片切换效果基于ZLSwipeableVi

作者: 夏天然后 | 来源:发表于2016-04-15 23:58 被阅读1656次

    前言:在这篇文章你可以学到,一些基本的Swift语法, 基本UI控件闭包等.

    实际的效果,比gif图的效果好很多.


    卡片切换.gif
    首先需要导入ZLSwipeableView

    pod 'ZLSwipeableView', '~> 0.0.8'

    下面是代码
    // 1. 签协议
    class ViewController: UIViewController, ZLSwipeableViewDelegate, ZLSwipeableViewDataSource {
    // 2, 随便定义一个标题数组
    let titles = [
        "Teame",
        "Sea",
        "Em",
        "Nes",
        "Pver",
        "Beole",
        "Amst",
        "Wisria",
        "Whalt",
        "Midue",
        "Suwer",
        "Orage",
        ]
     var index = 0
     var xtSwipeableView: ZLSwipeableView?
    
    在viewDidLoad
            xtSwipeableView = ZLSwipeableView.init()
            xtSwipeableView!.frame = CGRectMake(55, 110, self.view.frame.size.width - 110, self.view.frame.size.height - 220)
            xtSwipeableView!.delegate = self
            xtSwipeableView!.dataSource = self
            xtSwipeableView!.translatesAutoresizingMaskIntoConstraints = false
            self.view.addSubview(xtSwipeableView!)
            self.setButton()
    
    创建 ⬆️,⬇️,⬅️,btn
    func setButton()
        {
            var items = ["上", "下", "左", "右"]
            for i in 0...3{
                let btn = UIButton.init(type: UIButtonType.Custom)
                self.view.addSubview(btn)
                btn.frame = CGRectMake(50 + 60 * (CGFloat)(i), self.view.frame.size.height - 90, 50, 50)
                btn.setTitle(items[i], forState: UIControlState.Normal)
                btn.addTarget(self, action: "handle:", forControlEvents: UIControlEvents.TouchUpInside)
                btn.tag = i
            }
        }
    
    btn点击方法
    func handle(btn: UIButton)
        {
            let tagType = btn.tag
            switch tagType{
            case 0:
                xtSwipeableView!.swipeTopViewToUp()
            case 1:
                xtSwipeableView!.swipeTopViewToDown()
            case 2:
                xtSwipeableView!.swipeTopViewToLeft()
            case 3:
                xtSwipeableView!.swipeTopViewToRight()
            default:
                print("....")
            }
        }
    
    loadViews
    override func viewDidLayoutSubviews() {
            xtSwipeableView!.loadViewsIfNeeded()
        }
    
    ZLSwipeableViewDataSource
    func nextViewForSwipeableView(swipeableView: ZLSwipeableView!) -> UIView! {
            if self.index >= self.titles.count {
                self.index = 0
            }
            let view = CardView.init(frame: swipeableView.bounds)
            view.backgroundColor = UIColor.purpleColor()
            view.textLabel?.text = self.titles[index]
            // 闭包回调
            view .initWithClosure(addressThatTakesAClosure)
            self.index++
            return view
        }
    
    func addressThatTakesAClosure(string:String) ->Void{
            // do you something
            print("\(string)")
        }
    
    CardView类的实现(在这你可以定义你所需要的)
    class CardView: UIView {
            typealias sendValueClosure = (string:String)->Void
            /// 声明一个Closure(闭包)
            var myClosure:sendValueClosure?
            /// 下面这个方法需要传入上个界面的someFunctionThatTakesAClosure函数指针
            func initWithClosure(closure:sendValueClosure?){
                myClosure = closure
            }
            ///
            var imagesView: UIImageView?
            var textLabel : UILabel?
            var btn: UIButton?
            ///
            override init(frame: CGRect) {
                super.init(frame: frame)
                self.setView(frame)
            }
            required init?(coder aDecoder: NSCoder) {
                fatalError("init(coder:) has not been implemented")
            }
            /// setView
            func setView(frame: CGRect){
                // Shadow
                self.layer.shadowColor = UIColor.lightGrayColor().CGColor
                self.layer.shadowOpacity = 0.33
                self.layer.shadowOffset = CGSizeMake(0, 1.5)
                self.layer.shadowRadius = 4.0
                self.layer.shouldRasterize = true
                self.layer.rasterizationScale = UIScreen.mainScreen().scale
                
                // Corner Radius
                self.layer.cornerRadius = 10.0
                
                // Custom view
                imagesView = UIImageView.init(frame: CGRectMake(5, 5, self.frame.size.width - 10, self.frame.size.height / 2))
                imagesView!.backgroundColor = UIColor.whiteColor()
                self.addSubview(imagesView!)
                
                
                textLabel = UILabel.init(frame: CGRectMake(20, imagesView!.frame.size.height + 10, 120, 20))
                textLabel!.backgroundColor = UIColor.lightGrayColor()
                self.addSubview(textLabel!)
                
                btn = UIButton.init(type: UIButtonType.Custom)
                btn?.setTitle("BUTTON", forState: UIControlState.Normal)
                btn?.frame = CGRectMake(20, (textLabel?.frame.origin.y)! + 20 + 10, 100, 50)
                self.addSubview(btn!)
                btn?.addTarget(self, action: "btnClick", forControlEvents: UIControlEvents.TouchUpInside)
                
            }
            /// 这里实现了btn点击方法的回调, 回到控制器(VC),可实现跳转
            func btnClick()
            {
                if myClosure != nil{
                    self.myClosure!(string: "hello World")
                }
            }
        }
    
    

    总结: 希望看到这篇文章对读者有一定Swift语言的帮助, 且完成卡片切换效果需求. 喜欢请点赞. 稍候会把项目传到github.今天有点晚了.睡了 呼呼. -.-


    demo参考(Objective-C & Swift) :
    https://github.com/summerxx27/XSmomoStyle
    觉得还可以请点个赞, 我要申请微博加V. 点个赞吧客官 -.-

    ---------------------------------------

    走心文章, 值得点赞 ---文/夏天然后
    微博-点我@夏天是个大人了 || QQQ: 498143780

    相关文章

      网友评论

      • 58b3cc481d0a:请问想要改变卡片滑到一定程度松手后卡片有一定的回弹效果,该修改哪里呢
        夏天然后:@Hunter_lmz :smiley::smiley::smiley:加油
        58b3cc481d0a:@夏天的Coding世界 已解决,谢谢^_^
        夏天然后:@Hunter_lmz 并不是很明白你的意思、具体看看作者的源码、是否有相关描述吧、:smile::smile::smile:
      • 少年先疯队长:谢谢作者
        夏天然后:@少年先疯队长 谢谢支持

      本文标题:Swift 版本很好的卡片切换效果基于ZLSwipeableVi

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