devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

RecycleView实现横向带指示器翻页滑动，一行两列自定义布局

作者：你好赵伟 | 2024-03-01 14:53:06

赞

踩

created by shichaohui on 2015/7/10 0010.

* * 1AutoGridLayoutManager * 2PageIndicatorView * 3PageRecyclerView * 4使用

首先看需求效果\ 这里写图片描述\ 在acvitity中有一个控件，需要实现这种分页效果，还要指示器，并且每页的两列不能太分散，使用GridView就很不好实现，这里用RecycleView展示，先看成型后需要用到的结构(需要用到哪些自定义的东西)\ 这里写图片描述\ 自己在Java下建一个新的包，需要这三个自定义的东西，一个用来展示GridView布局样式自定义的GridViewLayoutManger，一个指示器的自定义控件，第三个就是自定义RecleView，实现翻页效果，另外还有一个工具类，实现获取屏幕尺寸，并且让px和dp相互转换的功能，网上有很多，没有几行代码，之前也专门写过，不再赘述，接下来就看着三个自定义东西怎么写

1、AutoGridLayoutManager

``` package inditor.recycleview.horizontal;

import android.content.Context; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.AttributeSet; import android.view.View;

/** * Created by YTF on 2017/9/16. */

public class AutoGridLayoutManager extends GridLayoutManager { private int measuredWidth = 0; private int measuredHeight = 0;

  1. public AutoGridLayoutManager(Context context, AttributeSet attrs,
  2.                              int defStyleAttr, int defStyleRes) {
  3.     super(context, attrs, defStyleAttr, defStyleRes);
  4. }
  5.  
  6. public AutoGridLayoutManager(Context context, int spanCount) {
  7.     super(context, spanCount);
  8. }
  9.  
  10. public AutoGridLayoutManager(Context context, int spanCount,
  11.                              int orientation, boolean reverseLayout) {
  12.     super(context, spanCount, orientation, reverseLayout);
  13. }
  14.  
  15. @Override
  16. public void onMeasure(RecyclerView.Recycler recycler,
  17.                       RecyclerView.State state, int widthSpec, int heightSpec) {
  18.     if (measuredHeight <= 0) {
  19.         int count = state.getItemCount();
  20.         if(count>0){
  21.             View view = recycler.getViewForPosition(0);
  22.             if (view != null) {
  23.                 measureChild(view, widthSpec, heightSpec);
  24.                 measuredWidth = View.MeasureSpec.getSize(widthSpec);
  25.                 measuredHeight = view.getMeasuredHeight() * getSpanCount();
  26.             }
  27.         }
  28.  
  29.     }
  30.     setMeasuredDimension(measuredWidth, measuredHeight);
  31. }

} ```

2、PageIndicatorView

``` package inditor.recycleview.horizontal;

import android.content.Context; import android.util.AttributeSet; import android.view.Gravity; import android.view.View; import android.widget.LinearLayout;

import com.lab.web.entity.UtilDynamicWidth;

import java.util.ArrayList; import java.util.List;

/** * Created by shichaohui on 2015/7/10 0010. *

public class PageIndicatorView extends LinearLayout {

  1. private Context mContext = null;
  2. private int dotSize = 10; // 指示器的大小(dp)
  3. private int margins = 10; // 指示器间距(dp)
  4. private List<View> indicatorViews = null; // 存放指示器
  5.  
  6. public PageIndicatorView(Context context) {
  7.     this(context, null);
  8. }
  9.  
  10. public PageIndicatorView(Context context, AttributeSet attrs) {
  11.     this(context, attrs, 0);
  12. }
  13.  
  14. public PageIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
  15.     super(context, attrs, defStyleAttr);
  16.     init(context);
  17. }
  18.  
  19. private void init(Context context) {
  20.     this.mContext = context;
  21.  
  22.     setGravity(Gravity.CENTER);
  23.     setOrientation(HORIZONTAL);
  24.  
  25.     dotSize = UtilDynamicWidth.dip2px(context, dotSize);
  26.     margins = UtilDynamicWidth.dip2px(context, margins);
  27. }
  28.  
  29. /**
  30.  * 初始化指示器，默认选中第一页
  31.  *
  32.  * @param count 指示器数量，即页数
  33.  */
  34. public void initIndicator(int count) {
  35.  
  36.     if (indicatorViews == null) {
  37.         indicatorViews = new ArrayList<>();
  38.     } else {
  39.         indicatorViews.clear();
  40.         removeAllViews();
  41.     }
  42.     View view;
  43.     LayoutParams params = new LayoutParams(dotSize, dotSize);
  44.     params.setMargins(margins, margins, margins, margins);
  45.     for (int i = 0; i < count; i++) {
  46.         view = new View(mContext);
  47.         view.setBackgroundResource(android.R.drawable.presence_invisible);
  48.         addView(view, params);
  49.         indicatorViews.add(view);
  50.     }
  51.     if (indicatorViews.size() > 0) {
  52.         indicatorViews.get(0).setBackgroundResource(android.R.drawable.presence_online);
  53.     }
  54. }
  55.  
  56. /**
  57.  * 设置选中页
  58.  *
  59.  * @param selected 页下标，从0开始
  60.  */
  61. public void setSelectedPage(int selected) {
  62.     for (int i = 0; i < indicatorViews.size(); i++) {
  63.         if (i == selected) {
  64.             indicatorViews.get(i).setBackgroundResource(android.R.drawable.presence_online);
  65.         } else {
  66.             indicatorViews.get(i).setBackgroundResource(android.R.drawable.presence_invisible);
  67.         }
  68.     }
  69. }

} ```

