Android
RecyclerViewデコレーション
サーチ…
構文
- RecyclerView addItemDecoration(RecyclerView.ItemDecoration装飾)
- RecyclerView addItemDecoration(RecyclerView.ItemDecoration装飾、intインデックス)
パラメーター
パラメータ | 詳細 |
---|---|
装飾 | RecyclerView に追加するアイテムの装飾 |
索引 | このRecyclerView の装飾のリスト内のインデックスこれは、 getItemOffset とonDraw が呼び出される順序です。後の呼び出しで以前の呼び出しを上回る可能性があります。 |
備考
装飾は静的です
装飾は描画されるだけなので、クリックリスナーやその他のUI機能をそれらに追加することはできません。
複数の装飾
RecyclerView
複数のデコレーションを追加することは場合によっては機能しますが、測定や描画の際に他の装飾を考慮するパブリックAPIは現在ありません。ビュー境界またはビュー装飾境界を取得することができます。装飾境界は、適用されたすべての装飾オフセットの合計です。
その他の関連トピック:
RecyclerView
RecyclerView onClickListener
公式javadoc
https://developer.android.com/reference/android/support/v7/widget/RecyclerView.ItemDecoration.html
セパレータの描画
これは、すべてのビューの下部に線を描きますが、最後の線は項目間のセパレータとして機能します。
public class SeparatorDecoration extends RecyclerView.ItemDecoration {
private final Paint mPaint;
private final int mAlpha;
public SeparatorDecoration(@ColorInt int color, float width) {
mPaint = new Paint();
mPaint.setColor(color);
mPaint.setStrokeWidth(width);
mAlpha = mPaint.getAlpha();
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
// we retrieve the position in the list
final int position = params.getViewAdapterPosition();
// add space for the separator to the bottom of every view but the last one
if (position < state.getItemCount()) {
outRect.set(0, 0, 0, (int) mPaint.getStrokeWidth()); // left, top, right, bottom
} else {
outRect.setEmpty(); // 0, 0, 0, 0
}
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
// a line will draw half its size to top and bottom,
// hence the offset to place it correctly
final int offset = (int) (mPaint.getStrokeWidth() / 2);
// this will iterate over every visible view
for (int i = 0; i < parent.getChildCount(); i++) {
final View view = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
// get the position
final int position = params.getViewAdapterPosition();
// and finally draw the separator
if (position < state.getItemCount()) {
// apply alpha to support animations
mPaint.setAlpha((int) (view.getAlpha() * mAlpha));
float positionY = view.getBottom() + offset + view.getTranslationY();
// do the drawing
c.drawLine(view.getLeft() + view.getTranslationX(),
positionY,
view.getRight() + view.getTranslationX(),
positionY,
mPaint);
}
}
}
}
ItemDecorationでのアイテム単位のマージン
RecyclerView.ItemDecoration
を使用して、 RecyclerView.ItemDecoration
各項目の周囲に余白を設定することができます。これにより、アダプタ実装とアイテムビューXMLの両方をクリーンアップすることができます。
public class MyItemDecoration
extends RecyclerView.ItemDecoration {
private final int extraMargin;
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
int position = parent.getChildAdapterPosition(view);
// It's easy to put extra margin on the last item...
if (position + 1 == parent.getAdapter().getItemCount()) {
outRect.bottom = extraMargin; // unit is px
}
// ...or you could give each item in the RecyclerView different
// margins based on its position...
if (position % 2 == 0) {
outRect.right = extraMargin;
} else {
outRect.left = extraMargin;
}
// ...or based on some property of the item itself
MyListItem item = parent.getAdapter().getItem(position);
if (item.isFirstItemInSection()) {
outRect.top = extraMargin;
}
}
public MyItemDecoration(Context context) {
extraMargin = context.getResources()
.getDimensionPixelOffset(R.dimen.extra_margin);
}
}
デコレーションを有効にするには、単にRecyclerViewに追加します。
// in your onCreate()
RecyclerView rv = (RecyclerView) findItemById(R.id.myList);
rv.addItemDecoration(new MyItemDecoration(context));
RecyclerViewにディバイダを追加する
まず、 RecyclerView.ItemDecoration
するクラスを作成する必要があります。
public class SimpleBlueDivider extends RecyclerView.ItemDecoration {
private Drawable mDivider;
public SimpleBlueDivider(Context context) {
mDivider = context.getResources().getDrawable(R.drawable.divider_blue);
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
//divider padding give some padding whatever u want or disable
int left =parent.getPaddingLeft()+80;
int right = parent.getWidth() - parent.getPaddingRight()-30;
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);
}
}
}
divider_blue.xml
をあなたのdivider_blue.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="4dp" />
<solid android:color="#AA123456" />
</shape>
次に、次のように使用します。
recyclerView.addItemDecoration(new SimpleBlueDivider(context));
結果は次のようになります:
この画像は、分周器を追加する際にMaterial Designの仕様に従ったければ、分周器をどのように動作させるかの一例にすぎません。このリンクを見てください: 分周器とリンクを提供することによって@Brenden Kromhoutに感謝します。
とDividerItemDecorationを使って仕切りを追加する方法
DividerItemDecoration
はアイテム間の分割線として使用できるRecyclerView.ItemDecoration
です。
DividerItemDecoration mDividerItemDecoration = new DividerItemDecoration(context,
mLayoutManager.getOrientation());
recyclerView.addItemDecoration(mDividerItemDecoration);
DividerItemDecoration.VERTICAL
とDividerItemDecoration.HORIZONTAL
を使用してDividerItemDecoration.VERTICAL
をDividerItemDecoration.HORIZONTAL
ます。
RecycleViewのGridLayoutManagerに対するItemOffsetDecoration
次の例は、GridLayoutのアイテムに等しいスペースを与えるのに役立ちます。
ItemOffsetDecoration.java
public class ItemOffsetDecoration extends RecyclerView.ItemDecoration {
private int mItemOffset;
private int spanCount = 2;
public ItemOffsetDecoration(int itemOffset) {
mItemOffset = itemOffset;
}
public ItemOffsetDecoration(@NonNull Context context, @DimenRes int itemOffsetId) {
this(context.getResources().getDimensionPixelSize(itemOffsetId));
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int position = parent.getChildLayoutPosition(view);
GridLayoutManager manager = (GridLayoutManager) parent.getLayoutManager();
if (position < manager.getSpanCount())
outRect.top = mItemOffset;
if (position % 2 != 0) {
outRect.right = mItemOffset;
}
outRect.left = mItemOffset;
outRect.bottom = mItemOffset;
}
}
以下のコードのようにItemDecorationを呼び出すことができます。
recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
GridLayoutManager lLayout = new GridLayoutManager(getActivity(), 2);
ItemOffsetDecoration itemDecoration = new ItemOffsetDecoration(mActivity, R.dimen.item_offset);
recyclerView.addItemDecoration(itemDecoration);
recyclerView.setLayoutManager(lLayout);
アイテムオフセットの例
<dimen name="item_offset">5dp</dimen>