Androidアプリ開発 RecyclerView DividerItemDecorationで下線を引く

2017年03月12日(編集2017年03月12日)
このエントリーをはてなブックマークに追加

Androidアプリ開発でRecyclerViewを使って下線を引く場合、RecyclerView.ItemDecorationを使った独自実装が必要です。
しかし、最新のRecyclerViewではDividerItemDecorationクラスが導入され、実装なしで下線を引くことができるようになりました。

この記事は、AndroidアプリでRecyclerViewのDividerItemDecorationを使って下線を引く方法を記載した記事です。

環境はAndroid 7.1 (API level 25) です。

環境

  • OS X El Capitan
  • android sdk 25
  • Oracle jdk version 1.8.0_72
  • Android Studio 2.3
  • recyclerview-v7 25.1.1

難易度

初心者向け

サンプルコード

Android-Recycleview_Demo

RecyclerView区切り線

以前までは、RecyclerViewで区切り線を表示するには、RecyclerView.ItemDecorationクラスを利用して独自の実装をする必要がありました。
しかし、バージョン25からはDividerItemDecorationを使って、独自実装なしで下線を描写できるようになりました。

fig1. DividerItemDecorationを使った下線

インストール

RecyclerViewのインストールの設定をgradleにします。
RecyclerViewのバージョンはbuild.gradleに次のように記述します。

{project_folder}/app/build.gradle
ext {
    buildToolsVersion = "25.0.2"
    supportLibVersion = "25.1.1"
}
          

RecyclerViewのバージョンは25以上にする必要があります。

RecyclerViewの情報は、app/build.gradleに次のように記述します。

{project_folder}/app/build.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    compile 'com.android.support:recyclerview-v7:' + rootProject.supportLibVersion
    compile 'com.android.support:design:' + rootProject.supportLibVersion
    compile 'com.android.support:support-v4:' + rootProject.supportLibVersion

    testCompile 'junit:junit:4.12'
}
          

ビルド後に、RecyclerViewのDividerItemDecorationの実装が可能になります。

一覧画面実装

RecyclerViewで下線を実装するには、一覧表示の実装ができることが前提です。
一覧表示の実装方法を理解していない場合は、

RecyclerViewで一覧画面を作成する

の記事を読んで、一覧表示の実装をできるようにしてください。

下線実装

RecyclerViewで一覧表示をするFragmentを作成します。
クラス名はRecyclerViewDividerItemDecorationFragmentにします。

{project_folder}/RecyclerViewDividerItemDecorationFragment.java
public class RecyclerViewDividerItemDecorationFragment extends Fragment {

    private LinearLayoutManager linearLayoutManager;

    /**
     * Use this factory method to create a new instance of this fragment.
     *
     * @return A new instance of fragment RecyclerViewDividerItemDecorationFragment.
     */
    public static RecyclerViewDividerItemDecorationFragment newInstance() {
        RecyclerViewDividerItemDecorationFragment fragment = new RecyclerViewDividerItemDecorationFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_recycler_view_divider_item_decoration, container, false);

        // Set the adapter
        if (view instanceof RecyclerView) {
            Context context = view.getContext();
            RecyclerView recyclerView = (RecyclerView) view;
            linearLayoutManager = new LinearLayoutManager(context);
            recyclerView.setLayoutManager(linearLayoutManager);
            recyclerView.setAdapter(new MyItemRecyclerViewAdapter(DummyContent.ITEMS));

           +RecyclerView.ItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                    linearLayoutManager.getOrientation());
            recyclerView.addItemDecoration(dividerItemDecoration);
        }
        return view;
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }
}
        

■ 実装の解説

1. DividerItemDecoration

DividerItemDecorationRecyclerView.ItemDecorationを継承したクラスです。

RecyclerView.ItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                    linearLayoutManager.getOrientation());
        

DividerItemDecorationクラスの引数にはContextとRecyclerViewの向きを設定します。
向きは定数を使用しないで、LinearLayoutManager#getOrientationメソッドを使いましょう。

生成したDividerItemDecorationオブジェクトはrecyclerViewに設定します。

recyclerView.addItemDecoration(dividerItemDecoration);
        

必要な実装は以上です。

ビルド

上記のコードビルドして動作を確認します。

fig2. アプリ画面

一覧画面に下線が表示されました。

結論

DividerItemDecorationを使うと、RecyclerViewに簡単に下線を描くことができます。RecyclerViewはListViewとは違うと主張し続けていたGoogleですが、やはりほとんどの開発者はListViewの上位互換として使っているのが実情なようです。

RecyclerViewは色々な使い方のできるライブラリなので、余力がある人は色々なパターンの画面を作成してみてください。

関連記事

タグ検索で調べてみよう

Android7.1 UI