ホーム > 技術系 > Xcode

Xcodeのアーカイブ

Xcode+Swiftでじゃんけんアプリを作ってみた

最近勉強もかねて、簡単なiOSアプリを作ってみています。

今日は、練習も兼ねて簡単なじゃんけんアプリを作ってみました。

言語はSwiftでOSはiOS8.4、Xcodeのバージョンは7のベータ版です。

じゃんけんアプリの仕様

・相手のジャンケンの画像が表示されている
・相手が何の手を出した、勝ったか負けたか説明のテキストが表示される。
・こちらがジャンケンでどの手を出すかのボタンが3つ置いてあり、ボタンを押すとジャンケンが実行
・相手のジャンケンの画像が表示され、勝ったか負けたか、あいこかが表示される

アプリ作成の手順

1・Xcodeで新しいプロジェクトを作成して「Single View」で作成をする。

2・Storyboardへの配置

Storyboardに、こちらが出すグー、チョキ、パーに対応するボタンをそれぞれ画面に配置する。
相手の手を表す画像を設置するため、「UIImageview」を画面に配置する。
説明のテキストを表示するため「Label」を中央に設置する。
これらのオブジェクトをauto layoutを使って表示位置を調整する。

3・画像のアップロードと設置

グー、チョキ、パーを表す画像を表示するため、画像をそれぞれ準備してプロジェクトフォルダにアップロードする。
アップロードはドラッグ&ドロップでも行えるが、画面左下の「+」ボタンから「Add files to ~~」からアップロードしてもよい。

それぞれのジャンケンのボタンを画像化するため、ボタンのプロパティから画像を選択する。
※ 画像を選ぶと右側のプロパティ画面に画像を選ぶところがある。

相手の手を表すUIImageViewに画像を設定する。
※ 同様に右側のプロパティ画面から設置する。

4・じゃんけん処理コードの記述

Story Boadに設置したそれぞれのオブジェクトをViewControllerのコードにCtrlを押しながらドラッグしてOutlet接続を行います。

また、3種類のジャンケンボタンを右クリックすると表示されるメニューの「Touch Down」の右側にある◯をView Controllerにそれぞれドラッグしてボタンを押したときの関数を作成します。関数名は適当につけたらOKです。

以下は、私が作成した関数のサンプルです。

これで問題なければ実行できるはずです。

以下は、今回作成したアプリの画面キャプチャです。

ジャンケン画像1

ジャンケン画像2

ジャンケン画像3

Xcodeでタブ画面と画面ごとの処理を実装する

Xcodeでのアプリ開発について、まだまだ初心者ですが、勉強中です。

本日は、勉強したタブ画面の実装と、タブ画面ごとの処理の実装について書いてみます。

まず、タブ画面の作成については、下記のサイトの説明が分かりやすかったです。

第16回 タブコントローラーを表示させる|ドットインストールでiPhoneアプリ作成を勉強 | 経験知

詳しくは上記サイトを見てもらうとして、大まかな流れとしては

1・Story BoardへのTab Controllerへの埋め込み
2・追加したい画面の数だけView Controllerを追加
3・Tab ControllerとView Controllerを繋ぐ

といったところです。
これだけで、タブで画面表示が切り替わるアプリが完成します。

ただ、ここまでは簡単に出来たのですが、問題に突き当たりました。

それは、追加したView Controllerの画面への処理(ロジック)を記述できないということです。

追加したView Controllerから、もともとあったView Controllerへ定義しようと思っても…できません。

しかし、結果として、新しいViewConrllerのClassを定義してやる必要があるということが分かりました。

Xcodeの画面の左のプロジェクトのファイルが表示されているところの左下に「+」というボタンがあるので、そこをクリックすることで、新しいViewControllerのClassをプロジェクトに追加できます。

あとは、そのClassファイルと、追加したView Contorollerを紐付けてやることで、追加したClassファイルに処理を追加できることができるようになりました。

XcodeでWebviewを画面ピッタリに表示する

Xcodeで、とりあえず簡単にWebviewを使ってシンプルにウェブページを表示するだけのアプリを作ってみました。

手順
1・Single Veiwのプロジェクト作成
2・storyboadに、右下からWebviewのパーツをドラッグ&ドロップ
3・Webviewを選択し、大きさを画面ちょうどに調整
4・Webviewを選択し、右下にある四角い図形を選択し、Add Constrantsで、上が20、左右下は0に変更。Add 4 constrantsで適用

add 4 constraints

5・Webviewを選択し、右上の「Scales Page To Fit」にチェックを入れる

「Scales Page To Fit」にチェックを入れる

6・ViewControllerに必要なコードを追記

これでコンパイルして実行。

すると、ウェブページは表示されたのですが、右に謎のマージンが開いた状態に。

ここは、左メニューの「Constraints」で、設定されているConstraintsをチェックしていき、項目の中にある「Second item」を調整していくことで画面ピッタリに表示されるようになりました。


↓Story boardのConstraintsが余白に関係しているので、この中から関係ある余白の設定を調整する。


↑Relative to marginのチェックを外す

ポイントとしては、「Scale to Page To Fit」にチェックを入れることと、Constaraints追加後、左メニューに表示される各「Constraints」の設定が余白を表しているので、変な余白が入っている場合は、大抵このどこかにおかしいところがあるということです。
ここを調整していくことで画面ピッタリに表示されるようになりました。

怪しいConstraintsの設定のSecond Itemを「Superview.Leading Margin」にして、Relative Marginのチェックを外してみてください。

ホーム > 技術系 > Xcode

フィード

ページの上部に戻る