Segmentで表示する画像データを選択する(UISegmentedControl)

完成形はこんな感じです

機能説明

• 画面上部のUISegmentedControlをタップすると、対応した画像をAPIで取得して表示します。

コードと簡単解説

Podfile

Podfile

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

Model

JsonDataSets

import Foundation

struct JsonDataSets{

    var imageURLData = String()

}

• 今回は、10個の画像のURLを取得したいので,for needDataCount in 0...10 - 1{}内でresponseに入ってきたデータをjsonResultDatasArrayに入れていきます。

AlamofireModel

import Foundation
import Alamofire
import SwiftyJSON

class AlamofireModel{

    var jsonResultDatasArray = [JsonDataSets]()

}

extension AlamofireModel{

    func searchGetImageURL(searchKeyword:String){

            AF.request("https://pixabay.com/api/?key=~~~~~~~~~APIKey~~~~~~~~~&q=\(searchKeyword)", method: .get, parameters: nil, encoding: JSONEncoding.default).responseJSON { (response) in

                switch response.result{

                case.success:

                    self.jsonResultDatasArray = [] //以前のデータを削除
                    let jsonResult:JSON = JSON(response.data as Any)

                    for needDataCount in 0...10 - 1{

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

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

                            self.jsonResultDatasArray.append(jsonResult)

                        }else{

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

                    }

                case .failure:

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

                }
            }
        }
}

View

• segmentContentsArrayはSegmentのTitleと画像のURLを取得する時に使います。

• for count in 0...segmentContentsArray.count - 1{}内で、insertSegment(withTitle: String, at: Int, animated: Bool)を使用して、表示したい個数分のSegmentを作成します。

SegmentFile

import Foundation
import UIKit

class SegmentFile{

    let alamofireModel = AlamofireModel() 
    let uiSegmentetControl = UISegmentedControl() //インスタンス作成
    let segmentContentsArray = ["Cat","Dog","Bear","Sea","Mountain"]  

}

extension SegmentFile{

    func createSegmentControl(targetView:UIView){

        for count in 0...segmentContentsArray.count - 1{

            uiSegmentetControl.insertSegment(withTitle: segmentContentsArray[count], at: count, animated: true)

         }    

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

        uiSegmentetControl.backgroundColor = UIColor.white
        uiSegmentetControl.selectedSegmentTintColor = UIColor.systemGreen

        targetView.addSubview(uiSegmentetControl)

    }

}

Controller

• Segmentを選択時に画像のURLを取得したいので、addTarget(target: Any?, action: Selector, for: UIControl.Event)を使用します。今回は、actionに#selector(displayImage)を入れています。なので、viewWillAppearを出た場所で@objc func displayImage(sender:UISegmentedControl){}を作成します。

• forEachの({})内にある$0は、senderArrayの値が1つずつ入ってきます。

• $0 == sender.selectedSegmentIndexで選択されたSegmentを確実に調べます。選択されたselectedSegmentIndexと同じIndex番号のsegmentContentsArrayの値を使い画像のURLを取得してきます。

ViewController

import UIKit
import SDWebImage

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var segmentedControlView: UIView!

    let segmentFile = SegmentFile()
    let alamofireModel = AlamofireModel()
    let collectionViewFlowLayout = UICollectionViewFlowLayout()

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self

    }

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

        segmentFile.createSegmentControl(targetView: segmentedControlView)

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

        segmentFile.uiSegmentetControl.addTarget(self, action: #selector(displayImage), for: .valueChanged)
    }

    @objc func displayImage(sender:UISegmentedControl){

        let senderArray = [0,1,2,3,4]

        senderArray.forEach({

            if $0 == sender.selectedSegmentIndex{

                alamofireModel.searchGetImageURL(searchKeyword: segmentFile.segmentContentsArray[sender.selectedSegmentIndex])

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

                    self.collectionView.reloadData()

                }             
            }            
        })        
    }   
}

• CollectionViewの解説はこちらで簡単にしていますので、必要な方はご覧くださいUISliderとCollectionViewの簡単復習App

ViewController

extension ViewController: UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

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

        return alamofireModel.jsonResultDatasArray.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: alamofireModel.jsonResultDatasArray[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)

    }   
}

終わり

最近、同じbackGroundColorを何度も使ってる気がする。
ご指摘、ご質問などありましたら、コメントまでお願い致します。