iPhoneアプリでありがちな設定画面を作る方法
はじめに
iPhoneアプリ開発初めて約1ヶ月経ちました。
web開発しかやったことなかったので想像以上に戸惑いながらも徐々になれてきました
とはいえ今月は疲れてます、、、笑
まぁアプリでありがちな設定画面
今回はこの画面を作るのに少しつっかかりましたが、とりあえず解決したので記録しておきます
実装方法
画面の横幅を3で割ればそれぞれの横幅と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
これは画面全体の幅を3等分(列数分)して列ごとの隙間を1としたので1*2で2を引いた結果がセルの幅という意味です
おわり
だいぶなれてきたけど、アプリ開発って思った以上に面倒臭いとおもった(難しいというより面倒)
HTML + CSSなら簡単にできることを座標計算したり、、、こんなことアプリ開発者側がやるの?っていう疑問と戦いながら、もっと簡単にできるだろうと思いながらネットで調べてたら時間だけ過ぎていくことが多い、、、
簡単なものながら徐々にノウハウもたまってきたのですこしつつのせてゆきたいとおもいます
web開発メインだけどアプリも勉強中という同じような立場の人に役に立つような内容を書いていきたいと思います
以上です