3、PageRecyclerView

``` package inditor.recycleview.horizontal;

import android.content.Context; import android.support.v7.widget.RecyclerView; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager;

import com.lab.web.entity.UtilDynamicWidth;

import java.util.List; import java.util.Map;

/** * Created by shichaohui on 2015/7/9 0009. *

* 横向分页的GridView效果 *

*

* 默认为1行，每页3列，如果要自定义行数和列数，请在调用{@link PageRecyclerView#setAdapter(Adapter)}方法前调用 * {@link PageRecyclerView#setPageSize(int, int)}方法自定义行数 *

*/ public class PageRecyclerView extends RecyclerView { 
  1. private Context mContext = null;
  2.  
  3. private PageAdapter myAdapter = null;
  4.  
  5. private int shortestDistance; // 超过此距离的滑动才有效
  6. private float slideDistance = 0; // 滑动的距离
  7. private float scrollX = 0; // X轴当前的位置
  8.  
  9. private int spanRow = 1; // 行数
  10. private int spanColumn = 2; // 每页列数
  11. private int totalPage = 0; // 总页数
  12. private int currentPage = 1; // 当前页
  13.  
  14. private int pageMargin = 0; // 页间距
  15.  
  16. private PageIndicatorView mIndicatorView = null; // 指示器布局
  17.  
  18. private int realPosition = 0; // 真正的位置(从上到下从左到右的排列方式变换成从左到右从上到下的排列方式后的位置)
  19.  
  20. /*
  21.  * 0: 停止滚动且手指移开; 1: 开始滚动; 2: 手指做了抛的动作(手指离开屏幕前，用力滑了一下)
  22.  */
  23. private int scrollState = 0; // 滚动状态
  24.  
  25. public PageRecyclerView(Context context) {
  26.     this(context, null);
  27. }
  28.  
  29. public PageRecyclerView(Context context, AttributeSet attrs) {
  30.     this(context, attrs, 0);
  31. }
  32.  
  33. public PageRecyclerView(Context context, AttributeSet attrs, int defStyle) {
  34.     super(context, attrs, defStyle);
  35.     defaultInit(context);
  36. }
  37.  
  38. // 默认初始化
  39. private void defaultInit(Context context) {
  40.     this.mContext = context;
  41.     setLayoutManager(new AutoGridLayoutManager(
  42.             mContext, spanRow, AutoGridLayoutManager.HORIZONTAL, false));
  43.     setOverScrollMode(OVER_SCROLL_NEVER);
  44. }
  45.  
  46. /**
  47.  * 设置行数和每页列数
  48.  *
  49.  * @param spanRow    行数，<=0表示使用默认的行数
  50.  * @param spanColumn 每页列数，<=0表示使用默认每页列数
  51.  */
  52. public void setPageSize(int spanRow, int spanColumn) {
  53.     this.spanRow = spanRow <= 0 ? this.spanRow : spanRow;
  54.     this.spanColumn = spanColumn <= 0 ? this.spanColumn : spanColumn;
  55.     setLayoutManager(new AutoGridLayoutManager(
  56.             mContext, this.spanRow, AutoGridLayoutManager.HORIZONTAL, false));
  57. }
  58.  
  59. /**
  60.  * 设置页间距
  61.  *
  62.  * @param pageMargin 间距(px)
  63.  */
  64. public void setPageMargin(int pageMargin) {
  65.     this.pageMargin = pageMargin;
  66. }
  67.  
  68. /**
  69.  * 设置指示器
  70.  *
  71.  * @param indicatorView 指示器布局
  72.  */
  73. public void setIndicator(PageIndicatorView indicatorView) {
  74.     this.mIndicatorView = indicatorView;
  75. }
  76.  
  77. @Override
  78. protected void onMeasure(int widthSpec, int heightSpec) {
  79.     super.onMeasure(widthSpec, heightSpec);
  80.     shortestDistance = getMeasuredWidth() / 3;
  81. }
  82.  
  83. @Override
  84. public void setAdapter(Adapter adapter) {
  85.     super.setAdapter(adapter);
  86.     this.myAdapter = (PageAdapter) adapter;
  87.     update();
  88. }
  89.  
  90. // 更新页码指示器和相关数据
  91. private void update() {
  92.     // 计算总页数
  93.     int temp = ((int) Math.ceil(myAdapter.dataList.size() / (double) (spanRow * spanColumn)));
  94.     if (temp != totalPage) {
  95.         mIndicatorView.initIndicator(temp);
  96.         // 页码减少且当前页为最后一页
  97.         if (temp < totalPage && currentPage == totalPage) {
  98.             currentPage = temp;
  99.             // 执行滚动
  100.             smoothScrollBy(-getWidth(), 0);
  101.         }
  102.         mIndicatorView.setSelectedPage(currentPage - 1);
  103.         totalPage = temp;
  104.     }
  105. }
  106.  
  107. @Override
  108. public void onScrollStateChanged(int state) {
  109.     switch (state) {
  110.         case 2:
  111.             scrollState = 2;
  112.             break;
  113.         case 1:
  114.             scrollState = 1;
  115.             break;
  116.         case 0:
  117.             if (slideDistance == 0) {
  118.                 break;
  119.             }
  120.             scrollState = 0;
  121.             if (slideDistance < 0) { // 上页
  122.                 currentPage = (int) Math.ceil(scrollX / getWidth());
  123.                 if (currentPage * getWidth() - scrollX < shortestDistance) {
  124.                     currentPage += 1;
  125.                 }
  126.             } else { // 下页
  127.                 currentPage = (int) Math.ceil(scrollX / getWidth()) + 1;
  128.                 if (currentPage <= totalPage) {
  129.                     if (scrollX - (currentPage - 2) * getWidth() < shortestDistance) {
  130.                         // 如果这一页滑出距离不足，则定位到前一页
  131.                         currentPage -= 1;
  132.                     }
  133.                 } else {
  134.                     currentPage = totalPage;
  135.                 }
  136.             }
  137.             // 执行自动滚动
  138.             smoothScrollBy((int) ((currentPage - 1) * getWidth() - scrollX), 0);
  139.             // 修改指示器选中项
  140.             mIndicatorView.setSelectedPage(currentPage - 1);
  141.             slideDistance = 0;
  142.             break;
  143.     }
  144.     super.onScrollStateChanged(state);
  145. }
  146.  
  147. @Override
  148. public void onScrolled(int dx, int dy) {
  149.     scrollX += dx;
  150.     if (scrollState == 1) {
  151.         slideDistance += dx;
  152.     }
  153.  
  154.     super.onScrolled(dx, dy);
  155. }
  156.  
  157. /**
  158.  * 数据适配器
  159.  */
  160. public class PageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
  161.  
  162.     private List<Map<String, Object>> dataList = null;
  163.     private CallBack mCallBack = null;
  164.     private int itemWidth = 0;
  165.     private int itemCount = 0;
  166.  
  167.     /**
  168.      * 实例化适配器
  169.      *
  170.      * @param data
  171.      * @param callBack
  172.      */
  173.     public PageAdapter(List<Map<String, Object>> data, CallBack callBack) {
  174.         this.dataList = data;
  175.         this.mCallBack = callBack;
  176.         itemCount = dataList.size(); //+ spanRow * spanColumn;
  177.     }
  178.  
  179.     @Override
  180.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  181.         if (itemWidth <= 0) {
  182.             // 计算Item的宽度

// parent.post(new Runnable() { // @Override // public void run() { // itemWidth = (getWidth() - pageMargin * 2) / spanColumn; // } // }); // itemWidth = (parent.getWidth() - pageMargin * 2) / spanColumn; //获取手机屏幕宽度px WindowManager wm = (WindowManager) mContext .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); int withScreen=outMetrics.widthPixels; itemWidth = withScreen/6; }

  1. RecyclerView.ViewHolder holder = mCallBack.onCreateViewHolder(parent, viewType);
  2.  
  3.         holder.itemView.measure(0, 0);
  4.         holder.itemView.getLayoutParams().width = itemWidth;
  5.         holder.itemView.getLayoutParams().height = holder.itemView.getMeasuredHeight();
  6.  
  7.         return holder;
  8.     }
  9.  
  10.     @Override
  11.     public void onBindViewHolder(ViewHolder holder, int position) {
  12.  
  13.         WindowManager wm = (WindowManager) mContext
  14.                 .getSystemService(Context.WINDOW_SERVICE);
  15.         DisplayMetrics outMetrics = new DisplayMetrics();
  16.         wm.getDefaultDisplay().getMetrics(outMetrics);
  17.         int withScreen=outMetrics.widthPixels;
  18.         if (spanColumn == -1) {
  19.             // 每个Item距离左右两侧各pageMargin

// holder.itemView.getLayoutParams().width = itemWidth + pageMargin * 2; // holder.itemView.setPadding(pageMargin, 0, pageMargin, 0); } else {

  1. int m = position % (spanRow * spanColumn);
  2.             if (m < spanRow) {
  3.                 // 每页左侧的Item距离左边pageMargin

// holder.itemView.getLayoutParams().width = itemWidth + pageMargin; // mContext.getWindowManager().getDefaultDisplay().getWidth();//获取手机屏幕宽度px

  1. holder.itemView.getLayoutParams().width =  withScreen/2;
  2.                 holder.itemView.setPadding(pageMargin*7, 0, 0, 0);
  3.             } else if (m >= spanRow * spanColumn - spanRow) {
  4.                 // 每页右侧的Item距离右边pageMargin

// holder.itemView.getLayoutParams().width = itemWidth + pageMargin; holder.itemView.getLayoutParams().width = withScreen/2; holder.itemView.setPadding(0, 0, pageMargin*7, 0); } else { // 中间的正常显示 // holder.itemView.getLayoutParams().width = itemWidth; // holder.itemView.setPadding(0, 0, 0, 0); } }

  1. countRealPosition(position);
  2.  
  3.         holder.itemView.setTag(realPosition);
  4.  
  5.         setListener(holder);
  6.         mCallBack.onBindViewHolder(holder, position);

// if (realPosition < dataList.size()) { // holder.itemView.setVisibility(View.VISIBLE); // mCallBack.onBindViewHolder(holder, realPosition); // } else { // holder.itemView.setVisibility(View.INVISIBLE); // }

  1. }
  2.  
  3.     @Override
  4.     public int getItemCount() {
  5.         return itemCount;
  6.     }
  7.  
  8.     private void countRealPosition(int position) {
  9.         // 为了使Item从左到右从上到下排列，需要position的值

// int m = position % (spanRow * spanColumn); realPosition = position; // switch (m) { // // case 1: // case 5: // realPosition = position + 2; // break; // case 3: // case 7: // realPosition = position - 2; // break; // case 2: // realPosition = position + 4; // break; // case 6: // realPosition = position - 4; // break; // case 0: // case 4: // case 8: // realPosition = position; // break; // } }

  1. private void setListener(ViewHolder holder) {
  2.         // 设置监听
  3.         holder.itemView.setOnClickListener(new OnClickListener() {
  4.             @Override
  5.             public void onClick(View v) {
  6.                 mCallBack.onItemClickListener(v, (Integer) v.getTag());
  7.             }
  8.         });
  9.  
  10.         holder.itemView.setOnLongClickListener(new OnLongClickListener() {
  11.             @Override
  12.             public boolean onLongClick(View v) {
  13.                 mCallBack.onItemLongClickListener(v, (Integer) v.getTag());
  14.                 return true;
  15.             }
  16.         });
  17.     }
  18.  
  19.     /**
  20.      * 删除Item
  21.      *
  22.      * @param position 位置
  23.      */
  24.     public void remove(int position) {
  25.         if (position < dataList.size()) {
  26.             // 删除数据
  27.             dataList.remove(position);
  28.             itemCount--;
  29.             // 删除Item
  30.             notifyItemRemoved(position);
  31.             // 更新界面上发生改变的Item
  32.             notifyItemRangeChanged((currentPage - 1) * spanRow * spanColumn, currentPage * spanRow * spanColumn);
  33.             // 更新页码指示器
  34.             update();
  35.         }
  36.     }
  37.  
  38. }
  39.  
  40. public interface CallBack {
  41.  
  42.     /**
  43.      * 创建VieHolder
  44.      *
  45.      * @param parent
  46.      * @param viewType
  47.      */
  48.     RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType);
  49.  
  50.     /**
  51.      * 绑定数据到ViewHolder
  52.      *
  53.      * @param holder
  54.      * @param position
  55.      */
  56.     void onBindViewHolder(RecyclerView.ViewHolder holder, int position);
  57.  
  58.     void onItemClickListener(View view, int position);
  59.  
  60.     void onItemLongClickListener(View view, int position);
  61.  
  62. }

} ```

