swift详解之二十八---------自定义下拉刷新

概述swift详解之二十八———自定义下拉刷新 好久不写博客了 ，最近比较忙。swift学习稍微搁置了，昨天看了AppCoda的自定义下拉刷新 ， 挺有心意的，也很简单。就顺便写写，在它的基础上添加了，下拉拉伸。OK先看下效果，基本都是按照它的思路实现的。 下拉的时候，从没有到慢慢的显示出来，再到拉长。 首先，创建一个single ViewController的项目 。然后在Main.storyboa swift详解之二十八———自定义下拉刷新

好久不写博客了 ，最近比较忙。swift学习稍微搁置了，昨天看了AppCoda的自定义下拉刷新 ， 挺有心意的，也很简单。就顺便写写，在它的基础上添加了，下拉拉伸。OK先看下效果，基本都是按照它的思路实现的。

下拉的时候，从没有到慢慢的显示出来，再到拉长。

首先，创建一个single VIEwController的项目 。然后在Main.storyboard上拖一个tableVIEw。 四边的约束都设置成 0 。

在VIEwController中声明 @IBOutlet weak var tb:UItableVIEw! ，然后再在 Main.storyboard里面连线 。

右击就能看到这个菜单 ， 点击tb旁边的空心圆，拖到tableVIEw上就行了。

然后就是造数据，让我们的VIEwController实现两个协议 ，其实这写都是UItablevIEw的基本使用 。不再赘述可以看我前面关于UItableVIEw的文章。

class VIEwController: UIVIEwController,UItableVIEwDataSource,UItableVIEwDelegate

//声明var dataArr = ["第一行","第二行","第三行","第四行","第五行"]//vIEwDIDLoad中 tb.delegate = self tb.dataSource = self

func numberOfSectionsIntableVIEw(tableVIEw: UItableVIEw) -> Int {        return 1;    }    func tableVIEw(tableVIEw: UItableVIEw,cellForRowAtIndexPath indexPath: NSIndexPath) -> UItableVIEwCell {        let cell = tableVIEw.dequeueReusableCellWithIDentifIEr("Cell",forIndexPath: indexPath)        cell.textLabel!.text = dataArr[indexPath.row]        return cell    }    func tableVIEw(tableVIEw: UItableVIEw,numberOfRowsInSection section: Int) -> Int {        return dataArr.count    }    func tableVIEw(tableVIEw: UItableVIEw,heightForRowAtIndexPath indexPath: NSIndexPath) -> CGfloat {        return 60.0    }

以上是相关代码 。

现在运行APP应该只显示五行数据。下面添加系统的下拉刷新控件—UIRefreshControl

声明一个变量var refreshControl: UIRefreshControl!

在vIEwDIDLoad中添加下面代码。

 refreshControl = UIRefreshControl() tb.addSubvIEw(refreshControl)

这时候运行代码下拉的时候就有有个菊花在转 。 但是不会停。用他们的原图吧。。

这里其实可以对UIRefreshControl进行自定义 。 可以设置其backgroundcolor,tintcolor等
可以添加下面两行代码到vIEwDIDLoad中试试

refreshControl.backgroundcolor = UIcolor.redcolor() refreshControl.tintcolor = UIcolor.yellowcolor()

这里可以看到，它也是一个UIVIEw.那么我们就可以自己去画一个uivIEw放在上面，执行我们自己的动画。下面通过xib画一个

这里我在xib中添加一个uivIEw把size改成Freeform。再添加五个label 。 （因为后面要单独做动画）

并且为每个设置好约束 。（最中间设置水平垂直居中，其他都是水平居中，设置好间隔就行了）

然后就是在VIEwController中使用了。
首先声明两个变量

var customVIEw: UIVIEw!var labelsArray: Array<UILabel> = []

第一个是那个容器 ，下面用于放五个label。stone

func loadCustomrefresh(){        let refresh = NSBundle.mainBundle().loadNibnamed("VIEw",owner: self,options: nil)        customVIEw = refresh[0] as! UIVIEw        customVIEw.frame = refreshControl.frame        for var i = 0 ; i < customVIEw.subvIEws.count ; i++ {           labelsArray.append(customVIEw.vIEwWithTag(i+1) as! UILabel)           self.labelsArray[i].Alpha = 0        }        refreshControl.addSubvIEw(customVIEw)    }

这个是加载xib并把那些label都加到数组最后把它加到刷新控件上。

在vIEwDIDLoad最后调用这个方法并修改

refreshControl.backgroundcolor = UIcolor.clearcolor()  refreshControl.tintcolor = UIcolor.clearcolor()

这两个方法是让菊花和背景的颜色都变成透明 。

这时候运行app就看到我们自定义的这个vIEw了

但是它并不会动，我们需要给它添加上动画效果 。

下拉从透明到显示，可以拉伸的效果。

大家可能注意到我上面loadCustomrefresh方法中有一句self.labelsArray[i].Alpha = 0 ，设置成完全透明 ， 初始是看不到的 ， 然后再我们下拉的时候慢慢的显示 。用到UIScrollVIEw中的scrollVIEwDIDScroll 方法

