RecyclerView
现在开发Android的都知道,RecyclerView可以替代ListView和GridView,因为它的自由度很高,我们可以很随意的展示我们的数据集,还有默认的动画!但是有一个瑕疵,那就是没有提供一个分隔线的实现类,只有一个抽象类(RecyclerView.ItemDecoration)等着我们自己去实现!不过实现起来还是很简单的。
自定义ItemDecoration的步骤(我以竖向举例)
- 新建一个类,继承自RecyclerView.ItemDecoration
- 把各个item之间的距离加大!留出空间给我们要绘制的分隔线。所以要重写
getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
方法,设置偏移量! - 绘制分隔线到上面设置的间距,重写
onDraw()
方法。
代码实现
public class MyItemDecoration extends RecyclerView.ItemDecoration {
//分隔线
Drawable mDivider;
//我们通过获取系统属性中的listDivider来添加,在系统中的AppTheme中设置
public static final int[] ATRRS = new int[]{
android.R.attr.listDivider
};
public MyItemDecoration(Context context, int orientation){
TypedArray ta = context.obtainStyledAttributes(ATRRS);
mDivider = ta.getDrawable(0);
ta.recycle();
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int pos =parent.getChildLayoutPosition(view);//得到当前view的位置
if(pos != parent.getAdapter().getItemCount()-1) {//如果不是最后一个view 那么留出空间
//设置paddingLeft,paddingTop, paddingRight, paddingBottom
outRect.set(0,0,0,mDivider.getIntrinsicHeight());
//mDivider.getIntrinsicHeight()是获取我们定义的分隔线的高度!
}
}
}
设置offset后的效果
我们可以看到已经有白色的空间了!我们想用自定义的颜色去填充它,接来下我们先在drawable目录下建一个shape,作为我们的divider:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/grey"></solid>
<size android:height="4dp"></size>
</shape>
然后在styles的主题AppTheme里设置:
<item name="android:listDivider">@drawable/divider_bg</item>
然后我们继续绘制我们的分隔线,重写onDraw()方法:
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
//设置分隔线的left和right
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
for (int i = 0; i < parent.getChildCount(); i++) {
View view = parent.getChildAt(i);
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
//分隔线的top和bottom
int top = view.getBottom()+params.bottomMargin;
int bottom = top + mDivider.getIntrinsicHeight();
//分隔线的绘制区域
mDivider.setBounds(left,top,right,bottom);
//把分隔线绘制到canvas
mDivider.draw(c);
}
}
然后运行结果:
运行结果
我们可以在shape中画出渐变效果,然后分隔符就变成这样了:
到此我们就完工了,很简单,只需要重写两个方法就可以了!
下一篇:绘制分组悬浮分隔栏
网友评论