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

港控/mmm° 2022-08-08 17:36 348阅读 0赞

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

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

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

![这里写图片描述][20150923070859120]

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

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

在ViewController中声明 `@IBOutlet weak var tb:UITableView!` ，然后再在 Main.storyboard里面连线 。  
![这里写图片描述][20150923071540361]

右击就能看到这个菜单 ， 点击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)

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

![这里写图片描述][20150923072603505]

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

refreshControl.backgroundColor = UIColor.redColor()
     refreshControl.tintColor = UIColor.yellowColor()

![这里写图片描述][20150923072709321]

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

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

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

![这里写图片描述][20150923073352584]

然后就是在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, delay: 0.0, options: UIViewAnimationOptions.CurveLinear, 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, delay: 0, options: UIViewAnimationOptions.CurveLinear, 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()` 结束刷新 ，并停止计时器。  
最后效果  
![这里写图片描述][20150923075835135]

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

下面放上源码：[https://github.com/smalldu/SwiftStudy][https_github.com_smalldu_SwiftStudy]  
里面的***PullToRefresh***

[20150923070859120]: /images/20220731/ac5a5da6a31f413d81daf96efa22ae77.png
[20150923071540361]: /images/20220731/6317a6dcff22468c83b27de436dbe288.png
[20150923072603505]: /images/20220731/ecb0dcacdbb54fb1a061bad1165ed35e.png
[20150923072709321]: /images/20220731/bb087c2d82464a5aa4508e3a83698f06.png
[20150923073352584]: /images/20220731/5f24c19b9ff1419d8a55a640e75f32cb.png
[20150923075835135]: /images/20220731/500788ef7206454b98028769d2006812.png
[https_github.com_smalldu_SwiftStudy]: https://github.com/smalldu/SwiftStudy