web-dev-qa-db-ja.com

Android RecyclerViewに分割線を追加するにはどうすればよいですか？

私はRecyclerViewを使用しているAndroidアプリケーションを開発しています。 RecyclerViewに divider を追加する必要があります。追加しようとしました - 

recyclerView.addItemDecoration(new
     DividerItemDecoration(getActivity(),
       DividerItemDecoration.VERTICAL_LIST));

以下は私のXMLコードです - 

   <Android.support.v7.widget.RecyclerView
    Android:id="@+id/drawerList"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="15dp"
    />
androidandroid-recyclerviewmaterial-design
175
sofquestion 8

2016年10月のアップデートでは、サポートライブラリv25.0.0に、基本的な水平方向と垂直方向の境界線がデフォルトで実装されました。

https://developer.Android.com/reference/Android/support/v7/widget/DividerItemDecoration.html

 recyclerView.addItemDecoration(new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL));
225
Aditya Vyas-Lakhan

正しい方法はItemDecorationに対してRecyclerViewを定義することです。

SimpleDividerItemDecoration.Java 

public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public SimpleDividerItemDecoration(Context context) {
        mDivider = context.getResources().getDrawable(R.drawable.line_divider);
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + mDivider.getIntrinsicHeight();

            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
}

line_divider.xml： 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <size
        Android:width="1dp"
        Android:height="1dp" />

    <solid Android:color="@color/dark_gray" />

</shape>

最後にこのように設定してください 

recyclerView.addItemDecoration(new SimpleDividerItemDecoration(this));

編集する

@Alan Solitarが指摘したように

context.getResources().getDrawable(R.drawable.line_divider);

あなたが使うことができるのではなく、廃止予定です

ContextCompat.getDrawable(context,R.drawable.line_divider);
207
N J

水平方向と垂直方向の両方の分割線が必要な場合は、次のようにします。

  1. 水平方向と垂直方向の仕切りのドロアブルを定義します。

    horizo​​ntal_divider.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
  <size Android:height="1dip" />
  <solid Android:color="#22000000" />
</shape>

    vertical_divider.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <size Android:width="1dip" />
    <solid Android:color="#22000000" />
</shape>

  2. 以下にこのコードセグメントを追加してください。

    DividerItemDecoration verticalDecoration = new DividerItemDecoration(recyclerview.getContext(),
        DividerItemDecoration.HORIZONTAL);
Drawable verticalDivider = ContextCompat.getDrawable(getActivity(), R.drawable.vertical_divider);
verticalDecoration.setDrawable(verticalDivider);
recyclerview.addItemDecoration(verticalDecoration);

DividerItemDecoration horizontalDecoration = new DividerItemDecoration(recyclerview.getContext(),
        DividerItemDecoration.VERTICAL);
Drawable horizontalDivider = ContextCompat.getDrawable(getActivity(), R.drawable.horizontal_divider);
horizontalDecoration.setDrawable(horizontalDivider);
recyclerview.addItemDecoration(horizontalDecoration);
32
Mohammed Mukhtar

アイテムアダプタの最後までにビューを追加するだけです。

<View
 Android:layout_width="match_parent"
 Android:layout_height="1px"
 Android:background="#FFFFFF"/>

更新：

より良い結果を得るには、1pxを1dpに変換してください。

<View
     Android:layout_width="match_parent"
     Android:layout_height="1dp"
     Android:background="#FFFFFF"/>
26
Lucas Diego

これらすべての答えにより私は親密になりましたが、それらはそれぞれ重要な詳細を欠いていました。ちょっとした調査の結果、最も簡単な方法はこれら3つのステップを組み合わせたものであることがわかりました。

  1. サポートライブラリの DividerItemDecoration を使用する
  2. 正しい色で仕切りを作成する
  3. テーマのこの分割線を listDivider として設定します。

ステップ1：RecyclerViewの設定中

recyclerView.addItemDecoration(
        new DividerItemDecoration(context, layoutManager.getOrientation()));

ステップ2：res/drawable/divider_gray.xmlのようなファイルに

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <size Android:width="1px" Android:height="1px" />
    <solid Android:color="@color/gray" />
</shape>

ステップ3：アプリのテーマに

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Other theme items above -->
    <item name="Android:listDivider">@drawable/divider_gray</item>
</style>

編集：最後の区切り文字をスキップするように更新された：
これを少し使用した後、私はそれが最後の項目の後に仕切りを描いていたことに気付きました。そのため、DividerItemDecorationのデフォルトの動作をオーバーライドするためにStep 1を次のように変更しました（もちろん、別のクラスを作成することも別の選択肢です）。

recyclerView.addItemDecoration(
        new DividerItemDecoration(context, layoutManager.getOrientation())) {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                int position = parent.getChildAdapterPosition(view);
                // hide the divider for the last child
                if (position == parent.getAdapter().getItemCount() - 1) {
                    outRect.setEmpty();
                } else {
                    super.getItemOffsets(outRect, view, parent, state);
                }
            }
        }
);
24
gMale

これは簡単なカスタム仕切りのコードです（垂直仕切り/ 1dpの高さ/黒）：

サポートライブラリがあるとします。

compile "com.Android.support:recyclerview-v7:25.1.1"

Javaコード

    DividerItemDecoration divider = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
    divider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.my_custom_divider));
    recyclerView.addItemDecoration(divider);

次にcustom_divider.xmlファイルのサンプル

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="1dp" />
    <solid Android:color="@Android:color/black" />
</shape>
21
Tobliug

Fragmentsを使うためにRecyclerViewを使っていると思います

