iPhoneアプリでありがちな設定画面を作る方法

はじめに

iPhoneアプリ開発初めて約1ヶ月経ちました。
web開発しかやったことなかったので想像以上に戸惑いながらも徐々になれてきました
とはいえ今月は疲れてます、、、笑

まぁアプリでありがちな設定画面

今回はこの画面を作るのに少しつっかかりましたが、とりあえず解決したので記録しておきます

実装方法

画面の横幅を３で割ればそれぞれの横幅とxのいちが決められるのでUIViewにそれを当てはめればいいのかなとも思いつつ、UICollectionViewなんて便利そうなものがあったので今回はこれをつかってみました

import UIKit

class SettingTopViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    var collectionView: UICollectionView!
    
    let items = [
        "設定1",
        "設定2",
        "設定3",
        "設定4",
        "設定5",
        "設定6",
        "設定7",
        "設定8",
        "設定9",
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.backgroundColor = UIColor.clearColor()
        
        self.view.addSubview(collectionView)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items.count
    }
    
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell: CustomUICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell",
            forIndexPath: indexPath) as! CustomUICollectionViewCell
        cell.textLabel?.text = items[indexPath.row]
        return cell
    }
    
    // ⭐️これがポイントかも
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let width: CGFloat = self.view.frame.width / 3 - 2
        let height: CGFloat = width
        return CGSize(width: width, height: height) // The size of one cell
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        let frame: CGRect = self.view.frame
        let margin: CGFloat = 0
        return UIEdgeInsetsMake(margin, margin, margin, margin) // margin between cells
    }
    
}

class CustomUICollectionViewCell : UICollectionViewCell{
    var textLabel : UILabel?
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        textLabel = UILabel(frame: CGRectMake(0, 0, frame.width, frame.height))
        textLabel?.text = ""
        textLabel?.font = UIFont.systemFontOfSize(12)
        textLabel?.backgroundColor = UIColor.whiteColor()
        textLabel?.textAlignment = NSTextAlignment.Center
        self.contentView.addSubview(textLabel!)
    }
    
}

結論というかソースそのままなんですけど、コピペできるようなのがなかったのでまんま載せておきます。
ポイントとかほとんどないのですが、sizeForItemAtIndexPathのセルサイズがおかしいと期待する結果にならないのでとまどいました。

let width: CGFloat = self.view.frame.width / 3 - 2
これは画面全体の幅を３等分（列数分）して列ごとの隙間を１としたので1*2で２を引いた結果がセルの幅という意味です

おわり

だいぶなれてきたけど、アプリ開発って思った以上に面倒臭いとおもった（難しいというより面倒）
HTML + CSSなら簡単にできることを座標計算したり、、、こんなことアプリ開発者側がやるの？っていう疑問と戦いながら、もっと簡単にできるだろうと思いながらネットで調べてたら時間だけ過ぎていくことが多い、、、

簡単なものながら徐々にノウハウもたまってきたのですこしつつのせてゆきたいとおもいます

web開発メインだけどアプリも勉強中という同じような立場の人に役に立つような内容を書いていきたいと思います

以上です