relux iOSアプリに Material Design 風のフォームを導入
relux iOSアプリにマテリアルデザイン風のフォームを導入しました。
マテリアルデザインのライブラリはMaterialKitが有名ですが
見た目がイメージしていたものと異なるのでスクラッチ開発しました。
実際のアプリケーションのスクリーンショットと交えながら紹介していきます。
マテリアルデザインとは？
Googleが発表したデザインガイドラインです。
詳しくはこちらを参照
Introduction - Material design - Material design guidelines
入力フォーム
画面表示
入力フォームはホワイトスペースを広くとることでスッキリさせています。
また、エラーメッセージが表示されても綺麗にみえるように調整しています。
フォームレイアウト
どのフォームも基本的に以下の要素で構成されています。
- タイトル
- 必須項目マーク
- テキストフィールド
- 下線
- アイコン
- エラーラベル
エラーの表示、非表示でレイアウトの高さがかわらないようになっています。
Androidのサポートライブラリでは高さが動的にかわるようになっていますが
レイアウトがガタガタかわると美しくないのであえて固定しました。
フォームの共通処理
必須項目制御
BOOLで必須項目を設定できるようにしています。
必須項目にするとフォーカスがはずれた際に
自動的に空か判定してエラーメッセージを表示するようにしています。
キーボード制御
AccessoryViewが自動で挿入されるようにしています。
「決定する」を押すとキーボードが閉じます。
キーボードのNext(Enter)を押すと次のフォームにフォーカスするようになっています。
次のフォームが存在しなければキーボードを閉じます。
次のフォームにフォーカスがあたると
自動的にスクロールされるようになっています。
ここの使用感はかなりこだわっってつくっているので
実際のアプリをダウンロードして触ってみてください！
フォームの状態
フォームの状態は以下の3種類です。
disabledは用意していません。
シンプルなデザインなので迷わないよう
disabledにするのではなく表示しないというルールにしています。
フォーカスがあたっていない状態
フォーカスがあたっている状態
フォーカスがあたると下線の色を変更し
フォームの位置を計算してスクロールします。
エラーが表示されている状態
エラーメッセージが設定されると下線の色を変更し
エラーメッセージラベルを表示します。
フォームの種類
フォームの種類によって入力方法を切替えています。
ラジオボタン以外は使いまわせるように汎用的な設計になっています。
テキストフィールド
テキストビュー
セレクトボックス
日付ピッカー
ラジオボタン・スイッチ
フォームの入力検知
NSNotificationCenterのaddObserveを使用しています。
クレジットカード入力欄などの一部のフォームは入力内容をもとに制御を行っています。
下記は入力された数字をみてスペースをいれています。
AmericanExpressの場合（番号はダミー）
VISAの場合（番号はダミー）
細かいですが実際のカードと同じように表示されるので
入力ミスなどを減らすことができました。
※クレジットカードのスキャン機能は検討中です。
最後に
いかがでしたか？
iOSのフラットデザインとAndroidのマテリアルデザインの
良い部分を組み合わせることができたのではないかなと思います。
さらに良いユーザ体験を提供できるよう改善を行っていきます！
おまけ
今まで知らなかったのですがこちらのライブラリも良さそうですね。
github.com