4、使用

写完了上边的123，就是相当于实现了一整个自定义的控件，这个控件可以实现横向滑动翻页，可以设置行数和列数，并且可以自定义设置指定两个item之间的距离，避免一页中显示连个item显示间距太大的问题，并且翻页的同时会显示指示器\ 4-1：xml文件使用控件：

``` width="matchparent" android:layout height="wrapcontent"> 

  1. </inditor.recycleview.horizontal.PageRecyclerView>
  2.  
  3.             <inditor.recycleview.horizontal.PageIndicatorView
  4.                 android:id="@+id/indicator"
  5.                 android:layout_width="match_parent"
  6.                 android:layout_height="12dp"
  7.                 android:layout_alignParentBottom="true"
  8.                 android:layout_marginBottom="3dp"></inditor.recycleview.horizontal.PageIndicatorView>
  9.         </RelativeLayout>

```

4-2 java 代码绑定数据并展示，添加item的点击和长按事件

``` mRecyclerView = (PageRecyclerView) findViewById(R.id.cusomswipeview); // 设置指示器 mRecyclerView.setIndicator((PageIndicatorView) findViewById(R.id.indicator)); // 设置行数和列数 mRecyclerView.setPageSize(1, 2);

  1. // 设置页间距
  2.                             mRecyclerView.setPageMargin(30);
  3.                             // 设置数据
  4.                             mRecyclerView.setAdapter(myAdapter=mRecyclerView.new PageAdapter(list_tequan1, new PageRecyclerView.CallBack() {
  5.                                 @Override
  6.                                 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  7.                                     View view = LayoutInflater.from(HuiYuanCenterActivity.this).inflate(R.layout.tequan_item, parent, false);
  8.                                     return new MyHolder(view);
  9.                                 }
  10.  
  11.                                 @Override
  12.                                 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
  13.                                     Map<String,Object> map= (Map<String, Object>) list_tequan1.get(position);
  14.                                     Glide.with(HuiYuanCenterActivity.this).load(map.get("img").toString()).into( ((MyHolder) holder).iv_huanyuan_zuo);
  15.                                     ((MyHolder) holder).gv_text.setText((String) map.get("txt"));
  16.                                 }
  17.  
  18.                                 @Override
  19.                                 public void onItemClickListener(View view, int position) {

// Toast.makeText(HuiYuanCenterActivity.this, "点击：" // + listtequan1.get(position), Toast.LENGTHSHORT).show();

  1. }
  2.  
  3.                                 @Override
  4.                                 public void onItemLongClickListener(View view, int position) {

// Toast.makeText(HuiYuanCenterActivity.this, "删除：" // + listtequan1.get(position), Toast.LENGTHSHORT).show(); // myAdapter.remove(position); } })); ```

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/174738
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号