髪も切れるiOSエンジニアのブログ

元美容師エンジニアの成長と奮闘の記録

自作家計簿アプリ製作の軌跡②-1 〜Calendarの実装〜

今回はアプリの顔となるカレンダー画面を実装していきます。
ベースはUICollectionViewを使います。
複雑な印象があったけど、作業を切り分ければ簡単。

環境

xcode 8.0
Swift 3.0

参考記事

swift3にも対応済みのこの記事にはお世話になりました。
http://qiita.com/robokunx/items/ed3bbb4edb94e226b8db
http://qiita.com/robokunx/items/60acfaa6e6834e6726f1

実装

切り分けます。
1、CalendarCellクラスを追加
2、一旦CollectionViewを最低限実装する
3、DateManagerクラスの追加
3-1、その月のカレンダーの最初の週の日曜日が何日かを取得する
3-2、その月のカレンダーの最後の週の土曜日が何日かを取得する
3-3、-1から-2までが何日あるかを取得する

1、CalendarCellクラスを追加

Cocoa Touch Class から
UICollectionViewCellをxib付きで作成します。
f:id:Tansok:20161117233825p:plain
自分のアプリのカレンダーのデザインはセルのど真ん中に日付が一つのシンプルなものなので
UILabelをど真ん中に一個。このLabelは実装クラスにも紐付けておきます。
f:id:Tansok:20161117234111p:plain

2、一旦CollectionViewを最低限実装する

1、で作ったカスタムセルでCollectionViewを実装します。
「最低限」としたのはこの段階では「一旦カレンダーっぽい画面を表示させる」だけで、日付に関しては考えません。
切り分け切り分けw
StoryBoardでUICollectionViewを設置します。
この時もとから設置されてるCollectionViewCellのCustomClassの設定を忘れずに
f:id:Tansok:20161118001316p:plain
このCalendarCellは1、で作ったカスタムセルのこと。
実装クラスにOutlet接続します。
実装クラスに必要なデリゲートを継承させます。
後に必要になる週の数の変数も宣言しておきます

class CalenderViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
     @IBOutlet weak var calenderView: UICollectionView!
    let weekDayCount: Int = 7

viewDidLoadで
・CollectionViewのデリゲートに自分自信のクラスをセット
・1、のxibで作ったカスタムセルの登録
を行います。

    override func viewDidLoad() {
        super.viewDidLoad()
        
        calenderView.delegate = self
        calenderView.dataSource = self
        calenderView.backgroundColor = UIColor.white
        
        self.calenderView.register(UINib(nibName: "CalenderCell", bundle: nil), forCellWithReuseIdentifier: "CalenderCell")   
    }

ここからCollectionViewの必要なメソッドを実装していきます。
まずはセルの個数を指定するメソッド

    /// カレンダーのセルの個数を返す
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 一旦30日として、セルの数を30個にしておきます
        return 30
    }

次はセルの内容を設定するメソッドです

    /// セルの内容を設定するメソッド
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // viewDidLoadで登録したカスタムセルのcollectionViewのセルに設定
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalenderCell", for: indexPath) as! CalenderCell
        // 一旦何も設定せずにreturn
        return cell
    }

最後にセルのサイズとマージン(余白)設定です。

    /// セルのサイズを設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 一つのセルの幅 = コレクションViewの横幅 ➗ 7(週の日数)としている
        let width: CGFloat = collectionView.frame.size.width / CGFloat(weekDayCount)
        // 高さはコレクションViewを6等分します。
        let height: CGFloat = collectionView.frame.size.height / 6
        return CGSize(width: width, height: height)
    }
    
    /// セルの垂直方向のマージンを設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    /// セルの水平方向のマージンを設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

高さを6等分しているのは、カレンダーの段って最大6段ですよね。それだけw
自分のアプリの仕様上、セルとセルの間の余白は取りません。コレクションViewはデフォルトでマージンが入っているため、
こちらで明示的にマージンを0に指定しないといけません。
では一旦実行
f:id:Tansok:20161118003811p:plain
自分は週を表示する行を、UICollectionViewとは別にViewと、その子のLabelを7つ設置して表示させています。
カレンダーのベースとなるコレクションViewを設置することができました。
次回はカレンダーの日付関連
DateManagerクラスを実装していきます。

つづく
自作家計簿アプリ製作の軌跡②-2 〜Calendarの実装〜 - 髪も切れるiOSエンジニアのブログ

自作家計簿アプリ製作の軌跡① 〜UITabBarControllerの実装〜

まずは家計簿アプリのベースとなるTabBarを導入します。
正直な話、xcodeのNew Projectでテンプレートの「Tabbed Application」を選択すれば
タブバーベースの状態でプロジェクトをスタートできますが
今回はあえて「Single View Application」でスタートします。

環境

xcode 8
swift 3.0

実装

はじめに言っておきますが、基本的なタブバーのページ達を用意するだけなら
StoryBoard内だけで完結させられます。

UIViewControllerをUITabBarControllerに入れ替え

デフォルトで用意されているUIViewControllerを削除を削除します。
f:id:Tansok:20161112194201p:plain
これですね。
次にUITabBarControllerをドラッグアンドドロップします。
f:id:Tansok:20161112194647p:plain
するとご丁寧に2画面分のTabBarControllerが設置されました。

初期表示画面の設定

ただしこのままでは画面に表示されません。
起動時の最初に表示させる画面が設定されていないからです。
TabBarControllerを初期画面に設定します。
Show the attributes inspecter内の「Is initial View Controller」にチェックを入れます。
f:id:Tansok:20161112195123p:plain
これでTabBarControllerが初期画面に表示されました。

画面追加

今回の家計簿アプリは3画面必要なので一画面足します。
新たにViewControllerをStoryBoard上に足します。
そしてTabBarControllerからcontrol + ドラッグで新たに足したViewControllerに紐づけます。
f:id:Tansok:20161112195644p:plain
すると上のようなウィンドウが表示されるので、「view controllers」を選択します。
このview controllersはTabBarが管理する複数の画面が格納されるarray型のプロパティです。
f:id:Tansok:20161112195913p:plain
はい完成!
これで3画面分のタブバーをベースにした基本画面が完成しました。

つづく

自作家計簿アプリ製作の軌跡 〜 Prologue 〜

はじめに

そもそものこのプロジェクトの発端を説明します。
エンジニアになって半年。実際開発の現場に出始めたのはいいんだけど、ふと思ってしまった。
「アプリってどうやって世に出回るんだろう。」
そりゃAppStoreからだろうけど、それまでの申請は?それに必要な登録は?
プログラムについて勉強してきたけど、根本的なこと知らないじゃん!
じゃあ自分で一からアプリ作って申請からリリースまでを経験しちゃえばいいじゃん!
そんな感じ。

環境

xcode8
swift 3.0

製作アプリ概要

家計簿アプリ
カレンダー形式で、1日1日の支出を記録
収入、基本的な支出(家賃とか光熱費)を登録
自動計算で月末に黒字分、もしくは赤字分を算出

アプリのテンプレートは
TabBarControllerを基本としたタブでページを切り替えるアプリ。
Tab1 ⇨ カレンダーページ
Tab2 ⇨ 今日の支出入力画面
Tab3 ⇨ 設定画面
計3タブページ構成


以後、製作の軌跡をブログに残していきますよ