公司项目最近的一个要求是,显示一系列数据,横向滑动排列,滑到居中位置,就高亮显示,两边半透明。图如下(如红圈所示。整个图画是整个设计,采用的是自定义的recycleview嵌套里面多个recycleview组成的,如果有小伙伴感兴趣的,欢迎私信。当然,后续有时间,我也会继续添加到这里的。):
横向列表很简单实现,就是使用
RecyclerView的layoutmanager的横向设置。 1.每次的item滑动停止时都显示到中间位置,可以使用官方提供的
LinearSnapHelper类,这个网上有很多详细的介绍,在此就不过多解释,主要是讲实现的方式。
调用下面的方法,即可实现滑动停止的item会自动滚到屏幕中间。
LinearSnapHelper mLinearySnapHelper = new LinearSnapHelper();//让recycleview的item居中的方法
mLinearySnapHelper.attachToRecyclerView(hor_recyclerview);//将该类绑定到相应的recycleview上
2.调用1后,我们会发现,所有的item都能自动滚动停止到屏幕中间。这时我们还需要第一个item和最后一个item也在屏幕中间,这时就要手动计算item中间距离屏幕边的位置。
这时我们可以使用recycleview的
addItemDecoration方法,自定义一个itemdecoration类实现item间距的调整。
自定义类如下:
public class CustomItemDecoration extends RecyclerView.ItemDecoration {
/**
* 自定义默认的Item的边距
*/
private int mPageMargin = 30;//dp
/**
* 第一个item的左边距
*/
private int mLeftPageVisibleWidth;
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//计算一下第一个item距离屏幕左边的距离:(屏幕的宽度-item的宽度)/2。其中item的宽度=实际ImagView的宽度+margin。
// if (mLeftPageVisibleWidth ==0) {
//如果每个item都是相等的宽度,计算一次就好了,否则,是需要每次都计算的
LinearLayout linearlayout = (LinearLayout)view.findViewById(R.id.item_lin);
//measure方法的参数值都设为0即可
linearlayout.measure(0,0);
//获取组件宽度
int width = linearlayout.getMeasuredWidth()+dpToPx(30);
//获取实际居左距离
int swidth = (getScreenWidth(view.getContext())) / 2 -(width) /2;
// mLeftPageVisibleWidth = CommonUtil.convertPixelsToDp(view.getContext(),swidth);
mLeftPageVisibleWidth = swidth;//px
// }
//获取当前Item的position
int position = parent.getChildAdapterPosition(view);
//获得Item的数量
int itemCount = parent.getAdapter().getItemCount();
int leftMagin = 0;
int rightMagin = 0;
if(position == 0){
if(mLeftPageVisibleWidth < dpToPx(mPageMargin)){
leftMagin = mLeftPageVisibleWidth;
rightMagin = mLeftPageVisibleWidth;
}else{
leftMagin = mLeftPageVisibleWidth;
rightMagin = dpToPx(mPageMargin);
}
}else if(position == itemCount-1){
if(mLeftPageVisibleWidth < dpToPx(mPageMargin)){
rightMagin = mLeftPageVisibleWidth;
leftMagin = mLeftPageVisibleWidth;
}else{
rightMagin = mLeftPageVisibleWidth;
leftMagin = dpToPx(mPageMargin);
}
}else{
leftMagin = dpToPx(mPageMargin);
rightMagin = dpToPx(mPageMargin);
}
// if (position == 0){
// leftMagin= mLeftPageVisibleWidth;
// }else{
// leftMagin=dpToPx(mPageMargin);
// }
//
// if (position == itemCount-1) {
// rightMagin=mLeftPageVisibleWidth;
// }else{
// rightMagin=dpToPx(mPageMargin);
// }
RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams();
//10,10分别是item到上下的margin
layoutParams.setMargins(leftMagin,10,rightMagin,10);
view.setLayoutParams(layoutParams);
super.getItemOffsets(outRect, view, parent, state);
}
/**
* d p转换成px
* @param dp:
*/
private int dpToPx(int dp){
return (int) (dp * Resources.getSystem().getDisplayMetrics().density + 0.5f);
}
/**
* 获取屏幕的宽度
* @param context:
* @return :
*/
public static int getScreenWidth(Context context) {
WindowManager manager = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
Display display = manager.getDefaultDisplay();
int screenWidth = display.getWidth();
return screenWidth;
}
自定义好该类后,直接用recycleview去使用,如下:
hor_recyclerview.addItemDecoration(new CustomItemDecoration());
到目前为止,就已经实现了要求的效果。
其中如果有什么问题,欢迎小伙伴积极解答。谢谢。