UICollectionViewにAPIを使用して画像を表示させる

完成形はこんな感じです

機能説明

• 上のTextFieldには検索したいキーワードと下のTextFieldには表示したい数を入力して、検索ボタンを押します
• すると、UICollectionViewのCellに画像が表示されます。

コードと簡単解説

Podfile

Podfile

  pod 'SwiftyJSON'
  pod 'Alamofire'
  pod 'SDWebImage'

Model

SearchResultDatas

import Foundation

struct SearchResultDatas{

    var imageURLData = String()

}

• func searchGetImageURL(searchKeyword:String,searchCount:Int){}では、searchCountの数値からマイナス１個分のデータを取得したいので、for文を用いています。

• if jsonResult["hits"][needDataCount]["webformatURL"].string != nil{}else{break}では取得できるデータが無くなった時取得元の制限によって取得が出来なくなった時に、処理を終わらせる

AlamofireModel

import Foundation
import Alamofire
import SwiftyJSON

class AlamofireModel{

    var searchResultDatasArray = [SearchResultDatas]()

}

extension AlamofireModel{

    func searchGetImageURL(searchKeyword:String,searchCount:Int){

        AF.request("~~~~~~~~~APIKey~~~~~~~~~&q=\(searchKeyword)", method: .get, parameters: nil, encoding: JSONEncoding.default).responseJSON { (response) in

            switch response.result{

            case.success:

                self.searchResultDatasArray = [] //以前のデータを削除

                let jsonResult:JSON = JSON(response.data as Any)

                for needDataCount in 0...searchCount - 1{

                    if jsonResult["hits"][needDataCount]["webformatURL"].string != nil{

                        let jsonResult = SearchResultDatas(imageURLData: jsonResult["hits"][needDataCount]["webformatURL"].string!)

                        self.searchResultDatasArray.append(jsonResult)

                    }else{

                        break  //取得できる"webformatURL"が無くなった時に処理を終わらせる

                    }                    
                }

            case .failure:

                let error = NSError()
                print(error.debugDescription)
                break

            }           
        }       
    }    
}

View

• 以前投稿した記事で簡単にですが、解説してますのでUIActivityIndicatorViewをご覧ください。
• コメントでの質問でも大丈夫です　

ActivityIndicator

import Foundation
import UIKit

class ActivityIndicator:UIViewController{

    let uiActivityIndicator = UIActivityIndicatorView()

}

extension ActivityIndicator{

    func createIndicator(targetView:UIView){

        self.uiActivityIndicator.center = targetView.center
        self.uiActivityIndicator.color = .white
        self.uiActivityIndicator.style = .large

        targetView.addSubview(self.uiActivityIndicator)

    }   
}

Controller

• searchKeywordTextFieldとsearchCountTextFieldに入力された値をalamofireModel.searchGetImageURL()で検索したい画像と取得したい数として使用する。

ViewController

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var searchKeywordTextField: UITextField!
    @IBOutlet weak var searchCountTextField: UITextField!


    let alamofireModel = AlamofireModel()
    let activityIndicator = ActivityIndicator()


    override func viewDidLoad() {
        super.viewDidLoad() 


    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        activityIndicator.createIndicator(targetView: self.view)

    }

    @IBAction func Search(_ sender: UIButton) {

        alamofireModel.searchGetImageURL(searchKeyword: searchKeywordTextField.text!, searchCount: Int(searchCountTextField.text!)!)

        activityIndicator.uiActivityIndicator.startAnimating()

        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {

            let collectionVC = self.storyboard?.instantiateViewController(identifier: "collectionVC") as! CollectionViewController

            collectionVC.receiveResultJSONArray = []
            collectionVC.receiveResultJSONArray = self.alamofireModel.searchResultDatasArray

            self.activityIndicator.uiActivityIndicator.stopAnimating()

            self.navigationController?.pushViewController(collectionVC, animated: true)

        }       
    }   
}

• UICollectionViewについてはUISliderとCollectionViewの簡単復習Appで解説しています
• SDWebImageを使用して、画像をCellに表示しています。

CollectionViewController

import UIKit
import SDWebImage

class CollectionViewController: UIViewController{

    @IBOutlet weak var collectionView: UICollectionView!

    let collectionViewFlowLayout = UICollectionViewFlowLayout()

    var receiveResultJSONArray = [SearchResultDatas]()


    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        collectionViewFlowLayout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
        collectionView.collectionViewLayout = collectionViewFlowLayout

        collectionView.delegate = self
        collectionView.dataSource = self

        collectionView.reloadData()
    }

    }

extension CollectionViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{



    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return self.receiveResultJSONArray.count

    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)

        let cellImageView = cell.contentView.viewWithTag(1) as! UIImageView

        cellImageView.frame = CGRect(x: cell.bounds.minX, y: cell.bounds.minY, width: cell.frame.size.width, height: cell.frame.size.height)

        cellImageView.contentMode = .scaleAspectFill

        cellImageView.sd_setImage(with: URL(string: self.receiveResultJSONArray[indexPath.row].imageURLData), completed: nil)

        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

            return CGSize(width: collectionView.frame.size.width / 4 - 10, height: collectionView.frame.size.width / 4 - 10)

        }
}

終わり

解説と呼べることはしてないので
ご指摘やご質問などがございましたら、コメントまでよろしくお願いします。