L Developer Preview マテリアルデザインを始める

原文

マテリアルデザインを使ったアプリを作るために
1.material design specification.をみる
2.マテリアルテーマをアプリに適用する
3.マテリアルテーマをカスタマイズするためにスタイルの定義を加える
4.マテリアルデザインガイドラインに従ってレイアウトを作る
5.影を適用するために、viewにelevationを指定する
6.リストやカードなどのcomplex viewに新しいWidgetを作る
7.新しいAPIを使ってアニメーションをカスタマイズする

Android L Developer Preview向けに既存のアプリをアップデートする

既存のアプリをAndroid L Develop Preview向けにアップデートするために、マテリアルデザインガイドラインに従った新しいレイアウトをデザインして、UIに深さ、タッチフィードバック、アニメーションを実装することでユーザーエクスペリエンスをどのように改善できるかを考察します。

新しくAndroid L Developer Preview向けのアプリを作る

Android L Developer Preview向けの新しいアプリを作成する場合、material design guidelinesがあなたのアプリのための一連のデザインフレームワークを提供します。アプリをデザインし設計するために、このフレームワークにしたがって、Android frameworkの新機能を使います。

マテリアルテーマを適用

android:Theme.Material:から始まるテーマを指定してアプリにマテリアルテーマを適用します。

<!-- res/values/styles.xml -->
<resources>
  <!-- your app's theme inherits from the Material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

マテリアルテーマは新しいシステムwidgetを提供し、カラーパレットを設定したり、タッチフィードバックとActivity間を移り変わるときの標準的なアニメーションを設定できます。より詳しくはMaterial Theme（翻訳中）を見てください。

レイアウトをデザインする

マテリアルテーマを適用してカスタマイズしたらMaterial design guidlineに従う必要があります。レイアウトをデザインするときには特に以下に注意してください。
・Baseline grids
・Keylines
・Spacing
・Touch target size
・Layout structure

ViewにElevationを指定する

Viewは影を落とすことが出来ます。elevationの値で影の大きさとビューの表示順を定めます。レイアウトの中でandroid:elevationを使ってビューのelevationをセットします。

<!-- res/values/styles.xml -->
<TextView
    android:id="@+id/my_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/next"
    android:background="@color/white"
    android:elevation="5dp" />

新しいtranslationZプロパティーにより、elevation値の一時的な変化を行うときのアニメーションを作成できます。例えばこれは、タッチジェスチャーに応答するときに有効です。詳細は、Views and Shadows(翻訳中)を見てください。

新しいUIウィジェットを使う

RecyclerViewはListViewのより新しいバージョンです。それはパフォーマンスが改善され、より簡単に使用できます。CardViewはアプリにまたがって一貫性のある見た目でカードの中に情報を表示させます。CardViewをレイアウトに入れるには以下のようにします。

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="3dp">
    ...
</android.support.v7.widget.CardView>

より詳細はUI Widgets(翻訳中)を見てください

アニメーションをカスタマイズする

Android L Developer Previewにはアプリ内のアニメーションをカスタマイズできる新しいAPI群が含まれています。例えば、Activityが有効になる時のアニメーションと、終了時のアニメーションをActivityに設定できます。

// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

このActivityから他のActivityを開始するときexit transitionが有効になります。
新しいAPI群の機能全容を見るにはAnimation(翻訳中)を見てください。

---

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.