func scrollVIEwDIDScroll(scrollVIEw: UIScrollVIEw) {        let sg = ( scrollVIEw.contentOffset.y * -1 ) / 60.0        dispatch_async(dispatch_get_main_queue()) { () -> VoID in            for var i=0; i<self.labelsArray.count; ++i {                self.labelsArray[i].Alpha = sg                self.labelsArray[i].transform = CGAffinetransformMakeScale(sg>=1 ? 1:sg,sg)            }        }    }

在下拉的过程中它的contentOffset 一直在变化 ， 我们根据它计算出一个比例 。控制透明度和缩放比例 。然后实时更新到界面上。因为要实时更新界面所以异步在主线程上更新。用到gcd。

这时候运行就有下拉的效果了。

文字动画

我们这里的文字动画分两部分
1、旋转45度变色

2、放大

我们需要分部去做 。

首先定义几个变量

var isAnimating = false   var currentcolorIndex = 0   var currentLabelindex = 0

isAnimating 当前动画是否正在放生 。
currentcolorIndex 当前label的颜色。
currentLabelindex 当前是哪个label（下标）

然后添加一个改变颜色的方法。里面只有五个颜色

func getNextcolor() -> UIcolor {        var colorsArray: Array<UIcolor> = [UIcolor.magentacolor(),UIcolor.browncolor(),UIcolor.yellowcolor(),UIcolor.redcolor(),UIcolor.greencolor()]        if currentcolorIndex == colorsArray.count {            currentcolorIndex = 0        }        let returncolor = colorsArray[currentcolorIndex]        ++currentcolorIndex        return returncolor      }

这个可以随自己喜欢 。也可以随机颜色

然后，进行第一个动画
f

unc animateOne(){        isAnimating = true        UIVIEw.animateWithDuration(0.2,delay: 0.0,options: UIVIEwAnimationoptions.Curvelinear,animations: { () -> VoID in            self.labelsArray[self.currentLabelindex].transform = CGAffinetransformMakeRotation(CGfloat(M_PI_4))            self.labelsArray[self.currentLabelindex].textcolor = self.getNextcolor()            }) { (finished) -> VoID in                UIVIEw.animateWithDuration(0.1,animations: { () -> VoID in                    self.labelsArray[self.currentLabelindex].transform = CGAffinetransformIDentity                    self.labelsArray[self.currentLabelindex].textcolor = UIcolor.whitecolor()                    },completion: { (finished) -> VoID in                        ++self.currentLabelindex                        if self.currentLabelindex < self.labelsArray.count {                            self.animateOne()                        }                        else {                            self.animateTwo()                        }                  })        }    }

动画部分就是一个旋转45度然后改变颜色 ， 动画完成的时候执行另一个动画，首先将当前label平滑的恢复位置 ， 然后判断后面还有没有其他label ，如果有 继续执行其他的，如果没有就执行第二步

func animateTwo(){        UIVIEw.animateWithDuration(0.3,delay: 0,options: UIVIEwAnimationoptions.Curvelinear,animations: { () -> VoID in                for lb in self.labelsArray{                    lb.transform = CGAffinetransformMakeScale(1.5,1.5)                }            }) { (finished) -> VoID in                UIVIEw.animateWithDuration(0.3,animations: { () -> VoID in                        for lb in self.labelsArray{                            lb.transform = CGAffinetransformIDentity                        }                    }) { (finished) -> VoID in                        if self.refreshControl.refreshing {                            self.currentLabelindex = 0                            self.animateOne()                        }                        else {                            self.isAnimating = false                            self.currentLabelindex = 0                            for var i=0; i<self.labelsArray.count; ++i {                                self.labelsArray[i].textcolor = UIcolor.whitecolor() self.labelsArray[i].transform = CGAffinetransformIDentity } } } } } 

第二部 ， 用for循环给每个label放大1.5倍，最后还原 。原教程用得是写死的数组 ，写了好多行， 说for循环式及时执行的不会有动画效果 。 我这里用for循环是有动画效果的。

还原完成的时候，判断是否还没有刷新好，如果是继续第一个动画 ， 如果不是。所有动画属性还原

然后在scrollVIEwDIDEndDecelerating 方法中调用我们的动画

if refreshControl.refreshing {            if !isAnimating {                animateOne()            }        }

这个方法是在滚动结束的时候执行。

这时候运行app已经有动画效果了，但是一直不会end 。 我们这里不会从网络上下载数据 。所以用一个计时器去模拟

声明一个计时器var timer:NSTimer!

func doSomething() {        timer = NSTimer.scheduledTimerWithTimeInterval(4.0,target: self,selector: "endOfWork",userInfo: nil,repeats: true)    }    func endOfWork() {        refreshControl.endRefreshing()        timer.invalIDate()        timer = nil    }

然后在scrollVIEwDIDEndDecelerating 里面启动这个计时器

if refreshControl.refreshing {            if !isAnimating {                doSomething()                animateOne()            }        }

计时结束的时候就会调用refreshControl.endRefreshing() 结束刷新 ，并停止计时器。
最后效果

当然大家可以奇思妙想 ， 想出更多更好的创意 。

下面放上源码：https://github.com/smalldu/SwiftStudy
里面的PullToRefresh

总结

以上是内存溢出为你收集整理的swift详解之二十八---------自定义下拉刷新全部内容，希望文章能够帮你解决swift详解之二十八---------自定义下拉刷新所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。