Material Design 2.0では、いくつかの新しい概念が導入されました。 それらの1つは、インターフェイス要素の幾何学的形式に特に注意を払うことです。 そして、美しいカスタムシェイプを簡単に作成する方法があります。 MaterialShapeDrawableと呼ばれます。 どれほど便利で使いやすいか見てみましょう。
Androidアプリケーションの画面にグラフィック要素を追加するには、いくつかの方法があります。 最も簡単なのは、webpまたはpng形式のビットマップをインポートすることです。 もう1つのオプションはVectorDrawableを使用することです。これにより、必要なサイズに画像を拡大できます。 画面にグラフィックを追加する別の方法は、ShapeDrawableを使用することです。 後者は、シンプルな背景を追加したり、アイコンを作成したりする最も簡単な方法です。 ShapeDrawableで作成された画像は、画面上のピクセル密度に依存しません。 これらはxmlファイルに記述でき、別のグラフィックリソース（StateListDrawableなど）の一部であり、API v.1以降のAndroid SDKに存在します。
Figureの外観を変更するために、いくつかのShapeDrawableプロパティを変更できます。Figureの名前、塗りつぶしの色（またはグラデーション）、Figureの境界線の色です。 長方形の場合、角の角の半径も設定できます。 これらのプロパティを使用して、画面上の個々の画像、仕切り、ボタンの背景として、またはその他の目的で使用されるグラフィックを作成できます。 アプリケーションがAPI v.21 +およびShapeDrawableを標高のある要素の背景として使用している場合、これらの要素の下の影も正しい形状になります。
ShapeDrawableは、ほぼ常にうまく機能する便利なツールですが、Material Design 2.0の登場により、開発者はより柔軟なものを必要としています。 新しい設計システムでは、さまざまな形式を使用して、その意味、条件、および個々の適用スタイルを強調することが推奨されています。 上記のように、目的を達成する方法はいくつかありますが、最も単純な方法はもはや関係ありません。 これは、ベクターグラフィックスの使用を開始する必要があることを意味しますか？そのため、標高のあるインターフェイス要素のシャドウを「自由に」作成する機能が失われますか？ または、ラスターイメージを使用してロールバックし、画面上の6つの可能なピクセル密度のグラフィックリソースを作成する価値がありますか？ 幸いなことに、Material Design 2.0の登場により、まったく新しいコンポーネントライブラリが登場しました。
このライブラリは、Androidおよび他のプラットフォームのすべてのバージョンでiOSとWebおよびFlutterのバージョンのMaterial Design UIコンポーネントの外観と動作を統一するために作成されました。 コンポーネントライブラリは、新しいマテリアルデザインの多くの機能を実装しています。 たとえば、期待される動作を備えたBottomAppBarコンポーネントが含まれています。 他のコンポーネントとユーティリティの中には、MaterialShapeDrawableクラスがあります。 私の意見では、これは新しい設計システムが開発者に課すタスクを解決するために必要なツールです。
MaterialShapeDrawableは、1.0.0ライブラリリリースではまだ実験的と見なされていますが、アプリケーションでクールな効果を作成するために使用できます。 MaterialShapeDrawableクラスでは、側面と各角度の外観を示すことにより、形状を記述することができます。 これらの指定されたプロパティは、インターポレータによって制御され、アニメーション化することができます。
独自のMaterialShapeDrawableを作成するには、パラメーターでShapePathModel型のオブジェクトを渡す必要があるコンストラクターを使用できます。 EdgeTreatmentクラスとCornerTreatmentクラスのそれぞれに、図の各辺と各コーナーに関する情報を格納します（常に正確に4つの辺と角度がありますが、これにより、ほとんどの図の説明を妨げません）。 それぞれの辺と角に個別に説明を指定するか、1つのメソッドを呼び出して、図全体に一度に設定することができます。
ライブラリには、側面と角度の処理に関するいくつかのすぐに使用可能な記述が既にあり、Material Design 2.0で導入されたコンポーネントの形状に関する革新のほとんどが含まれています。 既に存在します：RoundedCornerTreatment-角が丸い場合、CutCornerTreatment-角を切り取る場合、TriangleEdgeTreatment-三角形を切り取るか、側面に追加します。 彼らの仕事を実証するために、簡単な例があります：
val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable
次のようになります。
もちろん、顔と角度の独自の説明を作成することもできます。 形状は常に左上の要素に設定され、Drawableは回転/反射操作を行って完成した形状を取得します。 これを示す小さな例があります。
class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } }
このMaterialShapeDrawableが背景として使用される場合、結果は次のようになります。
新しいマテリアルコンポーネントライブラリのbottomappbarパッケージには、BottomAppBarTopEdgeTreatmentがあります。 FloatingActionButtonボタンのBottomAppBarの「カットアウト」について説明します。 その上側は、ボタンの位置とサイズに応じてアニメーション化できます。 これらのクラスのコードを読んで、MaterialShapeDrawableが非常に柔軟に使用でき、ほとんどすべてのことができることを確認することをお勧めします。
通常のShapeDrawableについて説明する場合、言及する価値のあるもう1つの詳細があります。これは、輪郭に対応する形状の影を落とす機能です。 MaterialShapeDrawableを使用して非常に珍しい形のアウトラインを作成できるようになったため、特にMatarial Design 2.0でこれらの影をどこでも見ることができる場合、影の形を画像の形にしないことは残念です。 MaterialShapeDrawableは、影の外観も計算します。 shadowEnabledプロパティを使用して、フィギュア自体の輪郭に正確に従うシャドウを有効にできます。また、シャドウの半径、標高、および色を決定することもできます。 本当であるには余りにも良い音？ 残念ながら、はい。 MaterialShapeDrawableの影を使用すると、通常の影（テキストに影を描画するために作成されたPaintクラスのsetShadowLayer（）メソッドによって描画されます）が得られますが、結果が表示されるUIコンポーネントの境界にトリミングされます：
MaterialShapeDrawableはまだAPIと同様に実験的であり、将来変更される可能性があることに注意してください。 また、新しいMaterial Componentsライブラリのコードが開いていることも注目に値します。そのため、バグトラッカーでチケットを作成したり、既知の問題を修正してプルリクエストを送信することも大歓迎です。 実際、これらの行を読むと、APIはライブラリのマスターブランチで既に若干異なります（たとえば、ShapePathModelの代わりにShapeAppearanceModelが使用されます）。これはアクティブな作業を示します。 次のリリースの有望な機能の1つは、アプリケーションテーマ全体のデフォルトの側面/角度を決定する機能です。 詳細については、 公式のドキュメントまたはライブラリのソースをご覧ください。
翻訳者から：
通常のShapeDrawableに新しい機能を追加し、最も単純なグラフィックではなく作成を支援するツールがあることはクールです。 これにより、開発者は小さなことごとにデザイナーを引き寄せるのではなく、問題を自分で解決することができ、必要な時間は大幅に短縮されます。 Material Componentsライブラリの次のバージョンが、既存の問題を解決する新しい方法を実際に試すのを待っています。