最終效果
前言
通過(guò)這篇文你會(huì)學(xué)到：
- 個(gè)性化下拉刷新
- 做出如圖的動(dòng)畫(huà)效果
- 插入數(shù)據(jù)到UITableView
下拉刷新
首先自己弄好如圖的TableView西篓，這個(gè)自己弄吧。這篇文主要專(zhuān)注于下拉刷新岂津。
tableView
添加TableView的映射到ViewController為tblDemo
@IBOutlet weak var tblDemo: UITableView!
要做出下拉刷新需要用到UIRefreshControl
在viewController添加變量：
var refreshControl: UIRefreshControl!
然后在viewDidLoad()添加：
refreshControl = UIRefreshControl()
//設(shè)置背景顏色
refreshControl.backgroundColor = UIColor.redColor()
//設(shè)置菊花轉(zhuǎn)的顏色
refreshControl.tintColor = UIColor.yellowColor()
//往tableView添加刷新控件
tblDemo.addSubview(refreshControl)
運(yùn)行如下：
red_yellow_refresh
個(gè)性化下拉刷新
原理：因?yàn)?code>UIRefreshControl實(shí)際是UIView的子類(lèi)，所以直接在上面添加view來(lái)覆蓋默認(rèn)的刷新菊花轉(zhuǎn)view
1.使用xib創(chuàng)建view
首先弄出自己定制的view：
newFile.png
view
文件名字為RefreshContents
name.png
接著在右邊的側(cè)邊欄中設(shè)置view的大小
size.png
set Size.png
然后一個(gè)個(gè)地將Label拖進(jìn)去并設(shè)置好constrain:
fin.png
然后將里面的Label用tag標(biāo)記橱乱，首先是‘我’為T(mén)ag 1粱甫，‘是’為 2,..以此類(lèi)推：
tag.png
2.覆蓋UIRefreshControl的默認(rèn)view
//存儲(chǔ)定制好的view和label
var customView: UIView!
var labelsArray: Array<UILabel> = []
func loadCustomRefreshContens(){
//讀取xib里的view
let refreshContents = NSBundle.mainBundle().loadNibNamed("RefreshContents", owner: self, options: nil)
customView = refreshContents[0] as! UIView
//按照refreshControl的大小設(shè)置view的大小
customView.frame = refreshControl.bounds
//讀取view 里 label 到labelsArray
for var i=0; i < customView.subviews.count; ++i{
labelsArray.append(customView.viewWithTag(i + 1) as! UILabel)
}
//覆蓋默認(rèn)view
refreshControl.addSubview(customView)
}
接著在viewDidLoad()添加
loadCustomRefreshContents()
運(yùn)行泳叠，下拉就能看到
firstStep.png
3.添加動(dòng)畫(huà)效果
animation.gif
觀察圖中的動(dòng)畫(huà)，可以將動(dòng)畫(huà)分解為以下兩個(gè)步驟：
- 由第一個(gè)字傾斜45度析二，變一種顏色节预，然后再擺正，變?yōu)楹谏蛳拧＝又乱粋€(gè)字糠赦，如此循環(huán)到最后一個(gè)。
- 全部字放大再變?yōu)檎淌山！?/li>
先在viewController定義下面的變量：
//用來(lái)判斷是否可以執(zhí)行動(dòng)畫(huà)顾瞻，防止動(dòng)畫(huà)未完時(shí)又啟動(dòng)了動(dòng)畫(huà)
var isAnimating = false
var currentColorIndex = 0
var currentLabelIndex = 0
第一步的實(shí)現(xiàn)如下：
func animateRefreshStep1(){
isAnimating = true
UIView.animateWithDuration(0.1, delay: 0.0, options: .CurveLinear, animations: {
self.labelsArray[self.currentLabelIndex].transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4))
self.labelsArray[self.currentLabelIndex].textColor = self.getNextColor()
}, completion: {(finished) -> Void in
UIView.animateWithDuration(0.05, delay: 0.0, options: .CurveLinear, animations: {
self.labelsArray[self.currentLabelIndex].transform = CGAffineTransformIdentity
self.labelsArray[self.currentLabelIndex].textColor = UIColor.blackColor()
}, completion: {(fin) -> Void in
++self.currentLabelIndex
if self.currentLabelIndex < self.labelsArray.count{
self.animateRefreshStep1()
}
else{
self.animateRefreshStep2()
}
}
)
})
}
//返回下個(gè)顏色
func getNextColor() -> UIColor{
var colorsArray: Array<UIColor> = [UIColor.magentaColor(),UIColor.brownColor(),UIColor.yellowColor(),UIColor.redColor(),UIColor.greenColor(),UIColor.blueColor(),UIColor.orangeColor()]
if currentColorIndex == colorsArray.count{
currentColorIndex = 0
}
let returnColor = colorsArray[currentColorIndex]
++currentColorIndex
return returnColor
}
第二步的實(shí)現(xiàn):
func animateRefreshStep2(){
UIView.animateWithDuration(0.35, delay: 0.0, options: .CurveLinear, animations: {
self.labelsArray[0].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[1].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[2].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[3].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[4].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[5].transform = CGAffineTransformMakeScale(1.5,1.5)
self.labelsArray[6].transform = CGAffineTransformMakeScale(1.5,1.5)
}, completion: {(fin) -> Void in
UIView.animateWithDuration(0.25, delay: 0.0, options: .CurveLinear, animations: {
self.labelsArray[0].transform = CGAffineTransformIdentity
self.labelsArray[1].transform = CGAffineTransformIdentity
self.labelsArray[2].transform = CGAffineTransformIdentity
self.labelsArray[3].transform = CGAffineTransformIdentity
self.labelsArray[4].transform = CGAffineTransformIdentity
self.labelsArray[5].transform = CGAffineTransformIdentity
self.labelsArray[6].transform = CGAffineTransformIdentity
}, completion: {(fin) -> Void in
//如果還未結(jié)束刷新則回到第一步再來(lái)一次
if self.refreshControl.refreshing{
self.currentLabelIndex = 0
self.animateRefreshStep1()
}else{
//完成退渗，設(shè)置為原始狀態(tài)
self.isAnimating = false
self.currentLabelIndex = 0
for var i = 0; i<self.labelsArray.count; ++i{
self.labelsArray[i].textColor = UIColor.blackColor()
self.labelsArray[i].transform = CGAffineTransformIdentity
}
}
})
})
}
接著就是設(shè)置當(dāng)下拉刷新時(shí)啟動(dòng)動(dòng)畫(huà)：
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
if refreshControl.refreshing{
if !isAnimating{
animateRefreshStep1()
}
}
}
運(yùn)行就能見(jiàn)到動(dòng)畫(huà)效果了会油。
4.插入數(shù)據(jù)并且結(jié)束下拉刷新
這里為了模擬讀取網(wǎng)絡(luò)上的數(shù)據(jù)所以用NSTimer設(shè)置4秒的延遲。然后結(jié)束下拉刷新都许，并且插入數(shù)據(jù)体斩。
定義如下函數(shù)：
func doSomething(){
//4秒后觸發(fā)endOfWork
timer = NSTimer.scheduledTimerWithTimeInterval(4.0, target: self, selector: "endOfWork", userInfo: nil, repeats: true)
}
func endOfWork(){
//結(jié)束下拉刷新
refreshControl.endRefreshing()
timer.invalidate()
timer = nil
//插入數(shù)據(jù)
insertLoveData()
}
func insertLoveData(){
let lastIndexpath = NSIndexPath(forRow: dataArray.count, inSection: 0)
//往數(shù)據(jù)里添加新的數(shù)據(jù)
dataArray.append("其實(shí)我也喜歡你")
//更新tableView數(shù)據(jù)
tblDemo.beginUpdates()
tblDemo.insertRowsAtIndexPaths([lastIndexpath], withRowAnimation: .Middle)
tblDemo.endUpdates()
}
接著在在scrollViewDidEndDecelerating插入doSomething如下：
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
if refreshControl.refreshing{
if !isAnimating{
doSomething()
animateRefreshStep1()
}
}
}
運(yùn)行絮吵，如下效果：
pullRefresh.gif
最后
因?yàn)閷?xiě)這文時(shí)剛好是情人節(jié)，所以就應(yīng)下境暇昂。虐狗節(jié)快樂(lè)吧:)
(End And Thank U)
參考鏈接
