Material Design 设计規範は Google I/O 2014 で発表され、このデザイン理念は発表されるや否や多くの開発者に愛されました。主に紙のような表現とデザインの実体感を強調し、デザインをより現実の世界に近づけることを目指しています。滑らかで連続的なインタラクションとユーザー体験を追求し、このデザイン規範は Android エコシステムの発展を促進します。そのため、Google は FloatingActionButton、Snackbar、TabLayout など、Material Design スタイルに準拠した一連のウィジェットを提供しています。開発中によく使用されますが、記録を取っていなかったので、これらのコンポーネントの使用を一から記録することにしました。今日は CoordinatorLayout と FloatingActionButton に関連する知識について説明します。主な内容は以下の通りです：
- CoordinatorLayout
- FloatingActionButton
- FloatingActionButton の属性
- 簡単な使用法
CoordinatorLayout#
CoordinatorLayout は強化版の FramLayout であり、特に制限を加えない場合、CoordinatorLayout 内の子 View はデフォルトで左上隅に表示されます。CoordinatorLayout には主に二つの使用方法があります：
- アプリケーションの最上位レイアウトとして
- 一つまたは複数の子 View と相互作用するコンテナとして
CoordinatorLayout 内の子 View に Behavior を指定することができ、単一の親レイアウト内で多くの異なるインタラクション効果を提供します。子 View 同士も相互にインタラクションできます。CoordinatorLayout は CoordinatorLayout.DefaultBehavior アノテーションを使用して子 View のデフォルトの動作を指定できます。要するに、CoordinatorLayout を利用して異なるスクロール効果を実現できます。
FloatingActionButton#
FloatingActionButton は Material Design タイプのボタンウィジェットで、一般的には UI の上層に浮かぶ円形のアイコンとして表示されます。独自の behavior を持ち、アンカーを設定できます。
FloatingActionButton には二つのサイズがあり、それぞれ normal (56dp) と mini (40dp) です。デフォルトは mini (40dp) で、そのサイズは属性 fabSize を使用して指定できます。また、fabSize を auto に設定すると、システムが異なる画面に応じて適切なサイズを選択します。
FloatingActionButton は ImageView を間接的に継承しており、以下のようにコード内でアイコンを設定できます：
//アイコンを設定
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);
FloatingActionButton の背景色はデフォルトでテーマの colorAccent で示される値です。コード内で以下のように FloatingActionButton の背景色を変更できます：
//背景色を設定
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));
以下のように FloatingActionButton のサイズを設定できます：
//サイズを設定
fab.setSize(FloatingActionButton.SIZE_MINI);
では、FloatingActionButton のサイズをカスタマイズするにはどうすればよいのでしょうか。FloatingActionButton の一部のソースコードから、そのサイズを決定する寸法が dimens ファイルに定義されていることがわかります。具体的には design_fab_size_mini と design_fab_size_normal によって決まります。部分的なコードは以下の通りです：
//ソースコード
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// 自動に設定されている場合、リソースからサイズを取得し、更新します
final int width = res.getConfiguration().screenWidthDp;
final int height = res.getConfiguration().screenHeightDp;
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
したがって、dimens フォルダを作成し、その中で design_fab_size_mini と design_fab_size_normal の値を再設定することで、FloatingActionButton のサイズをカスタマイズできます。具体的には以下の通りです：
/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>
もちろん、FloatingActionButton は ImageView を間接的に継承しているため、ImageView のいくつかの属性も使用できますが、ここでは詳しくは触れません。
FloatingActionButton の属性#
以下は一般的に使用される属性のいくつかです：
android:src //アイコンを設定(24dp)
app:backgroundTint //アイコンの背景色を設定。
app:rippleColor //クリック時の水波紋の色を設定
app:elevation //影の大きさを設定
app:fabSize //サイズを設定
app:pressedTranslationZ //押下時の Z 軸からの距離を設定
app:layout_anchor //アンカーを設定
app:layout_anchorGravity//相対アンカーの位置を設定
属性について理解し、具体的に使用する際に設定後に効果を観察することは直感的な学習方法の一つです。
簡単な使用法#
やはりノートを取る際は効果的な画像がある方が良いので、CoordinatorLayout と FloatingActionButton を簡単に使用して具体的な効果を見てみましょう。レイアウトは以下の通りです：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.manu.materialdesignsamples.samples.SampleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:visibility="visible"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:layout_gravity="bottom|end"
android:src="@drawable/fab"
android:scaleType="center"
app:backgroundTint="@color/colorAccent"
app:backgroundTintMode="src_in"
app:elevation="5dp"
app:rippleColor="#000000"
app:fabSize="auto"
app:pressedTranslationZ="10dp"/>
</android.support.design.widget.CoordinatorLayout>
次に、FloatingActionButton のクリックイベントを設定します。具体的には以下の通りです：
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"私はSnackbar...",Snackbar.LENGTH_SHORT)
.setAction("キャンセル", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(SampleActivity.this, "キャンセル", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
まずは効果の画像を一枚、具体的には以下の通りです：
FloatingActionButton は自動的に Snackbar のためのスペースを確保し、Snackbar が表示される際に FloatingActionButton を隠さないようにします。これは FloatingActionButton 内部で Snackbar に対応する Behavior が実装されているためです。CoordinatorLayout は対応する Behavior の具体的な動作に基づいて子 View の位置を自動的に調整します。ここでは FloatingActionButton の位置が調整されます。ルートレイアウトを RelativeLayout に設定してみると、Snackbar が表示された際に FloatingActionButton を隠すことになります。言うまでもなく、CoordinatorLayout は調整レイアウトであり、Behavior に関する部分は後で整理します。今日はここまでにします。