RecyclerView入門その1

TOP >
お知らせ一覧 >
RecyclerView入門その1

こんにちは。
mukaiyachiです。

今回はAndroidアプリの開発で使用するRecyclerViewについて説明します。
RecyclerViewは少し凝ったレイアウトを作るときに便利です！

まずはRecyclerViewを画面に表示するぐらいのところまでやってみます！
ちなみにRecyclerViewとは主に以下のような特徴があります。

RecyclerViewとは?

ListViewやGridViewのようにアイテムをリストで表示するためのもの。
ListViewなどよりも多くのオプションがあり拡張性が高い。
レイアウトを変更したり、リッチな操作を行ったりできる。
アニメーションを行うなどの機能が利用できる。

そのRecyclerViewを作るには最低4つの要素が必要です。

必要な要素

その1、RecyclerView

　データを表示するためのスクロール可能なView

その2、RecyclerView.Adapter

　Viewの作成、表示されるViewとデータの結びつけを行う。

その3、RecyclerView.ViewHolder

　Viewへの参照を保持。

　メンバ変数にViewを持っておく。

　findViewByIdを毎回行う必要がなくなりパフォーマンスが向上。

その4、RecyclerView.LauoutManager

　RecyclerViewの中でViewの位置や大きさの決定を行う。

　またViewの再利用のルールを管理。

次に実装方法です！

実装方法

1、[app]フォルダ内のbuild.gradleに以下を追加

dependencies {
    〜〜 省略 〜〜
    compile 'com.android.support:recyclerview-v7:25.1.1'
}

dependencies {

〜〜省略〜〜

compile 'com.android.support:recyclerview-v7:25.1.1'

}

※サポートライブラリのバージョンは適宜変更してください。

2、レイアウトにRecyclerView追加

<<??xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.co.itcowork.recyclerviewdemo.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

<<??xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="jp.co.itcowork.recyclerviewdemo.MainActivity">

<android.support.v7.widget.RecyclerView

android:id="@+id/main_recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout>

3、セルのレイアウト作成

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

    <ImageView
        android:id="@+id/row_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFE0"
        android:orientation="vertical">

        <TextView
            android:textSize="15sp"
            android:id="@+id/title_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#FF0000"/>

        <TextView
            android:textSize="15sp"
            android:id="@+id/content_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>
</LinearLayout>

<<??xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<ImageView

android:id="@+id/row_imageview"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:adjustViewBounds="true"

android:scaleType="centerCrop"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FFFFE0"

android:orientation="vertical">

<TextView

android:textSize="15sp"

android:id="@+id/title_textview"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textColor="#FF0000"/>

<TextView

android:textSize="15sp"

android:id="@+id/content_textview"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

4、ViewHolderクラスの作成

RecyclerView.ViewHolderを継承したクラスを作ります。

public class DemoViewHolder extends RecyclerView.ViewHolder {
    public ImageView rowImageview;
    public TextView titleTextview;
    public TextView contentTextview;

    public DemoViewHolder(View itemView) {
        super(itemView);

        rowImageview    = (ImageView) itemView.findViewById(R.id.row_imageview);
        titleTextview   = (TextView) itemView.findViewById(R.id.title_textview);
        contentTextview = (TextView) itemView.findViewById(R.id.content_textview);
    }
}

public class DemoViewHolder extends RecyclerView.ViewHolder {

public ImageView rowImageview;

public TextView titleTextview;

public TextView contentTextview;

public DemoViewHolder(View itemView) {

super(itemView);

rowImageview = (ImageView) itemView.findViewById(R.id.row_imageview);

titleTextview = (TextView) itemView.findViewById(R.id.title_textview);

contentTextview = (TextView) itemView.findViewById(R.id.content_textview);

}

5、Adapterクラスの作成

RecyclerView.Adapterを継承したクラスを作ります。

public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_recycler_row, parent, false);

         DemoViewHolder demoViewHolder = new DemoViewHolder(itemView);

         return demoViewHolder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof DemoViewHolder) {
            DemoViewHolder demoViewHolder = (DemoViewHolder) holder;
            demoViewHolder.rowImageview.setImageResource(imageList[position]);
            demoViewHolder.titleTextview.setText(titleList[position]);
            demoViewHolder.contentTextview.setText(contentList[position]);
        }
    }

    @Override
    public int getItemCount() {
        if (titleList == null) {
            return 0;
        }

        if (titleList.length == 0) {
            return 1;
        }

        return titleList.length;
    }

    〜〜 省略 〜〜
}

