Kotlinを使用した素晴らしいアーキテクチャコンポーネント—アダプティブなアプリアイコン

Android Studioのアダプティブアイコン設定ウィンドウ

皆さんは、Kotlin、Dagger 2、Android Architecture Components、Retrofit 2、Adaptiveアイコン、およびAndroidで行われている他の多くの素晴らしい機能と進歩について既に聞いたことがあるはずです。最近、GoogleはAndroid P Developerプレビューも開始しました。私はこれらのホットなトピックについてかなり長い間読んでおり、私のアプリケーションでもそれらを使用しようとしました。そこで、ここで新しいことを学び、知識をコミュニティ自体に共有しようとする最初の試みがあります。
私は主に上記の技術スタックの利点に焦点を合わせて実証するシリーズを作成し、GotHubのSearch APIを使用してGitHubユーザーを検索できるシンプルなKotlinベースのAndroidアプリケーションを開発します。

興奮を感じ?ただ乗ってください。楽しいライドになるでしょう。

コンテンツ

  1. アダプティブなアプリアイコン
  2. Dagger 2を使用した依存関係の注入
  3. 部屋を作る
  4. このシリーズの今後のブログでさらにポイントを追加していきます

アダプティブなアプリアイコン

昨年のGoogle I / O’17で、GoogleはAndroid Oreo(APIレベル26)オペレーティングシステムにアダプティブランチャーアイコンを導入しました。アプリケーションのロゴをデザインするための新しい、スタイリッシュでエレガントな方法。この新しい形式を使用すると、アプリケーションのランチャーアイコンをさまざまなOEMでさまざまな形で表示できます。つまり、アダプティブアイコンは1つのデバイスに円形のアイコンを、別のデバイスに正方形のアイコンを表示できます。

そのため、アプリケーションのランチャーアイコンの形状は次のように異なります。

円形の適応アイコン正方形の適応アイコン丸みを帯びた正方形の適応アイコン四角形の適応アイコン

スマートフォンでサポートされているOEMが提供するデフォルトのマスクに応じて、システムで使用され、デバイスで使用可能な同じ形状のすべてのアダプティブアイコンをレンダリングします。

基礎

アダプティブアイコンの最も重要なコンポーネントは、前景レイヤーと背景レイヤーです。アダプティブアイコンを作成するには、上記の2つの部分(前景レイヤーと背景レイヤー)でランチャーアイコンを分離する必要があります。

ランチャーアイコンのサイズは、Androidバージョン7.1以前では48 x 48 dpでした。ただし、Googleのアダプティブアイコンに関する公式ドキュメントによれば、アプリはアダプティブアイコンの両方のレイヤーを作成するために、特定のガイドラインセットに従う必要があります。

  • 前景レイヤーと背景レイヤーの両方のサイズは108 x 108 dpである必要があります(背景レイヤーは不透明でなければならず、前景レイヤーは透明にすることができます)。
ランチャーアイコンのサイズ(ソース)
  • ランチャーアイコンは、マスキングの内側(72 x 72 dp)でなければなりません。
OEMマスキングアニメーション(ソース)
  • OEMは視差、パルス、その他多くの効果のようなさまざまな種類の視覚効果を実行できるように、各側から18 dpの余分なスペースがあります。
視覚効果(ソース)

ああ!もう1つ伝えたいことがあります。前景と背景のレイヤーは.svgまたは.png形式である可能性があります。このブログの参照セクションでリンクを共有します。ここから、ランチャーアイコンの前景レイヤーを作成する方法を学びました。

アプローチ

アダプティブアイコンを作成するには、2つのアプローチがあります。

  1. Android Studio自体で画像アセット機能を使用する(簡単で非常に簡単な機能)。
  2. 自分でタイプのXMLファイルを作成します。

このブログで最初のアプローチを見ていきます。ただし、開始する前に、アダプティブアイコンを作成するための注意が必要な前提条件があります。

アプリには26以上のtargetsdkversionが必要です。

最初のアプローチ

次の手順に従うだけで簡単にアプローチできます。

  1. resフォルダを右クリックして、[新規]> [画像アセット]オプションを選択します。次のようになります。

2.ステップ1の後、次のような画像アセット設定ウィンドウが表示されます。

この構成ウィンドウにはすべてのオプションが表示されているため、いくつかのオプションがあります。以降のステップでアダプティブアイコンを作成するために必要なオプションを見ていきます。

