iOS developiOS移动开发技术前沿

UICollectionView Tutorial(Part1)

2015-11-08  本文已影响1185人  Girl_iOS

本文翻译自:UICollectionView Tutorial Part 1: Getting Started
iOS相册里有一种优雅的方式来实现多种布局.你可以在网格视图里查看你的照片:

Photos-Photos.png

或者你可以查看你的层叠着的相册:

Photos-album-666x500.png
你可以通过一个非常酷的捏的手势来进行两种布局的转换.你或许会想"哇哦,我想把它加进我的应用里".
利用UICollectionView能够非常简单地添加自定义布局和转场动画(如相册应用里的).
因为collection views定制化非常强,你将不局限于层叠和网格.你也可以使用circle、cover-flow、Pulse news等布局,甚至是任何你能想到的.
好消息是,如果你对UITableView熟悉,那么将很容易掌握collection views的用法,因为它和table view里的data source和delegate类型非常相似.
在本教程中,你将用UICollectionView创建属于自己的网格图片浏览app.在你完成本教程的时候,你将掌握collection views的基本用法并能够将它们运用到你的app中. finalproject-666x500.png

我们来一步一步看下这些内容:

  1. UICollectionView:内容呈现的主界面,和UITableView相似.如同table view,collection view也是UIScrollView的子类.
  2. UICollectionViewCell:和UITableViewCell相似.这些cells包含相关的view,继而添加为collection view的子视图.可以用代码或者在Interface Builder里创建cell.
  3. Supplementary Views:如果你在cell之外有额外的内容需要展示,你可以使用Supplementary Views,用法同headers和footers.
    除了以上可以看见的内容,collection view还需要有个布局对象来约束内容的位置、大小等.约束对象为UICollectionViewLayout的子类.约束可以在runtime时起作用,而且collection view可以在布局之间通过动画自由切换.
    你可以创建一个UICollectionViewLayout的子类来编写自定义布局,但苹果已经为开发者提供了名为UICollectionViewFlowLayout的基础"flow-based"布局.它能够根据对象的大小来挨个展示,有点像网格view.你可以用它来out of the box,或者继承它来创建一个有意思的动作或可视化效果.
    接下来你将通过此教程来深入了解这些元素.但现在,你需要来创建这个相关的项目了!
xcode-singleview-700x418.png

这个模板将提供一个简单的UIViewController和storyboard.
点击Next填写app的基本信息.设置项目名字为FlickrSearch,设配类型为iPad,语言为swift.点击Next选择项目保存位置后,选择Create.

xcode-projectsetup-700x421.png

模板里的view controller和storyboard都没用,你将使用UICollectionViewController(有点像UITableViewController),它是用来控制collection view的view controller的子类.删除ViewController.swift和从Main.storyboard上去除空的view controller.现在你将有一个黑色的页面:]
打开AppDelegate.swift添加一个我称为Wenderlich绿的颜色.在import UIKit一行下面添加:

let themeColor = UIColor(red: 0.01, green: 0.41, blue: 0.22, alpha: 1.0)

利用Wenderlich绿作为整个应用的主题色.在application(_:didFinishLaunchingWithOptions)增加:

func application(application: UIApplication!, didFinishLaunchingWithOptions launchOptions: NSDictionary!) -> Bool {  
window?.tintColor = themeColor 
return true
}
embedinnavcontroller-700x284.png

确保这个navigation controller 为初始view controller(左边会有箭头).
选择collection view通过Attributes inspector设置其背景颜色为白色:

setbackgroundcolour.png
从截图中还会看到Layout设置为Flow,表示将会使用前文提到的flow layout.
在collection上选择一个单独的cell通过attributes inspector设置其Reuse Identifier为FlickrCell.这和table views 非常像,data source使用这个identifier来重用或者新建cell.
在collection view之上的navigation bar的中心拖入一个text field.这将是用户输入搜索内容的地方.在attributes inspector中设置Placeholder Text为Search,Return Key为Search.然后按住control键从text field拖动到collection view controller后选择delegate outlet: textfielddelegate.png
UICollectionViewController能做很多东西,但你最好新建个它的子类.点击File\New\File...,选择Cocoa Touch Class并新建的类命名为FlickrPhotosViewController.它是UICollectionViewController的子类.模板中会有很多代码,但最好要知道这个类是如何运作的.打开FlickrPhotosViewController.swift并删除除了描述和UIKit导入外的所有代码.你的文件如下面所示: 
import UIKit 
class FlickrPhotosViewController : UICollectionViewController { }

在类中添加你在storyboard设置的重用标示常量,并添加一个section 嵌套(你待会会用到):

private let reuseIdentifier = "FlickrCell"
private let sectionInsets = UIEdgeInsets(top: 50.0, left: 20.0, bottom: 50.0, right: 20.0)

随着教程的继续,里面会添加剩余的代码.
返回到Main.storyboard,选择collection view controller,在identity inspector里面设置Class为FlickrPhotosViewController来匹配你的新类:

collectionviewcustomclass.png 
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6593783 efea8e7f6dfc6b70bc03d2afb&format=rest&api_sig=f24f4e98063a9b8ecc8b522b238 d5e2f

那么API key就为'6593783efea8e7f6dfc6b70bc03d2afb'
鉴于本文主要讲的是UICollectionView并非Flickr API,我已经为你写好了Flickr搜索的代码,你可以在这里下载.
解压后,把FlickrSearcher.swift拖进项目中.确保Copy items into destination group's folder被勾选,继而点击完成.
文件中包含两个类和一个结构体:

查看下里面的代码,相当简单,也许能促使你将Flickr运用到你的应用中.
在你能搜索Flickr之前,你需要输入一个API key.打开FlickrSearcher.swift替换apiKey为你之前获得的API key.它将如下所示:

let apiKey = "hh7ef5ce0a54b6f5b8fbc36865eb5b32"

当你都准备好时,移步下一章节.是时候做连接Flickr的准备工作了.

private var searches = [FlickrSearchResults]()
private let flickr = Flickr() 
func photoForIndexPath(indexPath: NSIndexPath) -> FlickrPhoto { return searches[indexPath.section].searchResults[indexPath.row]
}

searches是一个追踪所有搜索的数组.flickr为当你搜索时所使用的引用对象.
photoForIndexPath为在collection view里获取最近几次搜索结果的方法.你将用索引来获得图片,而并非大量重复的代码.

extension FlickrPhotosViewController : UITextFieldDelegate {
  func textFieldShouldReturn(textField: UITextField) -> Bool {
    // 1
    let activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .Gray)
    textField.addSubview(activityIndicator)
    activityIndicator.frame = textField.bounds
    activityIndicator.startAnimating()
    flickr.searchFlickrForTerm(textField.text) {
      results, error in
 
      //2
      activityIndicator.removeFromSuperview()
      if error != nil {
        println("Error searching : \(error)")
      }
 
      if results != nil {
        //3
        println("Found \(results!.searchResults.count) matching \(results!.searchTerm)")
        self.searches.insert(results!, atIndex: 0)
 
        //4
        self.collectionView?.reloadData()
      }
    }
 
    textField.text = nil
    textField.resignFirstResponder()
    return true
  }
}

下面是代码的释义:

  1. 增加一个activity view后,通过我先前提供的类来输入关键词后进行Flick异步搜索.当有结果返回时,完成block会被调用来设置FlickrPhoto对象,或者返回一个错误信息(当出错时).
  2. 在console里打印错误信息.当然在实际的应用中你并不希望这些错误信息被用户看到.
  3. 得到结果后将其增加到搜索数组的前面.
  4. 当你有新数据加入时需要刷新UI.使用insertSections方法来将你获得的结果添加到列表的顶端.
    运行你的app.在输入框里输入,你将会在console里看到日志信息来表示返回的结果数,如下所示:
Found 20 matching bananas

Flickr类限制每次获得20条数据.
咋回事,你并没有在collection view里看到照片!像table view一般,collection view需要实现data source 和代理方法.

