[この記事は Ben Weiss 、デベロッパー プログラム エンジニアによる Android Developers Blog の記事 "More Material Design with Topeka for Android " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
Topeka ウェブアプリ はウェブ上のマテリアル デザイン のオープン ソース サンプルとして開発されました。GitHub からダウンロードできます。
多彩な機能
このプロジェクトではマテリアル デザインのさまざまな特徴を見ることができますが、特に興味深いものを紹介します。
遷移
ActivityOptions にある Transitions API です。これを使えば、簡単かつ効果的にアクティビティ間の遷移が行えます。<resources>
<string name = "transition_avatar" > AvatarTransition </string>
</resources> <ImageView
android:id = "@+id/avatar"
android:layout_width = "@dimen/avatar_size"
android:layout_height = "@dimen/avatar_size"
android:layout_marginEnd = "@dimen/keyline_16"
android:transitionName = "@string/transition_avatar" /> SignInFragment で実行されるようにします。private void performSignInWithTransition ( View v ) {
Activity activity = getActivity ();
ActivityOptions activityOptions = ActivityOptions
. makeSceneTransitionAnimation ( activity , v ,
activity . getString ( R . string . transition_avatar ));
CategorySelectionActivity . start ( activity , mPlayer , activityOptions );
activity . finishAfterTransition ();
} CategorySelectionFragment をご覧ください。
アニメーション
より複雑なアニメーションの場合は、スコアリングで行ったように、独自のアニメーションを調整できます。AbsQuizView クラスは、質問が回答されると、精巧に作成されたいくつかのアニメーションを実行します。AbsQuizView の performScoreAnimation メソッド内にあります。
FAB の配置
最近発表されたフローティング アクション ボタン は、強調させるアクションの実行に優れたツールです。Topeka では、回答の送信に FAB を使用しています。また、FAB は、次のように高さが変化する 2 つの面にまたがります。private void addFloatingActionButton () {
final int fabSize = getResources (). getDimensionPixelSize ( R . dimen . fab_size );
int bottomOfQuestionView = findViewById ( R . id . question_view ). getBottom ();
final LayoutParams fabLayoutParams = new LayoutParams ( fabSize , fabSize ,
Gravity . END | Gravity . TOP );
final int fabPadding = getResources (). getDimensionPixelSize ( R . dimen . padding_fab );
final int halfAFab = fabSize / 2 ;
fabLayoutParams . setMargins ( 0 , // left
bottomOfQuestionView - halfAFab , //top
0 , // right
fabPadding ); // bottom
addView ( mSubmitAnswer , fabLayoutParams );
} AbsQuizView のコンストラクタで使用します。addOnLayoutChangeListener ( new OnLayoutChangeListener () {
@Override
public void onLayoutChange ( View v , int l , int t , int r , int b ,
int oldLeft , int oldTop , int oldRight , int oldBottom ) {
removeOnLayoutChangeListener ( this );
addFloatingActionButton ();
}
});
円形の OutlineProvider
API 21 より、円形状マスクの作成が非常にシンプルになりました。ViewOutlineProvider クラスを拡張し、getOutline() メソッドを以下のようにオーバーライドするだけです。@Override
public final void getOutline ( View view , Outline outline ) {
final int size = view . getResources ().
getDimensionPixelSize ( R . id . view_size );
outline . setOval ( 0 , 0 , size , size );
} setClipToOutline(true) とし、適切なシャドウの形を設定します。outlineprovider パッケージ をご覧ください。
ベクター型ドローアブル
アプリ全体で複数の場所にアイコンを表示させるには、ベクター型ドローアブルを使用します。GitHub の Material Design Icons のコレクションには、使用可能な約 750 個のアイコンが含まれています。Android デベロッパーにとっての最大の利点は、Lollipop 以降、VectorDrawables をアプリで使用することで、デバイスの画面密度に関係なく、鮮明に表示できる点にあります。たとえば、アイコン リポジトリの戻る矢印 ic_arrow_back は、Android のベクター型ドローアブル形式に適応しています。<vector xmlns:android = "http://schemas.android.com/apk/res/android"
android:width = "24dp"
android:height = "24dp"
android:viewportWidth = "48"
android:viewportHeight = "48" >
<path
android:pathData = "M40 22H15.66l11.17-11.17L24 8 8 24l16 16 2.83-2.83L15.66 26H40v-4z"
android:fillColor = "?android:attr/textColorPrimary" />
</vector>
プロパティ アニメーション
ViewPropertyAnimator クラス（および便利な View#animate 構文）で用意される標準的な変形機能だけに限らず、ビューのどんなプロパティでも簡単にアニメーション化できます。たとえば、AbsQuizView で、ビューの前景色をアニメーション化するプロパティを定義します。// Property for animating the foreground
public static final Property FOREGROUND_COLOR =
new IntProperty ( "foregroundColor" ) {
@Override
public void setValue ( FrameLayout layout , int value ) {
if ( layout . getForeground () instanceof ColorDrawable ) {
(( ColorDrawable ) layout . getForeground ()). setColor ( value );
} else {
layout . setForeground ( new ColorDrawable ( value ));
}
}
@Override
public Integer get ( FrameLayout layout ) {
return (( ColorDrawable ) layout . getForeground ()). getColor ();
}
}; final ObjectAnimator foregroundAnimator = ObjectAnimator
. ofArgb ( this , FOREGROUND_COLOR , Color . WHITE , backgroundColor );
テスト
Android 用 Topeka には、マテリアル デザイン コンポーネントの例が含まれている以外にも、新しいテスト API を使用するユニットとインストルメンテーションのテスト一式が用意されています。この API は「Gradle Unit Test Support 」と「Android Testing Support Library 」です。実装されたテストを使えば、データモデルの変更に対するアプリの回復力が高まります。障害を早期に見つけられるため、コーディングの精度が増し、容易にリファクタリングが行えるようになります。androidTest フォルダと test フォルダを見れば、これらのテストがどのように Topeka に実装されているかを確認できます。Android でのテストをさらに詳しく学ぶには、「Testing Tools 」からお読みいただくことをお勧めします。
次のトピック
Android 用 Topeka を見れば、マテリアル デザインによって Android とウェブ全体で一貫した操作性を実現する方法が分かります。このプロジェクトでは、Android 5.0 SDK と新しい Android Design Library の優れたマテリアル デザイン機能の一部も紹介します。AppCompat などのツールや新しい Android Design Support Library を使用して、以前のバージョンをサポートする機能のリクエストがすでに寄せられています。プロジェクト をご覧いただき、ご意見があればプロジェクトの Issue Tracker からご報告いただくか、Google+ または Twitter からご質問ください。Yuichi Araki - Developer Relations Team