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>

源码下载：抖音首页翻页效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。