RecyclerView + PagerSnapHelper 实现 抖音 首页翻页的Viewpager效果

RecyclerView + PagerSnapHelper 实现 抖音 首页翻页的Viewpager效果

先来个效果

实现方式

PagerSnapHelperActivity.java

public class PagerSnapHelperActivity extends Activity {

    /**
     * UI
     */
    // recycleView
    private RecyclerView mRecyclerView = null;
    // adapter
    private PagerSnapHelperAdapter mMyadapter = null;
    /**
     * 数据
     */
    //data
    private ArrayList<String> mDataList = new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recycle_pager_activity);

        // -----------创建数据集-------------
        for (int i = 1; i < 100; i++) {
            mDataList.add("item" + i);
        }
        // 纵向List
        initUI();

    }

    public void initUI() {
        // ---RecyclerView---
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview_vertical);
        mRecyclerView.setNestedScrollingEnabled(false);
        // PagerSnapHelper
        PagerSnapHelper snapHelper = new PagerSnapHelper() {
            // 在 Adapter的 onBindViewHolder 之后执行
            @Override
            public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX, int velocityY) {
                // TODO 找到对应的Index
                Log.e("xiaxl: ", "---findTargetSnapPosition---");
                int targetPos = super.findTargetSnapPosition(layoutManager, velocityX, velocityY);
                Log.e("xiaxl: ", "targetPos: " + targetPos);

                Toast.makeText(PagerSnapHelperActivity.this, "滑到到 " + targetPos + "位置", Toast.LENGTH_SHORT).show();

                return targetPos;
            }

            // 在 Adapter的 onBindViewHolder 之后执行
            @Nullable
            @Override
            public View findSnapView(RecyclerView.LayoutManager layoutManager) {
                // TODO 找到对应的View
                Log.e("xiaxl: ", "---findSnapView---");
                View view = super.findSnapView(layoutManager);
                Log.e("xiaxl: ", "tag: " + view.getTag());

                return view;
            }
        };
        snapHelper.attachToRecyclerView(mRecyclerView);
        // ---布局管理器---
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        // 默认是Vertical (HORIZONTAL则为横向列表)
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        //
        mRecyclerView.setLayoutManager(linearLayoutManager);

        // TODO 这么写是为了获取RecycleView的宽高
        mRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    mRecyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    mRecyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }

                /**
                 *  这么写是为了获取RecycleView的宽高
                 */
                // 创建Adapter，并指定数据集
                mMyadapter = new PagerSnapHelperAdapter(mDataList, mRecyclerView.getWidth(), mRecyclerView.getHeight());
                // 设置Adapter
                mRecyclerView.setAdapter(mMyadapter);
            }
        });
    }
}

recycle_pager_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview_vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

RelativeLayout>

PagerSnapHelperAdapter.java

public class PagerSnapHelperAdapter extends RecyclerView.Adapter<PagerSnapHelperAdapter.ViewHolder> {

    // 数据集
    private ArrayList<String> mDataList;


    private int mWidth;
    private int mHeight;

    //
    public PagerSnapHelperAdapter(ArrayList<String> dataset, int width, int height) {
        super();
        this.mDataList = dataset;
        //
        mWidth = width;
        mHeight = height;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        Log.e("xiaxl: ", "---onCreateViewHolder---");
        // 创建一个View，简单起见直接使用系统提供的布局，就是一个TextView
        View view = View.inflate(viewGroup.getContext(), R.layout.recycle_pager_item, null);


        View contentView = view.findViewById(R.id.add_btn);
        RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) contentView.getLayoutParams();
        rl.width = mWidth;
        rl.height = mHeight;
        contentView.setLayoutParams(rl);


        // 创建一个ViewHolder
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {
        Log.e("xiaxl: ", "---onBindViewHolder---");

        // 绑定数据到ViewHolder上
        viewHolder.itemView.setTag(position);
        //
        viewHolder.mTextView.setText(position + " item");
    }

    @Override
    public int getItemCount() {
        return mDataList.size();
    }

    /**
     *
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {

        public TextView mTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.add_btn);
        }
    }
}

recycle_pager_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="640dp"
    android:orientation="vertical">


    <TextView
        android:id="@+id/add_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:gravity="center"
        android:text="添加Item"
        android:textSize="36dp" />

RelativeLayout>

源码下载

https://github.com/AndroidAppWidgetDemo/Android_Widget_RecyclerView

========== THE END ==========

您对“我的文章”有任何疑问，可用微信扫描以下“二维码”向我提问!

如果文章对您有帮助，请扫描以下二维码支持我！