swift

【swift2.2】初心者がswiftで作ったカレンダーアプリ ②Storyboardにパーツを配置、AutoLayoutを設定

カレンダーを表示するシンプルなアプリを作ります。

目次
①プロジェクトを作成
②Storyboardにパーツを配置、AutoLayoutを設定
③IBOutlet、IBAction、その他の設定〜前編〜
④IBOutlet、IBAction、その他の設定〜後編〜
⑤プログラムを書く
⑥確認する



Storyboardにパーツを配置・AutoLayoutを設定
画面左、[Main.storyboard]をクリックする

Storyboard

ViewControllerをクリックする

ViewController

[Simulated Metrics]内の1番上にある[Size]をクリックし、項目内にある[iPhone 4-inch]をクリックする

iPhone 4-inch

画面右下にある検索バーに「uiview」と入力する

uiview

[View]を選択、Storyboardにドラッグアンドドロップで上にピッタリ配置する

viewUp

画面下にある①[Pin]をクリックし、②、③、④を入力、⑤をクリックする
※③はoffonに変えてから入力する

Pin

画面下にある[Resolve Auto layout issues]をクリックし、[Update Frames]をクリックする

autoLyaout

[Simulated Metrics]内の[Background]をクリックし、色を選ぶ

background

color

画面右下にある検索バーに「uicollection」と入力し、[Collection View]を選択、ドラッグアンドドロップで配置する

collectionview

画面下にある①[Pin]をクリックし、②、③、④を入力、⑤をクリックする
※③はoffonに変えてから入力する

Pin

画面下にある[Resolve Auto layout issues]をクリックし、[Update Frames]をクリックする

autoLyaout

[Simulated Metrics]内の[Background]をクリックし、色を選ぶ

background

backgroundColor

UICollectionViewの左上枠線内をクリックする

cellSelect

[Simulated Metrics]内の[Background]をクリックし、色を選ぶ

cellBackgroundColor

cellBackgroundColorSelect

[Simulated Metrics]内の[identifier]に「cell」と入力する

inputCell

cellを斜め下にドラッグアンドドロップで大きくする

cellDrag

画面右下にある検索バーに「uilabel」と入力し、[Label]を選択、ドラッグアンドドロップで配置する

uilabelDrag

[Label]を選択、ドラッグアンドドロップで配置する

yyyyMMDrag

画面した①[Align]をクリックし、②を入力、③をクリックする

Align

画面した①[Pin]をクリックし、②を入力、③をクリックする

※②はoffonに変えてから入力する

yyyyMMlayout

画面下にある[Resolve Auto layout issues]をクリックし、[Update Frames]をクリックする

autoLyaout

画面右下にある検索バーに「uibutton」と入力し、[Button]を選択、ドラッグアンドドロップで配置する

uibutton

左側に配置した[Button]をクリックし、[Simulated Metrics]内の [Title]に「前の月」と入力する

prevMonth

右側に配置した[Button]をクリックし、[Simulated Metrics]内の [Title]に「次の月」と入力する

nextMonth

「前の月」をクリックし、画面下の①[Pin]を選択、②を入力し③をクリックする

※②はoffonに変えてから入力する

uibuttonPin

画面下にある[Resolve Auto layout issues]をクリックし、[Update Frames]をクリックする

autoLyaout

「次の月」をクリックし、画面下の①[Pin]を選択、②を入力し③をクリックする

※②はoffonに変えてから入力する

buttonRightPin

画面下にある[Resolve Auto layout issues]をクリックし、[Update Frames]をクリックする

autoLyaout

関連記事

  1. swift

    【swift3.0】MPVolumeView 縦スライダー操作中にシステム音量を表示させずに音量を変…

    縦スライダー操作中にシステム音量を表示させずに音量を変更させます。…

  2. swift

    【swift2.2】初心者がswiftで作ったカレンダーアプリ ⑥確認する

    目次①プロジェクトを作成②Storyboardにパーツを配置、…

  3. swift

    【swift2.2】初心者がswiftで作ったカレンダーアプリ ③IBOutlet、IBAction…

    カレンダーを表示するシンプルなアプリを作ります。目次①プロ…

  4. swift

    【swift2.2】初心者がswiftで作ったカレンダーアプリ ⑤プログラムを書く

    カレンダーを表示するシンプルなアプリを作ります。目次①プロ…

  5. swift

    【swift2.2】初心者がswiftで作ったカレンダーアプリ ④IBOutlet、IBAction…

    カレンダーを表示するシンプルなアプリを作ります。目次①プロ…

  6. swift

    【swift2.2】初心者がswiftで作ったカレンダーアプリ ~目次~

    カレンダーを表示するシンプルなアプリを作ります。G…

カテゴリー

おすすめ記事

アーカイブ

PAGE TOP