UITableView可以說(shuō)是iOS開(kāi)發(fā)中最常用的組件低千,今天來(lái)談?wù)刄ITableView如何實(shí)現(xiàn)索引和cell添加動(dòng)畫(huà)。---今天的話題比較輕松冗澈,不用看頭疼的Core... ...
看看最終要實(shí)現(xiàn)的效果先:
動(dòng)畫(huà)效果是隨便寫(xiě)的最簡(jiǎn)單的平移動(dòng)畫(huà)钦勘,大家可以根據(jù)自己的喜好來(lái)寫(xiě)
首先新建一個(gè)Single View Controller的項(xiàng)目,然后在main.stroyboard 價(jià)格tableView 亚亲,設(shè)置好代理彻采,在viewController中加一個(gè)tableView的變量。
首先來(lái)看看索引捌归,所以其實(shí)就需要一個(gè)數(shù)組肛响,這里我先寫(xiě)了一個(gè)數(shù)據(jù)源數(shù)組
//隨便寫(xiě)幾個(gè)城市
private let citys = ["西安","北京","上海","廣州","深圳","杭州","重慶","南京","濟(jì)南","湖北","洛陽(yáng)","西寧","半島","瀘州","天津","桂林","大興安嶺","騾馬市","三峽","白水","常州","鹽城","懷化","湘潭","定西","天水"]
然后我們需要按照文字的首字母進(jìn)行排序,這里寫(xiě)一個(gè)String的擴(kuò)展惜索,根據(jù)漢子獲得對(duì)應(yīng)的拼音特笋。
extension String {
func toPinYin() -> String {
let mutableString = NSMutableString(string: self)
//把漢字轉(zhuǎn)為拼音
CFStringTransform(mutableString, nil, kCFStringTransformToLatin, false)
//去掉拼音的音標(biāo)
CFStringTransform(mutableString, nil, kCFStringTransformStripDiacritics, false)
let string = String(mutableString)
//去掉空格
return string.stringByReplacingOccurrencesOfString(" ", withString: "")
}
}
然后再聲明兩個(gè)變量
var titles = [String]() //放section的標(biāo)題
var cityDics = [String:[String]]() //放每個(gè)section的元素?cái)?shù)組
很明確就是為了分組,下面寫(xiě)一個(gè)工具方法處理數(shù)據(jù)源巾兆,給這兩個(gè)變量賦值
/**
生成字典
*/
func generalCityDics(){
for city in citys{
//將城市轉(zhuǎn)成拼音 然后取第一個(gè)字母 然后大寫(xiě)
let key = city.toPinYin().substringToIndex(city.toPinYin().startIndex.advancedBy(1)).uppercaseString
//判斷cityDics是否已經(jīng)存在此key
if var cityValues = cityDics[key]{
//拿出values 把city添加進(jìn)去
cityValues.append(city)
//重新賦值
cityDics[key] = cityValues
}else{
//第一次賦值
titles.append(key)
cityDics[key] = [city]
}
//排序
titles = titles.sort{ $0<$1 }
}
}
循環(huán)取拼音的第一個(gè)字母大寫(xiě)后當(dāng)key猎物,給key賦值數(shù)組,在viewDidLoad中調(diào)用這個(gè)方法就行了角塑。
先實(shí)現(xiàn)tableview的三個(gè)數(shù)據(jù)源的方法蔫磨,這些都是非常常用的操作,建議寫(xiě)成code snippet
以后用的時(shí)候就會(huì)比較快的輸出圃伶,提高coding效率
有些同學(xué)可能不知道怎么創(chuàng)建這種片段质帅,下面附教程
簡(jiǎn)單的就這樣啊,當(dāng)然還可以創(chuàng)建預(yù)設(shè)參數(shù)留攒,<#param#>
// MARK: - tableView cell單元格信息
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
cell.textLabel?.text = self.cityDics[self.titles[indexPath.section]]![indexPath.row]
return cell
}
// MARK: - 返回行數(shù)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.cityDics[self.titles[section]]!.count
}
/**
section數(shù)
*/
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return self.titles.count
}
/**
標(biāo)題
*/
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return self.titles[section]
}
/**
索引數(shù)組
*/
func sectionIndexTitlesForTableView(tableView: UITableView) -> [String]? {
return self.titles
}
然后就是實(shí)現(xiàn)tableview的這幾個(gè)方法就可以了,運(yùn)行項(xiàng)目 就有索引了嫉嘀。是不是so easy呀炼邀!
那么怎么實(shí)現(xiàn)cell的動(dòng)畫(huà)呢,可能比這個(gè)還要easy剪侮。就一個(gè)方法里面寫(xiě)動(dòng)畫(huà)就行啦
只要在 willDisplayCell中加上動(dòng)畫(huà)就行了
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
let rotationTransform = CATransform3DTranslate(CATransform3DIdentity,200,
50, 0)
cell.layer.transform = rotationTransform
UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.AllowUserInteraction, animations: { () -> Void in
cell.layer.transform = CATransform3DIdentity
}, completion: nil)
}
我這里寫(xiě)的簡(jiǎn)單的平移動(dòng)畫(huà)拭宁,大家可以試試其他效果洛退。
代碼比較簡(jiǎn)單就不上傳了,希望大家喜歡