RecyclerViewおよびLayoutManagerオブジェクトを作成した後でこれらの行を追加するだけです。

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                DividerItemDecoration.VERTICAL);
        recyclerView.addItemDecoration(dividerItemDecoration);

それでおしまい！

それは水平方向と垂直方向の両方をサポートしています。

8
Vivek Maru

res/drawable フォルダーに個別のxmlファイルを作成します。

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="1dp" />
    <solid Android:color="@Android:color/black" />
</shape>

このxmlファイル（your_file）を mainアクティビティ に接続します。

DividerItemDecoration divider = new DividerItemDecoration(
    recyclerView.getContext(),
    DividerItemDecoration.VERTICAL
);
divider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.your_file));
recyclerView.addItemDecoration(divider);
8
Anushka Madusanka

それでこれは正しい方法ではないかもしれませんが、私はちょうどRecyclerViewの単一項目ビューにビューを追加しました（私は組み込み関数があるとは思わないので）：

<View
    Android:layout_width="fill_parent"
    Android:layout_height="@dimen/activity_divider_line_margin"
    Android:layout_alignParentBottom="true"
    Android:background="@color/tasklist_menu_dividerline_grey" />

これは、各項目の一番下にそれを埋める線が表示されることを意味します。私は#111111を背景にして1dpくらいの高さにしました。これはまたそれに一種の "3D"効果を与えます。

6
Smashing

この単純な単一行コードを試す

recyclerView.addItemDecoration(new DividerItemDecoration(getContext(),LinearLayoutManager.VERTICAL));
6
Pravin Perumal

次の行を追加する必要があります...

mRecyclerView.addItemDecoration(new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL));
6
pablopatarca

簡単な再利用可能な仕切りを作成できます。

仕切りを作成： 

public class DividerItemDecorator extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public DividerItemDecorator(Drawable divider) {
        mDivider = divider;
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int dividerLeft = parent.getPaddingLeft();
        int dividerRight = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int dividerTop = child.getBottom() + params.bottomMargin;
            int dividerBottom = dividerTop + mDivider.getIntrinsicHeight();

            mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom);
            mDivider.draw(canvas);
        }
    }
}

仕切り線を作成する：divider.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <size
        Android:width="1dp"
        Android:height="1dp" />
    <solid Android:color="@color/grey_300" />
</shape>

あなたのRecyclerviewに仕切りを追加する： 

RecyclerView.ItemDecoration dividerItemDecoration = new DividerItemDecorator(ContextCompat.getDrawable(context, R.drawable.divider));
recyclerView.addItemDecoration(dividerItemDecoration);

最後の商品の仕切りを削除するには：

最後のアイテムのデバイダ描画を防ぐには、この線を変更する必要があります。

for (int i = 0; i < childCount; i++)

に

for (int i = 0; i < childCount-1; i++)

最終的な実装は次のようになります。

public class DividerItemDecorator extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public DividerItemDecorator(Drawable divider) {
        mDivider = divider;
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int dividerLeft = parent.getPaddingLeft();
        int dividerRight = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount - 1; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int dividerTop = child.getBottom() + params.bottomMargin;
            int dividerBottom = dividerTop + mDivider.getIntrinsicHeight();

            mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom);
            mDivider.draw(canvas);
        }
    }
}

それが役に立てば幸い：）

5
Bhuvanesh BS

yqritcの RecyclerView-FlexibleDivider はこれをワンライナーにします。まずこれをあなたのbuild.gradleに追加してください：

compile 'com.yqritc:recyclerview-flexibledivider:1.4.0' // requires jcenter()

これで、recyclerViewのアダプタを設定するためのdivderを設定して追加できます。

recyclerView.setAdapter(myAdapter);
recyclerView.addItemDecoration(new HorizontalDividerItemDecoration.Builder(this).color(Color.RED).sizeResId(R.dimen.divider).marginResId(R.dimen.leftmargin, R.dimen.rightmargin).build());
3
Gaurav Vachhani

コトリン版：

recyclerview.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))
2
DuracellDeMonaco

N Jの答えをもう少し簡単にするには、次のようにします。

public class DividerColorItemDecoration extends DividerItemDecoration {

    public DividerColorItemDecoration(Context context, int orientation) {
        super(context, orientation);
        setDrawable(ContextCompat.getDrawable(context, R.drawable.line_divider));
    }
}
1
Will Poitras

Androidは、残念ながらちょっとしたことが複雑すぎます。ここでDividerItemDecorationを実装せずに、必要なものを実現するための最も簡単な方法：

RecyclerViewの背景色を好みのディバイダ色に追加します。 

<RecyclerView
    Android:id="@+id/rvList"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:divider="@color/colorLightGray"
    Android:scrollbars="vertical"
    tools:listitem="@layout/list_item"
    Android:background="@Android:color/darker_gray"/>

アイテムのレイアウトルート（list_item.xml）に下余白（Android：layout_marginBottom）を追加します。 

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginBottom="1dp">

    <TextView
        Android:id="@+id/tvName"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="John Doe" />

    <TextView
        Android:id="@+id/tvDescription"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/tvName"
        Android:text="Some description blah blah" />

</RelativeLayout>

これにより、アイテムとRecyclerViewの背景色との間に1dpの間隔が空けられます（ダークグレーは仕切りとして表示されます）。

1
John Gummadi

RecycleView Adapterの項目の下部にxの余白を追加するだけです。

onCreateViewHolder 

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

layoutParams.setMargins(0, 0, 0, 5);
itemView.setLayoutParams(layoutParams);
1
S Sathiya
recyclerview.addItemDecoration(new DividerItemDecoration(this, 0));

0は水平、1は垂直です

1
Freny Christian