UICollectionViewFlowLayout也有个代理协议:UICollectionViewDelegateFlowLayout.它作用于布局的时候,设置cell的间距、滑动方向等等.
在本章,你将实现你的view controller的必须方法UICollectionViewDataSource和UICollectionViewDelegateFlowLayout,这些全部在collection view中完成.UICollectionViewDelegate将会在第二章中用到.

extension FlickrPhotosViewController : UICollectionViewDataSource {
 
  //1
  override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return searches.count
  }
 
  //2
  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return searches[section].searchResults.count
  }
 
  //3
  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! UICollectionViewCell
    cell.backgroundColor = UIColor.blackColor()
    // Configure the cell
    return cell
  }
}

这些方法非常简单明了:

  1. 每个section是一个搜索结果,所以数量为searches数组的个数.
  2. 元素的个数为FlickrSearch里获得的searchResults数组元素个数.
  3. 这是个临时方法用来返回一个空的cell,稍后会来重写它.collection views需要你注册个复用的cell,否则将会在runtime期间发生错误.

运行项目,输入搜索.尽管现在看起来不怎样,但毕竟看到了20个新的cell:

blackcells-666x500.png 
extension FlickrPhotosViewController : UICollectionViewDelegateFlowLayout {
  //1
  func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
 
      let flickrPhoto =  photoForIndexPath(indexPath)
      //2
      if var size = flickrPhoto.thumbnail?.size {
        size.width += 10
        size.height += 10
        return size
      }
      return CGSize(width: 100, height: 100)
  }
 
  //3
  func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    insetForSectionAtIndex section: Int) -> UIEdgeInsets {
      return sectionInsets
  }
}
  1. collectionView(_:layout:sizeForItemAtIndexPath:)来告诉布局cell的大小.要实现这个,你需要知道FlickrPhoto的尺寸.
  2. 来返回尺寸的大小.FlickrPhoto的thumbnail属性可选的,可能不存在.当此属性不存在时就返回个默认尺寸.如果有此属性则返回增加边界后的尺寸.
  3. collectionView(_:layout:insetForSectionAtIndex:)返回cell、header和footer之间的空间.通常为一个常数值.

运行应用,进行搜索.可以看见一个个不同尺寸的黑色方块!

blackcells2-666x500.png
已经有了图片展示的空间,下面开始展示图片了! Screen-Shot-2012-09-23-at-2.05.54-PM.png cellsize-700x313.png

在cell上拖拽一个image view.它会自动填满cell.记得添加边界约束.这样图片就会总在cell的里面,无论图片尺寸大小是多少.选择图片,点击pin按钮增加距离边界5points的约束.注意不要选中Constrain to margins.

addimageviewconstraints-649x500.png

UICollectionViewCell不允许改变背景颜色.创建它的子类将是解决办法.
创建FlickrPhotoCell,它为UICollectionViewCell的子类.
在Main.storyboard选择cell.设置其类为FlickrPhotoCell:

customcellidentity-700x162.png

打开Assistant editor,确保打开的是FlickrPhotoCell.swift,连接image view到类中:

addimageviewoutlet-700x261.png

打开FlickrPhotosViewController.swift替换其中的collectionView(cellForItemAtIndexPath:)：

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
  //1
  let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! FlickrPhotoCell
  //2
  let flickrPhoto = photoForIndexPath(indexPath)
  cell.backgroundColor = UIColor.blackColor()
  //3
  cell.imageView.image = flickrPhoto.thumbnail
 
  return cell
}

这和之前的方法有所不同.

  1. cell名字现在为FlickrPhotoCell
  2. 你将使用之前的FlickrPhoto方法来呈现图片.
  3. 传递给image view图片的thumbnail属性.

运行程序,输入一个搜索banana.你将得到下面的图片:

bananasatlast-666x500.png
完成.
你可以在这里下载完整项目.

Girl学iOS100天 第12&13天

上一篇下一篇

猜你喜欢

热点阅读