今回の内容
- APIで取得した画像をTableViewに表示したCollectionViewCellに表示
コードと簡単解説
- Main.storyboardでViewControllerにTabelViewを作成
Podfile
Podfile
pod 'SwiftyJSON'
pod 'Alamofire'
pod 'SDWebImage'
Model
-
imageURLArraysの値でCollectionViewCellに画像を表示させます。 -
SearchKeysectionTitleの値から画像を検索します。
ImageURLModel
import Foundation
struct ImageURLModel{
static var imageURLArrays = [URL]()
static let SearchKeysectionTitle = "cat"
}
- 画像のURLを取得してくる
-
["hits"][getUrlCount]["webformatURL"]は、["hits"]のgetUrlCount番目の["webformatURL"]を指定しています。
Alamofire
import Foundation
import Alamofire
import SwiftyJSON
class Alamofire{
static func searchGetImageURL(){
AF.request("https://pixabay.com/api/?key=~~~~~APIKey~~~~~&q=\(ImageURLModel.SearchKeysectionTitle)",method: .get,parameters: nil,encoding: JSONEncoding.default).responseJSON { (response) in
switch response.result{
case.success:
ImageURLModel.imageURLArrays = [] //一度、空にする
for getUrlCount in 0...4{
if JSON(response.data as Any)["hits"][getUrlCount]["webformatURL"].string != nil{
ImageURLModel.imageURLArrays.append(URL(string: JSON(response.data as Any)["hits"][getUrlCount]["webformatURL"].string!)!)
}else{ //取得できる"webformatURL"が無くなった時に処理を終わらせる
break
}
}
case .failure:
let error = NSError()
print(error.debugDescription)
break
}
}
}
}
View
TableViewCell
- TableViewのCustomCellを作成します。
-
TableViewCell.xibにCollectionViewを作成しています。 -
TableViewCell.xibのIdentifierにTableViewCellを入力しておきます。 -
.sd_setImage(with: ImageURLModel.imageURLArrays[indexPath.row], completed: nil)でcellのImageViewに取得してきた画像を表示する。
TableViewCell
import UIKit
import SDWebImage
class TableViewCell: UITableViewCell {
@IBOutlet weak var collectionView: UICollectionView!
static let identifire = "TableViewCell"
static let nib = {() -> UINib in return UINib(nibName: "TableViewCell", bundle: nil)}
static let collectionViewFlowLayout = UICollectionViewFlowLayout()
override func awakeFromNib() {
super.awakeFromNib()
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(CollectionViewCell.nib(), forCellWithReuseIdentifier: CollectionViewCell.identifire)
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
extension TableViewCell:UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
ImageURLModel.imageURLArrays.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.identifire, for: indexPath) as! CollectionViewCell
cell.imageView.sd_setImage(with: ImageURLModel.imageURLArrays[indexPath.row], completed: nil)
cell.imageView.contentMode = .scaleAspectFit
return cell
}
}
extension TableViewCell:UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.height, height: collectionView.frame.size.height)
}
}
CollectionViewCell
- CollectionViewのCustomCellを作成します。
-
CollectionViewCell.xibにImageViewを作成しています。
CollectionViewCell
import UIKit
class CollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
static let identifire = "CollectionViewCell"
static let nib = {() -> UINib in return UINib(nibName: "CollectionViewCell", bundle: nil)}
override func awakeFromNib() {
super.awakeFromNib()
}
}
Controller
- Main.storyboardでTableViewを作成しておきます。
ViewController
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
Alamofire.searchGetImageURL() //画像のURLを取得してくる。
DispatchQueue.main.asyncAfter(deadline: .now() + 3) { [self] in
tableView.delegate = self
tableView.dataSource = self
tableView.register(TableViewCell.nib(), forCellReuseIdentifier: TableViewCell.identifire)
tableView.reloadData()
}
}
}
extension ViewController:UITableViewDelegate{
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return ImageURLModel.SearchKeysectionTitle
}
func numberOfSections(in tableView: UITableView) -> Int {
return 5
}
}
extension ViewController:UITableViewDataSource{
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return tableView.frame.size.height / 4
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.identifire, for: indexPath) as! TableViewCell
return cell
}
}
終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。