L Developer Preview マテリアルデザイン - UI Widget - Firespeed

原文
L Developer Preview内のサポートライブラリーには2つの新しいWidgetとしてRecycleViewとCardViewが含まれています。これらのWidgetを使って複雑なリストやカードをあなたのアプリに表示できます。これらのWidgetは標準でマテリアルデザインスタイルを使用します。

RecyclerView

RecyclerViewはListViewのより進化した柔軟性のあるバーションです。このWidgetはリサイクル可能で、非常に効率よくスクロールできる大きなViweセットのコンテナです。動的に要素が変更されるリストを使うにはRecycleView Widgetを使用してください。

RecycleViewは以下の機能が提供され、より簡単に使うことが出来ます。
・アイテムをポジショニングするレイアウトマネージャー
・一般的なアイテム操作に対応する標準アニメーション

カスタムレイアウトマネージャーを定義したりWidgetをアニメーションさせることで、さらなる柔軟性を持たせることも出来ます。

RecyclerView Widgetを使用するためには、adapterとlayout managerを指定する必要があります。Adapterクラスを作るには、RecycleView.Adapterクラスを継承します。どのように実装するかは、あなたのデータセットとビューのタイプによります。

図1 RecyclerView Widget

Layout managerはRecyclerView内のアイテムビューを位置決めし、コレ以上ユーザーに見えることがないアイテムビューを再利用するかどうかを定めます。Viewを再利用する（あるいはリサイクルする）ために、Layout managerはadapterにデータセットの異なるエレメントにビューのコンテンツを入れ替えるように頼むことがあります。このようにビューをリサイクルすることで、不必要なビューの生成と重たいfindViewByIdルックアップ処理を削減し、パフォーマンスを向上させます。

RecyleViewは LinearLayoutManager を提供します。それは縦、あるいは横のスクロールリスト内にアイテムを表示します。カスタムレイアウトを作るにはRecyclerView.LayoutManagerクラスを継承します。

アニメーション

RecyclerViewは標準でアイテムを追加したり、削除するときのアニメーションが有効です。アニメーションをカスタマイズするにはRecyclerView.ItemAnimationクラスを継承して、RecyclerView.setItemAnimatorメソッドを使用します。

例

RecyclerViewをあなたのレイアウトに含めるには

<!-- RecyclerViewと一般的によく使われる属性 -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Activity内でRecyclerViewオブジェクトを取得するには

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // コンテンツの変化によって、大きさの変更がわかっているならば、パフォーマンスを向上させられます。
        mRecyclerView.setHasFixedSize(true);

        // linear layout managerを使う
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // adapterを指定する。（次の例も見てください）
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

簡単なAdapterを作るには

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // 使用しているビューの型への参照を提供する。
    //  （カスタムViewholder）
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // 適切なコンストラクター（データセットに依存する）
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // 新しいビューを作る(レイアウトマネージャーにより実行される)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // 新しいビューを作る
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, null);
        // ビューの大きさ、margin、paddingなどレイアウトパラメータを設定する
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // ビューのコンテンツを置き換える（Layout managerにより呼び出される）
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - ポジションのデーターセットからエレメントを取得する
        // - エレメントでビューのコンテンツを置き換える
        holder.mTextView.setText(mDataset[position]);

    }

    // データーセットの数を返す（Layout managerにより呼び出される）
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

Card View

CardViewはFrameLayoutを継承し、あらゆるアプリで一貫性のある見た目を持ったカードののなかに情報を表示させます。CardView Widgetは影を落としたり、角を丸めることが出来ます。


影を落とすcardを作るにはandroid:elevation属性を使います。CardViewはリアルな立体感と動的な影を使います。また、以前のバージョンにおいては代わりにprogrammatic shadowを実装します。詳細についてはCompatibility（翻訳中）を見てください。


CardViewでのプロパティの指定方法は以下のとおりです。
・レイアウト内で角の丸めを指定するには android:cardCornerRadius属性を使用します。
・コード内で角の丸めを指定するにはCardView.setRadiusメソッドを使用します。
・cardの背景色をセットするには、android:cardBackgroundColo属性を指定します。
レイアウトにカードビューを含めるするには

<!-- TextViewを含むCardView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

---

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