public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_recycler_row, parent, false);

DemoViewHolder demoViewHolder = new DemoViewHolder(itemView);

return demoViewHolder;

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

if (holder instanceof DemoViewHolder) {

DemoViewHolder demoViewHolder = (DemoViewHolder) holder;

demoViewHolder.rowImageview.setImageResource(imageList[position]);

demoViewHolder.titleTextview.setText(titleList[position]);

demoViewHolder.contentTextview.setText(contentList[position]);

}

@Override

public int getItemCount() {

if (titleList == null) {

return 0;

}

if (titleList.length == 0) {

return 1;

}

return titleList.length;

}

〜〜省略〜〜

}

リストに表示するデータは、例として以下のようなものにします。
一つのセルに画像、タイトル、内容をそれぞれ表示します。

    int[] imageList = {
            R.drawable.two, R.drawable.one, R.drawable.three, R.drawable.four, R.drawable.five,
            R.drawable.six, R.drawable.seven, R.drawable.eight, R.drawable.nine, R.drawable.ten
    };

    String[] titleList = {"タイトル一","タイトル二","タイトル三","タイトル四","タイトル五","タイトル六","タイトル七","タイトル八","タイトル九","タイトル十"};

    String[] contentList = {
            "◯吾輩(わがはい)は猫である。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",
            "◯どこで生れたかとんと見当(けんとう)がつかぬ。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",
            "◯何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",
            "吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",
            "吾輩はここで始めて人間というものを見た。",
    };

int[] imageList = {

R.drawable.two, R.drawable.one, R.drawable.three, R.drawable.four, R.drawable.five,

R.drawable.six, R.drawable.seven, R.drawable.eight, R.drawable.nine, R.drawable.ten

};

String[] titleList = {"タイトル一","タイトル二","タイトル三","タイトル四","タイトル五","タイトル六","タイトル七","タイトル八","タイトル九","タイトル十"};

String[] contentList = {

"◯吾輩(わがはい)は猫である。",

"吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",

"吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",

"◯どこで生れたかとんと見当(けんとう)がつかぬ。",

"吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",

"◯何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。",

"吾輩(わがはい)は猫である。名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。",

"吾輩はここで始めて人間というものを見た。",

};

6、LayoutManagerを設定

いくつか種類がありますが今回は LinearLayoutManagerを設定。

Javaのプログラムでも設定できますし、こんな感じでレイアウトでもできます。
(2のレイアウトに5行目と12行目を追加)

<<??xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.co.itcowork.recyclerviewdemo.MainActivity">

    <android.support.v7.widget.RecyclerView
        app:layoutManager="LinearLayoutManager"
        android:id="@+id/main_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

<<??xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="jp.co.itcowork.recyclerviewdemo.MainActivity">

<android.support.v7.widget.RecyclerView

app:layoutManager="LinearLayoutManager"

android:id="@+id/main_recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout>

7、Adapterを設定

Adapterは5で作成したDemoAdapterを設定します。

最終的にRecyclerViewを表示するActivityはこのような形になります。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // RecyclerViewを作成
        createRecyclerView();
    }

    /**
     * RecyclerViewを作成
     */
    private void createRecyclerView() {
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.main_recyclerView);
        recyclerView.setHasFixedSize(true);

        // LayoutManagerを設定
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        // Adapterを設定
        DemoAdapter demoAdapter = new DemoAdapter();
        recyclerView.setAdapter(demoAdapter);
    }
}

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// RecyclerViewを作成

createRecyclerView();

}

/**

* RecyclerViewを作成

private void createRecyclerView() {

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.main_recyclerView);

recyclerView.setHasFixedSize(true);

// LayoutManagerを設定

LinearLayoutManager layoutManager = new LinearLayoutManager(this);

recyclerView.setLayoutManager(layoutManager);

// Adapterを設定

DemoAdapter demoAdapter = new DemoAdapter();

recyclerView.setAdapter(demoAdapter);

}

8、実行して確認

実行してみると下の画像のようなリストが表示されます。

今回はここまでになります。

ここまで読んでいただきありがとうございました！
続きはまた次回！

RecyclerView入門 その1

RecyclerViewとは?

必要な要素

実装方法