Clever Geek Handbook

Android Design Support Library v28イノベーションの概要

こんにちは。



新しいコース「Android Developer」の開始日が近づいていますが、何も残っておらず、リスナーとなる可能性のある人を含め、誰もが共有する興味深い資料はほとんどありません。



行こう



最近、Androidサポートライブラリの28番目のバージョンが発表されました。 現在のアルファ版では、一連の興味深い新しいコンポーネントにアクセスできます。 この記事では、マテリアルビューのコンポーネントとしてサポートライブラリに追加された追加機能を確認します。







素材ボタン



MaterialButtonは、アプリケーションのユーザーインターフェイスでマテリアルスタイルのボタンを表示するために使用できるウィジェットです。 このクラスは、おそらくプロジェクトで既に使用しているAppCompatButtonクラスを継承しますが、違いは何ですか？ デフォルトでは、このボタンは、スタイルフラグを使用して自分で設定する必要なく、既にマテリアルの外観で装飾されています。 MaterialButtonクラスをそのまま使用できます。これは、必要なマテリアルの外観が既にあるためです-より便利なクラスと考えてください。







次のように、このボタンをレイアウトファイルに追加できます。 



<android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MATERIAL BUTTON" android:textSize="18sp" app:icon="@drawable/ic_android_white_24dp" />


デフォルトでは、このクラスはテーマのアクセントカラーを使用してボタンの背景を塗りつぶし、ボタン上のテキストを白で塗りつぶします。 ボタンが塗りつぶされない場合、アクセントの色が透明な背景とともにボタン上のテキストの色に使用されます。



ボタンに追加のスタイルを追加する場合は、 MaterialButtonスタイル属性セットを使用してこれを行うことができます。





































チップ



チップコンポーネントを使用すると、レイアウトにチップを表示できます。 実際、チップは丸みを帯びた背景上のテキストです。 その目的は、ユーザーに何らかの形式のテキストセットを表示することであり、これは選択される場合とされない場合があります。 たとえば、チップを使用して、アプリケーションの現在のコンテキストに基づいてユーザーに選択可能なオファーのリストを表示できます。







たとえば、 app:chipText



属性を使用してチップをレイアウトに追加し、チップに表示するテキストを設定できます。 



 <android.support.design.chip.Chip android:id="@+id/some_chip" android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This is a chip" />




チップをさらに様式化するために使用できる他の属性のセットもあります。













チップインスタンスにリスナーをハングさせることもできます。 これらは、ユーザーインタラクションの追跡に役立ちます。 チップを選択できる場合は、おそらく、この状態がいつ変更されたかを調べる必要があります。 setOnCheckedChangeListener



リスナーを使用してこれを行うことができます。 



 some_chip.setOnCheckedChangeListener { button, checked -> }




削除アイコンとの相互作用を聞きたい場合も同様です。 これを行うには、 setOnCloseIconClickListener



関数を使用して削除イベントを登録できます。 



 some_chip.setOnCloseIconClickListener { }




チップグループ



ユーザーに一連のチップを表示する場合、ビュー内でそれらが正しくグループ化されていることを確認する必要があります。 これを行うには、 ChipGroupビューコンポーネントを使用できます 。







ChipGroupを使用する場合は、 ChipViewをChipGroupの親コンポーネントでラップするだけです。 



 <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This" /> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="is" /> // ... </android.support.design.chip.ChipGroup>




デフォルトでは、 ChipViewは互いにわずかに固定されているように見える場合があります。 その場合、次のChipGroup属性を使用して、子ビューに間隔を追加できます。







app:singleLine



を使用して、ChipGroupコンテナー内の単一行に表示される子チップビューを宣言することもできapp:singleLine



。







この場合、ユーザーが表示されたチップをスクロールできるように、ChipGroupをHorizontalScrollView



などのスクロール可能なビューでラップする必要があります。 



 <HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content" app:singleLine="true"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="Some chip" /> //  ... </android.support.design.chip.ChipGroup> </HorizontalScrollView>




マテリアルカードビュー



私たちのアプリケーションでは、おそらくある時点でCardView



コンポーネントをすでに使用してCardView



ます。 サポートライブラリにはMaterialCardView



というコンポーネントがあり、マテリアルデザインとして定型化されたすぐに使用可能な実装を提供します。







CardViewは、次のようにレイアウトに追加できます。 



 <android.support.design.card.MaterialCardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp"> ... child views ... </android.support.design.card.MaterialCardView>




さらに、2つの属性を使用してCardViewをスタイル設定できます。







これらの2つの属性とともに、 app:cardBackgroundColor



などの最初に使用可能な属性を使用してCardViewをスタイルすることもできます。



下のアプリバー



BottomAppBar



は、レイアウトの下部にツールバーのようなコンポーネントを表示できる新しいコンポーネントです。 これにより、標準のツールバーを使用するよりも簡単にコンポーネントを操作できるように、コンポーネントをユーザーに表示できます。







BottomAppBar



ように、レイアウトファイルにBottomAppBar



を追加できます。 



 <android.support.design.bottomappbar.BottomAppBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">




BottomAppBarには、画面に表示されるメニューが割り当てられている必要があるようです。 これは、次のようにプログラムで実行できます。 



 bottom_app_bar.replaceMenu(R.menu.main)




BottomAppBarのスタイリングに関しては、使用できる属性がいくつかあります。











または中央：







dp値を設定すると、FABが垂直方向に上に移動できます。











おわりに



私の意見では、これらはサポートライブラリへのエレガントな追加です。 マテリアルスタイルコンポーネントをすぐに使用できることを楽しみにしています。また、BottomAppBarを使用できる場合もあります。 サポートライブラリが安定するまでには時間がかかると思います。 いつものように、これらの新しいコンポーネントについてのあなたの考えやコメントを聞きたいです！



終わり



あなたのコメントや質問を待っています。あなたがここを出ることができますか、 開いた日にバーバラに行くことができます。


More articles:


All Articles