【swift】チェックボックスありの利用規約画面を作る

スクリーンショット 2019-08-03 23.46.37

利用規約は大事

 

document-1446078_1280

今あるサービスなどの連動したアプリケーションを作るときには、お客様の同意などをしっかりとらなければいけません。そのため、利用規約ページは必須になってきます。

しかし、利用規約のサンプルアプリケーションがあまり出てこなかったので、サンプルを作成しました。

 

作成するアプリケーション 完成系

 

Simulator Screen Shot - iPhone 8 - 2019-08-03 at 22.53.05

Github

 

https://github.com/karamawariken/terms-sample

 

作成手順

 

プロジェクトを作成

 

terms-sampleというプロジェクトを作成しました。

スクリーンショット 2019-08-02 8.45.17

 

storyboradでUIパーツ配置

 

まずは、こんな風にUIパーツを配置していきます。

上から「Label」「text View」「button」 3つです。

スクリーンショット 2019-08-02 8.44.37

 

パーツの編集

 

LabelとText Viewの内容修正

LabelとText ViewのText内容を変更します。

スクリーンショット 2019-08-02 8.51.32

 

するとこのような画面になります。

スクリーンショット 2019-08-02 8.51.23

 

UIButtonの編集

 

同意の際には、よくチェックボックスが利用されますが、swiftのUIButtonでは、標準のチェックボックスがありません。そのため、自作してあとで切り替えをプログラムします。

check_off check_on

 

Assets.xcassetsに「check_on@2x」や「check_on@3x」で2倍. 3倍の大きさの画像をドラックアンドドロップしてプロジェクトに画像追加します。

スクリーンショット 2019-08-02 8.56.49

 

storyboardのButtonをクリックしてから、右側の情報の右から3番目のマークをクリックして下記のようにします。

ポイントは、image部分でcheck_offを入れたあと、自動的にText ColorがDefaultの無色になるため注意が必要です。

スクリーンショット 2019-08-02 9.14.40

チェックボックスを入れたあと、文字と画像の位置の調整を行います。

右側の情報の右から2番目のマークをクリックすると位置調整の画面になるので、今回は、Title Insetsを調整しましょう。

スクリーンショット 2019-08-02 9.25.14

するとこのようなUIになります。

スクリーンショット 2019-08-02 9.25.44

 

他のボタンも編集します。違いがわかるため最後に2をつけました。

スクリーンショット 2019-08-02 9.54.37

 

storyboardのUIパーツとプログラムの紐付け

 

ボタンの紐付けを終えると下記のようになっています。

プログラム

 

 

チェックボタンの実装

 

次にタップされたら、画像を切り替えるようにします。

まずは、check_onとcheck_off画像のUIImageを生成します。

 

次にviewDidLoad()でボタンの選択時と非選択時でそれぞれのUIImageを設定します。

 

ボタンクリック時のアクションで、タップ前のボタンの選択状態を反転させます。

 

Simulator Screen Shot - iPhone 8 - 2019-08-03 at 22.24.51

 

次に進むボタンの実装

 

UIButtonの装飾については、別の記事で紹介しているので参考にしてください。

【Xcode9 swift4】UIButtonの使い方 画像ボタンや角丸ボタンなど

次に進むためには、同意ボタンがどちらともチェックされているか判断しなければいけません。また、利用規約ページでは押せる時と押せない時のデザインも切り替わるものが多いです。

まずは、ボタンのデザインを変更する関数を作成しましょう。

 

この関数をviewDidLoad()とボタンアクションにそれぞれ加えます。

 

同意ができていれば、次に進むボタンのアクションを実行する

 

これで、両方のボタンがチェックされているとき(ボタンが青になっているとき)に次に進むボタンをタップすると、print関数が実行されてコンソールに「次に勧めます」が表示されました。実際にアプリで利用するときはnavigationなどを利用すると思うので、画面遷移させてください。

Githubに作成アプリを置いています。

https://github.com/karamawariken/terms-sample

 

まとめ

 

利用規約だけ存在する不思議なアプリケーションが完成しました。Xcodeでは、UIButtonでチェックボックスが標準でないのがつらいですね。

もっと改造していくとすると、cornerRadiusやborderWidthなどが数字を直で入れているので、private 変数で定義したり、structなどでチェック済み、未チェックの状態のパラメータを作ってしまうのもいいかと思います。

サンプル作成することでとても勉強になるため、こんなページのサンプルが欲しいなどがありましたら、コメントやtwitterでコメントしてもらえると嬉しいです。

 

 


Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です