服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果

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

2022-11-02 14:06xiaxl Android

这篇文章主要为大家详细介绍了RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

RecyclerView + PagerSnapHelper 实现抖音首页翻页的Viewpager效果,供大家参考,具体内容如下

先来个效果

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

实现方式

PagerSnapHelperActivity.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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

?
1
2
3
4
5
6
7
8
9
10
11
12
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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://blog.csdn.net/xiaxl/article/details/80984464

延伸 · 阅读

精彩推荐