81
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

CardViewの基本的な使い方とRecyclerViewとの合わせ技

今更感ありますが何かと使うのにあんまりいいサンプルコードなかったのでパパッと書いていきます。
てっきりRecyclerViewやlistViewと合わせて使うのかなーと思ってたんですがあんまりそういった記事がなかったので驚きました。
RecyclerViewと一緒に用いることでCordinatorLayoutと一緒に使ってマテリアールなUIでの実装ができますし、そこにCardViewを組み合わせればどんどんモダンっぽいアプリになるのではないでしょうか。
今更感ある記事なのでそんなに詳しくは書きませんが参考になればと思います。
特に難しいことはありませんが、気を付けることといえばcardViewというより「CardLayout」のような気もするんですがどうなんでしょう....

解説はいいから~という場合ここのコードのコピペのみでは不完全なのでGithubにコードが上げてあるので参考にしてみてください。

Screenshot_2016-05-26-01-34-26.png

CardView

サポートライブラリで追加された一つです。
FrameLayoutを継承しているので先ほど「view」というより「layout」という書き方をしました。
使い方としてもviewを継承して使うというよりホントにlayoutに組み込んで使う形なので命名云々は抜きにしてイメージとしてはCardLayoutとして捉えるといいかもしれません。

    compile "com.android.support:cardview-v7:+"
    compile 'com.android.support:recyclerview-v7:21.0.+"

recyclerViewを用いて実装していきますのでそちらも合わせてgradleにどうぞ。

全体の流れは以下です。
RecyclerViewのレイアウト(.xml)の用意 ←ここでCardViewを用いる
RecyclerViewのAdapter(.java)を用意 
RecyclerViewを継承したRecyclerView(.java)を用意

では流れ通り、recyclerViewのレイアウトを作っていきます。
この中にcardViewを使うわけですね。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView 
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/view_cardview_margin_topbottom"
        android:layout_marginLeft="@dimen/view_cardview_margin_leftright"
        android:layout_marginRight="@dimen/view_cardview_margin_leftright"
        android:layout_marginTop="@dimen/view_cardview_margin_topbottom"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="10dp">
        <!-- 以下に追加 -->
    </android.support.v7.widget.CardView>
</LinearLayout>

度々になってしまいますがframeLayoutを継承してるのでそのまま扱いやすいように使ったらいいかと思います。
あと独特なのはcardCornerRadiusはまぁマンマなんですがコーナーの丸め処理です。
androidはその辺だるいことが多いですがかなりうれしいですね~
cardUseCompatPaddingですが弱おまじない的な感じになっちゃうんですがカードがかぶってしまって影が見えない時に使ってあげたらいいです。Lollipop でも影は出ているが、カードが被ってしまって影が見えなくなっている時にこのパラメータを入れるといいでしょう。

ここから下はrecyclerViewの使い方になっちゃいますね

RecylcerView

AdapterとViewを用意して.xmlに設置しまして終わりです。
ListViewとの違いはそんなにありませんがviewHolderが公式でサポートされているだけです。

public class CardRecyclerAdapter extends RecyclerView.Adapter<CardRecyclerAdapter.ViewHolder>{
        private String[] list;
        private Context context;

        public CardRecyclerAdapter(Context context,String[] stringArray) {
                super();
                this.list = stringArray;
                this.context = context;
        }

        @Override
        public int getItemCount() {
                return list.length;
        }

        @Override
        public void onBindViewHolder(ViewHolder vh, final int position) {
                vh.textView_main.setText(list[position]);
                vh.layout.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                                Toast.makeText(context,list[position],Toast.LENGTH_SHORT).show();
                        }
                });
        }

        @Override
        public CardRecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                LayoutInflater layoutInflater = LayoutInflater.from(context);
                View v = layoutInflater.inflate(R.layout.layout_recycler, parent, false);
                ViewHolder viewHolder = new ViewHolder(v);
                return viewHolder;
        }

        static class ViewHolder extends RecyclerView.ViewHolder {
                TextView textView_main;
                LinearLayout layout;

                public ViewHolder(View v) {
                        super(v);
                        textView_main = (TextView)v.findViewById(R.id.textView_main);
                        layout = (LinearLayout)v.findViewById(R.id.layout);
                }
        }
}

最小限の実装です。
onCreateViewHolderでさっき作った.xmlファイルを渡してあげます。
あとはViewHolderで紐づけたviewに対してonBindViewで反映させる。

そしてRecyclerViewを継承いたviewを用意して

public class CardRecyclerView extends RecyclerView{
    public CardRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setRecyclerAdapter(context);
    }

    public void setRecyclerAdapter(Context context){
        setLayoutManager(new LinearLayoutManager(context));
        setAdapter(new CardRecyclerAdapter(context,context.getResources().getStringArray(R.array.dummy)));
    }
}

(一応publicなこいつを用意しておきました)

以上です。
ここのコードのコピペのみでは不完全なのでGithubにコードが上げてあるので参考にしてみてください。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
81
Help us understand the problem. What are the problem?