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

# 完成形はこんな感じです
<img width="150" alt="74BD4482-1E06-442A-A776-2E7B50551EF7_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/88118fd4-d77b-901d-d0b4-734f24f52ff5.jpeg"> <img width="153.8" alt="A883044C-7857-4A5F-9A03-E60DA83A7EBD_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/179d658b-c852-1374-c065-dfe6025f52d9.jpeg">

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

# コードと簡単解説

## Podfile

```:Podfile
  pod 'SwiftyJSON'
  pod 'Alamofire'
  pod 'SDWebImage'
```

## Model

```Swift: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}`では取得できるデータが無くなった時取得元の制限によって取得が出来なくなった時に、処理を終わらせる

```Swift: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](https://qiita.com/HiroUrata/items/f435e12a77f83fbcdba6)をご覧ください。
* コメントでの質問でも大丈夫です　

```Swift: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()`で検索したい画像と取得したい数として使用する。


```Swift: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](https://qiita.com/HiroUrata/items/ae190ddbecfd929e6b09)で解説しています
* SDWebImageを使用して、画像をCellに表示しています。

```Swift: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)
            
        }
}
```

# 終わり

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