转载

集合视图重排教程

作者:ioscreator, 原文链接 ,原文日期:2015-09-17

译者: pmst ;校对: 靛青K ;定稿:千叶知风

iOS 9 介绍了 Collection View 单元格的重新排序新特性。该特性默认开启,用户可以通过长按单元格的进行重新排序,调整其在视图中的位置。而我们要做的仅仅只是更新数据源模型。本教程中,我们将显示一些包含字母的单元格并对其进行重新排序。本教程部署于 iOS 9 和 Xcode 7。

打开 Xcode 并创建一个 Single View Application ;Product Name 为 IOS9ReorderingCollectionViewTutorial ;紧接着在 Organization Name 和 Organization Identidier 两个输入框中填写你惯用的信息;开发语言选 Swift 同时确保设备为 iPhone

集合视图重排教程

选中 Main.StoryBoard 文件,删除已有的视图控制器;从对象库中(译者注:Object Library ,快捷键 control+option+command+3 )拖拽一个 CollectionView Controller 到 Storyboard 中;选中拖入的视图控制器,在 Xcode 上方菜单栏依次选择 Editor -> Embed in -> Navagation Controller 插入一个 Navigation Controller ;确保选中新插入的导航控制器后,打开属性设置面板(译者注:Attribute Inspector ,快捷键 option+command+4 ),勾选 View Controller 部分中的 is Initial View Controller 复选框。

集合视图重排教程

双击 Collection View Controller 中的导航栏,将标题改为“Alphabet”。选中 Collection View 后打开尺寸设置面板中(译者:Size Inspector ,快捷键 option+command+5 )。将 Collection View 部分中的宽高设置为 100 。

集合视图重排教程

选中 Collection View Controller 中的单元格,前往属性设置面板(译者注:Attributes inspector ,快捷键 option+command+4 ),将单元格的背景色设为绿色。

集合视图重排教程

前往属性设置面板,将 Collection Reusable View 部分中的 Identifier 设为“Cell”

集合视图重排教程

从对象库中拖拽一个 Label 放置到单元格中。双击该 Label ,输入字母“A”。到目前为止,storyboard 内容如下:

集合视图重排教程

既然我们已经将视图控制器从 Storyboard 中移除了,那么 ViewController.swift 文件一并删除了吧。添加一个新文件到项目中,选择 File -> New File -> iOS -> Source -> Cocoa Touch Class 点击 Next 跳转下一步,为这个类命名 AlphabetViewController ,设为 UICollectionViewController 的子类。

集合视图重排教程

接下来,为 Collection View Cell 创建一个类。添加一个新文件到项目中,选择 File -> New File -> iOS -> Source -> Cocoa Touch Class 点击 Next 跳转下一步,为这个类命名 AlphabetCell ,设为 UICollectionViewCell 的子类。

集合视图重排教程

这些新创建的类需要和 storyboard 中的对象关联起来。为此,请选中 Storyboard 中的 Collection View Controller ,切换到 Identity Inspector 面板(译者注:快捷键 option+command+3 ),更改自定义类为 AlphabetViewController 。

集合视图重排教程

依葫芦画瓢,选中 Storyboard 中的 Collection View Cell 并转到 Identity Inspector 面板,更改自定义类为 AlphabetCell 。

集合视图重排教程

点击 Assistant Editor 按钮(译者注:快捷键 option+command+enter ),确保 AlphabetCell.swift 文件呈现在右侧面板。选中单元 Cell 中的 Label ,按住 Ctrl 键拖线至 AlphabetCell 类中创建以下 Outlet 接口:

集合视图重排教程

前往 AlphabetViewController.swift 文件,在 viewDidLoad 方法中,删除以下行:

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

由于早前已在视图构建器中设置了重用标识符,因此这里不再需要。此外新增一个属性变量用于存储字母表。

var characterArray = [String]()

修改 viewDidLoad 方法中的内容:

override func viewDidLoad() {
super.viewDidLoad()

let str:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"//原文最后一个字符是X 不知道是不是作者笔误

for i in str.characters{
characterArray.append(String(i))
}
}

上面方法中将字母表中的每个单词都分配到 characterArray 数组当中。接着,更改以下三个预定义的 Collection View 代理方法中的内容:

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
// 1
// Return the number of sections
return 1
}


override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// 2 Return the number of items in the section
return characterArray.count
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// 3
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! AlphabetCell

// Configure the cell
cell.alphabetLabel.text = characterArray[indexPath.row]

return cell
}
```


1. Collection View 仅包含一个 section
2. Collection View 中的每个 section 包含 26 个 item
3. 每一个 Cell 单元格的内容为字母表中的一个字母。


当重新调整单元格位置时,内容也要随之而改变。我们可以在 **CollectionView:moveItemAtIndexPath:toIndexPath** 方法中实现。

```swift
override func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath,toIndexPath destinationIndexPath: NSIndexPath) {
// swap values if sorce and destination
let temp = characterArray[sourceIndexPath.row]
characterArray[sourceIndexPath.row] = characterArray[destinationIndexPath.row]
characterArray[destinationIndexPath.row] = temp
}

校对注:这里我们可以使用元组的特性完成值的交换 (characterArray[sourceIndexPath.row], characterArray[destinationIndexPath.row]) = (characterArray[destinationIndexPath.row], characterArray[sourceIndexPath.row])

构建并运行项目,长按某个单元格后拖动调整它的位置。

集合视图重排教程

你可以从 github 上下载 IOS9ReorderingCollectionViewTutorial 的源代码。

正文到此结束
Loading...