タブアイコンは、マルチタブ インターフェースで個々のタブを表すために使用されるグラフィック要素です。各タブアイコンには、未選択と選択済みの 2 つの状態があります。
詳しくは、 密度に応じたアイコンセットを使用する場合は、低密度のアイコンセット、低密度アイコンセット、低密度アイコンセット、 対応できるよう設計されていますそうすればアイコンが確実に アプリをインストール可能なデバイスのさまざまな範囲において、適切に表示する必要があります。 デザイナー向けのヒントをご覧ください。 をご覧ください。
最終的なアートは透過 PNG ファイルとしてエクスポートする必要があります。含めない 背景色。
Adobe Photoshop でアイコンを作成するためのテンプレートは、アイコン テンプレート パックをご覧ください。
警告:
タブアイコンのスタイルは、
Android 2.0 と以前のバージョンの比較宛先
すべての Android バージョンをサポートするには、デベロッパーは次のことを行う必要があります。
1.Android 2.0 以降のタブアイコンを
drawable-hdpi-v5、drawable-mdpi-v5、drawable-ldpi-v5 ディレクトリ。
2.以前のバージョンのタブアイコンを配置する
drawable-hdpi、drawable-mdpi、drawable-ldpi ディレクトリ。
3.android:targetSdkVersion を 5 以上に設定します。
<uses-sdk>
アプリ マニフェスト内。
これにより、新しいタブスタイルを使用してタブをレンダリングする必要があることがシステムに通知されます。
2 つのタブの状態に対するアイコンの提供
タブアイコンには、未選択と選択済みの 2 つの状態があります。アイコンを表示する 複数の状態がある場合、デベロッパーは 都道府県 リスト ドローアブルを各アイコンに設定します。これは、どの画像がリストされた XML ファイルで、 さまざまな UI の状態を示しています
たとえば、「友達」という名前のタブがあるタブ ウィジェットの場合、「Coworkers」は 次のようなディレクトリ構造を使用できます。
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...上記の XML ファイルの内容は、対応する参照モジュールを参照する必要があります。
選択または選択解除のアイコン ドローアブル。たとえば、次のコードは
ic_tab_friends.xml の場合:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- selected state --> <item android:drawable="@drawable/ic_tab_friends_selected" android:state_selected="true" android:state_pressed="false" /> <!-- unselected state (default) --> <item android:drawable="@drawable/ic_tab_friends_unselected" /> </selector>
Android 2.0〜Android 2.3
次のガイドラインでは、Android のタブアイコンをデザインする方法について説明します。 2.0 ～ Android 2.3（API レベル 5 ～ 10）
サイズと配置
タブアイコンにはシンプルな形状とフォームを使用し、 最終的なアセット内に配置されます。
図 1 は、 できます。アイコンのサイズを実際の境界よりも小さくする必要があります。 指定します。
アイコンの推奨サイズを示すために、 図 1 には、3 つの異なるガイド長方形が含まれています。
- 赤色のボックスは、アセット全体の境界ボックスです。
- 青いボックスは、実際のアイコンの推奨境界ボックスです。 アイコン ボックスのサイズはアセット ボックス全体よりも小さくして、 使用できます。
- オレンジ色のボックスは コンテンツは正方形です。正方形のアイコンのボックスは他のアイコンよりも小さい 2 種類のビジュアル ウェイトを統一します。
|
|
|
|
|
|
|
図 1. 境界内でのタブアイコンのサイズと配置 使用できます。 |
スタイル、色、効果
タブアイコンは、フラットかつマットな、正面向きの画像にします。
タブアイコンには、選択済みと未選択の 2 つの状態があります。
|
図 2. 未選択のタブアイコンのスタイルと効果 注: ピクセルサイズはすべて中密度用です。他の密度の場合は適宜サイズ調整する必要があります。
|
|
図 3. 選択済みのタブアイコンのスタイルと効果 注: ピクセルサイズはすべて中密度用です。他の密度の場合は適宜サイズ調整する必要があります。
|
すべきこと、すべきでないこと
推奨事項と禁止事項Google Chat 向けのタブアイコンを作成する際に 説明します。
アイコンの例
下図は、Google Play Console で使用される標準的な高密度タブアイコンです。 構築しました
警告: これらのリソースはプラットフォームのバージョンによって異なる可能性があるため、 システムのリソースのコピーを参照すべきではありません。目標 アイコンやその他の内部ドローアブル リソースを使用する場合は、 アプリのリソースにあるアイコンやドローアブルのローカルコピー アプリケーション コードからローカルコピーを参照します。こうすることで、 システムの設定が変更されていても、アイコンの外観を 変更をコピーします。以下のグリッドは完全なものではないことに注意してください。
Android 1.6 以前
次のガイドラインでは、Android のタブアイコンをデザインする方法について説明します。 1.6（API レベル 4）以前。
構造
- 未選択のタブアイコンには、 メニュー アイコン でも外側は光ってない
- 選択済みのタブアイコンは未選択のタブアイコンに似ていますが、表示が暗くなります 前部分のグラデーションは ダイアログ アイコン
- タブアイコンには 1 ピクセルのセーフフレームがあり、端にのみ重ねる必要があります アンチエイリアスを作成します
- このページで指定されているすべてのサイズは、32x32 ピクセルのアートボードのサイズに基づいています。 Photoshop テンプレート内の境界ボックスの周りには 1 ピクセルのパディングを確保します。
|
図 3. 未選択のタブにセーフフレームと塗りつぶしのグラデーション 追加できます。（アイコンのサイズは 32 x 32） |
|
図 4. タブアイコンのセーフフレームと塗りつぶしのグラデーション 選択されます。（アイコンのサイズは 32 x 32） |
未選択のタブアイコン
ライト、効果、シャドウ
未選択のタブアイコンは、選択済みのタブアイコンに似ていますが、 シャドウは薄い内側と、ダイアログのアイコンと同じ前面部分のグラデーションです。
|
図 5. 未選択のライト、効果、シャドウ 。
|
詳細な手順
|
選択済みのタブアイコン
選択したタブアイコンには、メニューと同じ塗りつぶしグラデーションと効果があります アイコンですが、外側が光っていません。
|
図 6. 選択したタブのライト、効果、シャドウ 追加できます。
|
カラーパレット
|
詳細な手順
|
