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

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>

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

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

时间: 2019-10-08

Android利用悬浮按钮实现翻页效果

今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.Layout

Android ViewPager实现左右滑动翻页效果

本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: package com.example.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import a

基于Android实现3D翻页效果

最近做了一个简单的3D效果翻页特效,先说说我的思路吧,首先我这个翻页效果并不是两个Activity之间的跳转,而是在同一个activity类切换不同的view而已.我现在的做法是单击一个button然后Gone当前的布局,然后把需要呈现的布局visible,在隐藏当前布局的时候启动动画,然后给动画添加监听,在动画结束时开始另外一个view的入场动画就行了. 下面来看下我的主页面的布局文件: <FrameLayout xmlns:android="http://schemas.android

android ViewPager实现滑动翻页效果实例代码

实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

Android 中使用RecyclerView实现底部翻页

RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.接下来通过一系列的文章讲解如何使用RecyclerView,彻底抛弃ListView. 最近在做pad端的app,需要一个像网页一样效果,之前使用addView方式,页码少的时候还可以,能实现效果,但是碰到了一个1000多页的界面,就GG了,页码半天显示不出来,于是使用RecyclerView作为容器,主要是看中RecyclerView的复用,不说了,看代

Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果

废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi

android中图片翻页效果简单的实现方法

复制代码 代码如下: public class PageWidget extends View {    private Bitmap foreImage;    private Bitmap bgImage;    private PointF touchPt;    private int screenWidth;    private int screenHeight;    private GradientDrawable shadowDrawableRL;    private Gra

解析Android中实现滑动翻页之ViewFlipper的使用详解

1)View切换的控件-ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类.而ViewAnimator类继承于FrameLayout. 查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果.该类有如下几个和动画相关的方法. setInAnimation:设置View进入屏幕时候使用的动画.该方法有两个重载方法,即可以直接传入Animation对象,也可以传入定义的Animation文件的resourceID. setOut

Android实现阅读APP平移翻页效果

自己做的一个APP需要用到翻页阅读,网上看过立体翻页效果,不过bug太多了还不兼容.看了一下多看阅读翻页是采用平移翻页的,于是就仿写了一个平移翻页的控件.效果如下: 在翻页时页面右边缘绘制了阴影,效果还不错.要实现这种平移翻页控件并不难,只需要定义一个布局管理页面就可以了.具体实现上有以下难点: 1.循环翻页,页面的重复利用. 2.在翻页时过滤掉多点触碰. 3.采用setAdapter的方式设置页面布局和数据. 下面就来一一解决这几个难点.首先看循环翻页问题,怎么样能采用较少的页面实现这种翻页呢

Android自定义左右或上下滑动翻页效果

本文实例为大家分享了Android自定义左右或上下滑动翻页展示的具体代码,供大家参考,具体内容如下 该自定义的效果和ViewPage+Fragment差不多 上下滑动翻页,继承ScrollView public class SlideScrollView extends ScrollView implements PageSlide{ private TotalSlide totalSlide; public SlideScrollView(AppCompatActivity context)

Android通过手势实现答题器翻页效果

本文实例为大家分享了Android答题器翻页功能,主要使用ViewFilpper和GestureDetector来实现,供大家参考,具体内容如下 1.效果图 2.实现思路 把Activity的TouchEvent事件交个GestureDetector来处理,然后使用ViewFilpper使用动画控制多个组件的之间的切换效果.手势的一个Api就不详细说了,大家如果不了解可以查一下. 3.实现的步骤 1).构建手势检测器 2).准备数据 3).为ViewFilpper添加子控件. 4).初始化Ani

jquery+css3问卷答题卡翻页动画效果示例

CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib

Android使用手势实现翻页效果

本程序的手势检测思路就是把Activity的TouchEvent交给GestureDetector处理,本程序使用了一个ViewFlipper组件,ViewFlipper可使用动画控制多个组件之间的切换效果. 本实例程序通过GestureDetector来检测用户的手势动作,并根据手势动作来控制ViewFlipper包含的View组件的切换,从而实现翻页效果. activity_main.xml布局界面代码: <?xml version="1.0" encoding="

Android分页中显示出下面翻页的导航栏的布局实例代码

当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay

使用jQueryMobile实现滑动翻页效果的方法

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