- 上部ステータスバーと下部タブメニューのデザインを設定することができます。
- デザイン設定の完了後、適用された内容を確認するには、アプリを一度終了してから再起動してください。
上部ステータスバーのデザイン設定
上部ステータスバーのデザイン設定
- アプリ起動時に表示される上部ステータスバーのデザインを変更することができます。
- 設定内容はAndroid Marshmallow(6.0、2015年リリース)以上のバージョンから正常に表示されます。
- iOSの場合はすべてのバージョンでステータスバーの設定内容が正常に表示されます。
背景色
- アプリを使用している際に画面の上部に表示されるステータスバーの背景色を指定することができます。
- 設定内容は右側の「プレビュー」エリアにてリアルタイムで確認できます。
- 背景色を指定しない場合、デフォルト色(ブラック、#000000)が適用されます。
画面スクロール前の背景透明化
- スクロールがアプリ画面(ページ)の最上部に位置している場合、ステータスバーの背景色を透明にすることができます。
- 画面をスクロールするとステータスバーは「背景色」項目で設定した色で表示されます。
- この機能を使用するには、モバイルショップをデザインする際に上部に20pxの余白(margin)を設定する必要があります。
- 設定内容は右側の「プレビュー」エリアにてリアルタイムで確認できます。
文字色
- 上部ステータスバーに表示される文字の色を設定することができます。
- 設定内容は右側の「プレビュー」エリアにてリアルタイムで確認できます。
下部タブメニューのデザイン設定
下部タブメニューの表示
- 表示する：アプリの下部にタブメニューが表示されます。
- 表示しない：アプリの下部にタブメニューが表示されません。
自動非表示機能の使用
- チェックを入れる場合：アプリで画面をスクロールすると下部タブメニューが自動で非表示になります。
デザインタイプ
- スタイル選択：6つのデザインから一つを選択します。選択したデザインは右側のプレビューエリアに表示され、適用された状態を見ながら確認することができます。
- カスタム(直接編集)：下部タブメニューに関する内容(メニューの表示順やアイコンの画像など)を自由に設定することができます。
背景色
- カラーピッカーから色を選択してタブの背景色に指定することができます。
- 背景色を指定しない場合、デフォルト色(グレー、#575757)が適用されます。
メニュー編集
- 基本メニューとして提供されるメニューの場合、メニュー名の入力欄が非活性になっており、修正および削除を行うことができません。
- タブメニューには5~8個のアイコンを表示できます。なお、基本メニューの他に最大3つのメニューを追加することが可能です。
- 設定内容をリセットし、デフォルト設定に戻すことができます。(アプリに反映するには、「リセット」後に必ず「保存」ボタンをクリックしてください。)
- 「再読み込み」アイコンは「再読み込み中止」アイコンにトグルされるため、アイコン変更の際には両方のアイコンを同時に変更してください。
- 設定内容を保存すると直ちにタブメニューに反映されます。保存を行う前に設定内容を必ず確認してください。
- 変更されたタブメニューのデザイン設定を確認するためには、アプリを一度終了してから再起動してください。
メニュー表示順の変更
- メニューを選択して表示順を変更することができます。
- ※ チェックボックスが非活性状態のメニューは表示位置が固定されており、変更することができません。
リセット
- 設定内容をリセットし、デフォルト設定に戻すことができます。(アプリに反映するには、「リセット」後に必ず「保存」ボタンをクリックしてください。)
メニュー追加
- 「メニュー追加」を選択した場合は、ページ移動またはJavaScriptの実行を適用することも可能です。
- ページ移動：下部のタブメニューをクリックした場合、リンクされたページに移動します。
- JavaScript実行：下部のタブメニューをクリックした場合、設定されたJavaScriptが実行(呼び出し)されます。ユーザーが下部タブメニューをクリックした際にイベント告知のポップアップなどがショップ内に表示されるようにしたい場合や、ショップアプリ専用でJavaScriptの呼び出しを適用したい場合などに活用することができます。
プレビュー
- デザイン設定が完了したタブメニューを適用する前にプレビュー機能で確認することができます。
