【Android】RecyclerViewで枠線を追加する【開発】

AndroidのRecyclerViewにはListViewに標準であった枠線や、タップ時の挙動がデフォルトでない。
そのため開発者が枠線やタップ時の挙動をコード上で指定する必要がある。

recyclerviewはデフォルトでは枠線がつかない
recyclerviewはデフォルトでは枠線がつかない



RecyclerViewのセルに枠線をつける

ここではFragmentのonActivityCreatedでの処理を例にとる。

class BaseTimeLineFragment(val twitter: Twitter) : Fragment(),
        SwipeRefreshLayout.OnRefreshListener,
        RefreshCallback {
    private lateinit var recyclerView: RecyclerView
    private lateinit var recyclerTweetViewAdapter: TweetAdapter
    private lateinit var viewManager: RecyclerView.LayoutManager


override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        // もろもろの処理

        viewManager = LinearLayoutManager(activity!!.applicationContext, RecyclerView.VERTICAL, false)

        recyclerTweetViewAdapter = TweetAdapter(activity!!.applicationContext, timeLine)

        val itemDecoration = DividerItemDecoration(activity!!.applicationContext, DividerItemDecoration.VERTICAL) // こいつが必要
        itemDecoration.setDrawable(activity!!.applicationContext.getDrawable(R.drawable.divider)!!)
        recyclerView = activity!!.findViewById(R.id.mainTimeLineRecyclerView)
        recyclerView.addItemDecoration(itemDecoration)
        recyclerView.apply {
            layoutManager = viewManager
            adapter = recyclerTweetViewAdapter
            mProgressBar.visibility = ProgressBar.INVISIBLE
        }
    }

ポイントはDividerItemDecoration

ポイントはDividerItemDecorationを作り、recyclerViewのaddItemDecorationメソッドでつくったitemDecorationを渡しあげること

        val itemDecoration = DividerItemDecoration(activity!!.applicationContext, DividerItemDecoration.VERTICAL) // こいつが必要
        itemDecoration.setDrawable(activity!!.applicationContext.getDrawable(R.drawable.divider)!!)
        recyclerView = activity!!.findViewById(R.id.mainTimeLineRecyclerView)
        recyclerView.addItemDecoration(itemDecoration)

なおres/drawable/以下にdivider.xmlを定義する必要がある。

res/drawable-xhdpi/divider.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="4dp"
        android:right="4dp">
        <shape>
            <size android:height="1dp" />
            <solid android:color="#434343" />
        </shape>
    </item>
</layer-list>

枠線のマージンのとり方

res/drawable-xhdpi/divider.xml内の

    <item
        android:left="4dp"
        android:right="4dp">

で枠線のマージンなどが決められます。

solid のcolor属性などはUIに応じて適当な色を決めましょう

RecyclerViewで枠線をつけた時
RecyclerViewで枠線をつけた時

仕上がりはこんな感じになります。


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください