Swift 版本很好的卡片切换效果基于ZLSwipeableView
前言:在这篇文章你可以学到,一些基本的Swift
语法, 基本UI控件闭包
等.
实际的效果,比gif图的效果好很多.
![](http://upload-images.jianshu.io/upload_images/1506501-adc0362731f1ddd5.gif?imageMogr2/auto-orient/strip)
卡片切换.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/Zhangjingwang1993/XSmomoStyle
觉得还可以请点个赞, 我要申请微博加V. 点个赞吧客官 -.-
个人技术博客站欢迎您
文/夏天然后(简书作者)
原文链接:http://www.jianshu.com/p/734962c9bbed
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
原文链接:http://www.jianshu.com/p/734962c9bbed
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。