3.このステップでは、そのまま残す特定のオプションがあります。

  • デフォルトのランチャーアイコン(適応型およびレガシー)で選択されているため、[アイコンタイプ]オプションはそのままにします。
  • ランチャーアイコンの名前はic_launcherと表記されています。要件に応じて名前を変更できます。
  • この構成ウィンドウには、セーフゾーンの表示(ランチャーアイコンのプレビューウィンドウでセーフゾーンの表示を切り替える)とグリッドの表示(アイコンの比率の一貫性の設定に役立つキーライン形状の表示を切り替える)の2つのトグルボタンがあります。 。
  • 設定ウィンドウには、フォアグラウンドレイヤー、バックグラウンドレイヤー、レガシーという3つのタブがあります。次の手順でそれらを確認します。

4.ステップ3を実行した後、background.svgまたはbackground.pngファイルを追加します。 GIMP v2.8を使用して、432 x 432ピクセルのbackground.pngファイルを作成しました。次のようになります。

background.png(432 x 432 px)

背景レイヤーセクションの簡単な説明だけを示します。次のようなフィールドがあります。

  • 名前:要件に応じて背景レイヤーの名前を設定します。
  • アセットタイプ:背景レイヤーに.svgまたは.pngファイルを使用しているため、画像タイプを選択します。
  • パス:バックグラウンドファイルの適切なパスを選択します。

画像設定ウィンドウで背景ファイルを背景レイヤーに追加すると、次のような変更が表示されます。

背景画像を選択した後のランチャーアイコン

5.ステップ4の後、[フォアグラウンドレイヤー]タブを選択し、foreground.svgファイルまたはforeground.pngファイルを追加します。これらのファイルは、バックグラウンドファイルと同じサイズです。この記事の上記のガイドラインに従って、GIMP v2.8自体を使用してフォアグラウンドファイルを作成しました。また、以下のリソースセクションで、長い影のあるシンプルなテキストタイプのロゴを作成する方法についてのリンクを共有しますが、ロゴは次のようになります。

foreground.png(432 x 432 px)

背景レイヤーで名前と資産タイプを選択したように、前景レイヤーでも同じことを行います。したがって、画像構成ウィンドウでフォアグラウンドファイルのフォアグラウンドレイヤーへのパスを選択すると、次のような変更が表示されます。

前景画像を選択した後のランチャーアイコン

6.このステップは最後から2番目のステップになります。レガシータブを選択します。3つのオプションがあります。

レガシーアイコンおよびその他のアイコンオプション

このタブでは、レガシーアイコン、丸いアイコン、Google Playストアアイコンの3種類の追加アイコンが生成されます。アイコンの種類ごとにyesまたはnoのオプションがあります。したがって、アプリのすべてのアイコンを生成し、[次へ]を押します。

7.すべてのステップを実行した後、Android Studioはmipmapフォルダーにすべての出力ファイルを生成し、すべてのファイルを賢明に分割します。この出力ウィンドウを見てみましょう。

出力ファイル概要ウィンドウ

ご覧のとおり、2つのランチャーアイコンXMLファイルがあります。1つは通常のアイコン用で、もう1つは丸いアイコン用です。これらには タグがあり、mipmap- anydpi-v26フォルダー。すべてのフォルダーとファイルを確認した後、最後に[完了]と[出来上がり]をクリックします。アダプティブアイコンの準備ができました。

アダプティブアイコンの魔法を見てみましょう。

GSearch App Adaptiveアイコン

それはすべて適応アイコンについてです。ソースコードは次の場所にあります。

このシリーズの第2部では、Daggerを使用して依存性注入がどのように機能し、このアプリに統合するプロセスを説明します。乞うご期待…

資源

これらは、アダプティブアイコンを実装するために従ったリソースです。皆さんもこれらのリソースを見ることができます。

  1. Nick Butcherによるアダプティブアイコンの設計
  2. アダプティブアイコンなど-StylingAndroid
  3. アダプティブアイコンのテスト用
  4. GIMPでフラットロングシャドウを作成する方法

願わくば、このブログがあなたのアプリのための素晴らしくてクールなアダプティブアイコンの作成に役立つことを願っています。アダプティブアイコンの実装に関する提案がある場合は、コメントセクションでお知らせください。

読んでくれてありがとう。また、この記事を読み、楽しんでいただければ、次のことができます。

Twitterでフォローしてください: