#32 Draggable Flow Layout Photo Wall with Search Bar (Unsplash API)
UISearchBarDelegate / Result Type / NSCache / UIBackgroundConfiguration
Collection View Flow Layout 設定關鍵
除了用上篇文 #31 Display Different Custom Cells in a Table View (Programmatically) 介紹的 UICollectionViewDelegateFlowLayout 協定方法設定 collection flow layout 外，也可以像下述直接設定 flowLayout 的 itemSize / minimumInteritemSpacing / minimumLineSpacing 屬性。
這邊 width = floor[（螢幕寬-直行分隔線數*直行分隔線寬）÷照片直行數]。
private let collectionView: UICollectionView = {
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout())
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
collectionView.showsVerticalScrollIndicator = false
collectionView.backgroundColor = .clear
return collectionView
}()
static func createLayout() -> UICollectionViewLayout {
let itemSpace: CGFloat = 1
let columnCount: CGFloat = 3
let flowLayout = UICollectionViewFlowLayout()
let width = floor((UIScreen.main.bounds.width - (columnCount-1) * itemSpace) / columnCount)
flowLayout.itemSize = CGSize(width: width, height: width)
flowLayout.estimatedItemSize = .zero
flowLayout.minimumInteritemSpacing = itemSpace
flowLayout.minimumLineSpacing = itemSpace
flowLayout.scrollDirection = .vertical
return flowLayout
}
可抓取放下的 Collection View 設定關鍵
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
title = "Photo Search"
view.addSubview(collectionView)
collectionView.dataSource = self
collectionView.fillSuperView()
view.addSubview(spinner)
spinner.center = view.center
createSearchBar()
let gesture = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPressGesture))
collectionView.addGestureRecognizer(gesture)
}
@objc func handleLongPressGesture(_ gesture: UILongPressGestureRecognizer) {
switch gesture.state { case .began:
guard let targetIndexPath = collectionView.indexPathForItem(at: gesture.location(in: collectionView)) else { return }
collectionView.beginInteractiveMovementForItem(at: targetIndexPath) case .changed:
collectionView.updateInteractiveMovementTargetPosition(gesture.location(in: collectionView)) case .ended:
collectionView.endInteractiveMovement() default:
collectionView.cancelInteractiveMovement()
}}extension ViewController: UICollectionViewDataSource {
...略...
func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
return true
} func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
let item = apiResults.remove(at: sourceIndexPath.row)
apiResults.insert(item, at: destinationIndexPath.row)
}
}
搜尋功能：抓 apiResults
這邊還不需要用到 searchResultsController。
private let searchController = UISearchController(searchResultsController: nil)...// 在 viewDidLoad 呼叫
private func createSearchBar() {
navigationItem.searchController = searchController
searchController.searchBar.delegate = self
searchController.searchBar.placeholder = "搜尋圖片"
searchController.searchBar.searchTextField.autocapitalizationType = .none
}
ViewController 遵從 UISearchBarDelegate 協定。按下搜尋鍵後，會執行下面方法：
func searchBarSearchButtonClicked(_ searchBar: UISearchBar)再來的小技巧是將輸入字串的頭尾空白都去掉，內部所有空白也去掉，也確保輸入值非空字串。修正後的字串取為 query。
再來將 query 送進 fetchPhotos 函式，用到了 Result type 的技巧。若成功則回傳 Result 的 success case，附帶 [APIResult] 型別資料；若失敗則回傳 Result 的 failure case，附帶 NetworkError 型別資料。
enum NetworkError: Error {
case invalidUrl
case requestFailed(Error)
case invalidData
}
// modelstruct APIResponse: Codable {
let total: Int
let total_pages: Int
let results: [APIResult]
}
struct APIResult: Codable {
let urls: URLs
}
struct URLs: Codable {
let regular: String
}
抓圖片與顯示
注意傳給 fetchImage 函式的參數 url 是 URL 型別。用到 NSCache 儲存或取得 NSURL 和 UIImage 型別 Key-value 資料。
若成功抓圖則回傳 Result 的 success case，附帶 UIImage 型別資料；若失敗則回傳 Result 的 failure case，附帶 NetworkError 型別資料。
顯示圖片用到 iOS 15 推出的 UIBackgroundConfiguration：
