仿抖音播放小视频

先看看效果图：



讲下大概思路，使用recycleview配合自定义LinearLayoutManager来实现这个功能，这里着重说下自定义LinearLayoutManager的实现


可以看到每当下一个item滑入屏幕时，上面的item会继续播放视频，而滑入的item只有当全部进入屏幕才会播放，而且当手指抬起时，当前item会根据滑动的距离相应的自动滑入滑出，针对这种情形，就会想到使用SnapHelper
不了解的同学可以看看 <https://www.jianshu.com/p/e54db232df62>

正式撸代码：
1.首先定义一个接口，用来执行item的相关操作
public interface OnViewPagerListener { /*item滑出释放的监听*/ void onPageRelease(
boolean isNext, int position); /*item滑入的监听以及判断是否滑动到底部*/ void onPageSelected(int
position,boolean isBottom); }
2.继承LinearLayoutManager ，对滑入滑出的item回调1中接口里面的方法
import android.content.Context; import android.support.annotation.NonNull;
import android.support.v7.widget.LinearLayoutManager; import
android.support.v7.widget.PagerSnapHelper;import
android.support.v7.widget.RecyclerView;import android.view.View; public class
MyLayoutManager extends LinearLayoutManager implements RecyclerView.
OnChildAttachStateChangeListener { private int mDrift;
//位移，用来判断移动方向，是向上还是向下滑，大于0向上滑，小于0向下滑 //PagerSnapHelper
可以使recycleview实现跟viewpager一样的效果，每次滑一个item private PagerSnapHelper
mPagerSnapHelper;private OnViewPagerListener mOnViewPagerListener; public
MyLayoutManager(Context context) { super(context); } public MyLayoutManager
(Context context,int orientation, boolean reverseLayout) { super(context,
orientation, reverseLayout); mPagerSnapHelper =new PagerSnapHelper(); }
@Override public void onAttachedToWindow(RecyclerView view) {
view.addOnChildAttachStateChangeListener(this);
mPagerSnapHelper.attachToRecyclerView(view);super.onAttachedToWindow(view); }
//当Item添加进来调用这个方法 @Override public void onChildViewAttachedToWindow(@NonNull
View view) {int position = getPosition(view); /*
这里主要是为了第一次进入时，没进行滑动时，让第一个item播放 */ if(0==position){ if (mOnViewPagerListener !=
null) { mOnViewPagerListener.onPageSelected(getPosition(view), false); } } }
/*当item滑出时，会调用这个方法*/ @Override public void onChildViewDetachedFromWindow
(@NonNull View view) {if (mDrift >= 0){ //向上滑 if (mOnViewPagerListener != null)
mOnViewPagerListener.onPageRelease(true,getPosition(view)); }else { if
(mOnViewPagerListener !=null) mOnViewPagerListener.onPageRelease(false
,getPosition(view)); } }/*对滑动状态监听，主要是手指释放时，找到惯性滑动停止后的item*/ @Override public
void onScrollStateChanged(int state) { switch (state) { case
RecyclerView.SCROLL_STATE_IDLE: View view= mPagerSnapHelper.findSnapView(this);
//获取到当前的item int position = getPosition(view); if (mOnViewPagerListener != null
) { mOnViewPagerListener.onPageSelected(position, position == getItemCount() -1
); }break; } super.onScrollStateChanged(state); } public void
setOnViewPagerListener(OnViewPagerListener mOnViewPagerListener) { this
.mOnViewPagerListener = mOnViewPagerListener; }//这里主要是为了判断是向上滑还是向下滑 @Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler,
RecyclerView.State state) {this.mDrift = dy; return super
.scrollVerticallyBy(dy, recycler, state); } }
3.接下来就是正常使用recycleview了
import android.annotation.TargetApi; import android.media.MediaPlayer; import
android.net.Uri;import android.os.Build; import android.os.Bundle; import
android.support.v7.app.AppCompatActivity;import
android.support.v7.widget.OrientationHelper;import
android.support.v7.widget.RecyclerView;import android.util.Log; import
android.view.LayoutInflater;import android.view.View; import
android.view.ViewGroup;import android.widget.ImageView; import
android.widget.RelativeLayout;import android.widget.VideoView; public class
MainActivity extends AppCompatActivity { private static final String TAG =
"dongnao"; private RecyclerView mRecyclerView; private MyAdapter mAdapter;
MyLayoutManager myLayoutManager;@Override protected void onCreate(Bundle
savedInstanceState) {super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initView(); initListener(); }private
void initView() { mRecyclerView = findViewById(R.id.recycler);
//设置我们自定义的layoutManager myLayoutManager = new MyLayoutManager(this,
OrientationHelper.VERTICAL,false); mAdapter = new MyAdapter();
mRecyclerView.setLayoutManager(myLayoutManager);
mRecyclerView.setAdapter(mAdapter); }private void initListener(){
myLayoutManager.setOnViewPagerListener(new OnViewPagerListener() { @Override
public void onInitComplete() { } @Override public void onPageRelease(boolean
isNext,int position) { int index = 0; if (isNext){ index = 0; }else { index = 1
; } releaseVideo(index); }@Override public void onPageSelected(int position,
boolean bottom) { playVideo(0); } }); } class MyAdapter extends
RecyclerView.Adapter<MyAdapter.ViewHolder>{private int[] imgs =
{R.mipmap.img_video_1,R.mipmap.img_video_2};private int[] videos =
{R.raw.video_1,R.raw.video_2};public MyAdapter(){ } @Override public ViewHolder
onCreateViewHolder(ViewGroup parent, int viewType) { View view =
LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view_pager,parent,
false); return new ViewHolder(view); } @Override public void onBindViewHolder
(ViewHolder holder,int position) {
holder.img_thumb.setImageResource(imgs[position%2]);
holder.videoView.setVideoURI(Uri.parse("android.resource://"+getPackageName()+
"/"+ videos[position%2])); } @Override public int getItemCount() { return 20; }
public class ViewHolder extends RecyclerView.ViewHolder{ ImageView img_thumb;
VideoView videoView; ImageView img_play; RelativeLayout rootView;public
ViewHolder(View itemView) { super(itemView); img_thumb =
itemView.findViewById(R.id.img_thumb); videoView =
itemView.findViewById(R.id.video_view); img_play =
itemView.findViewById(R.id.img_play); rootView =
itemView.findViewById(R.id.root_view); } } }private void releaseVideo(int
index){ View itemView = mRecyclerView.getChildAt(index);final VideoView
videoView = itemView.findViewById(R.id.video_view);final ImageView imgThumb =
itemView.findViewById(R.id.img_thumb);final ImageView imgPlay =
itemView.findViewById(R.id.img_play); videoView.stopPlayback();
imgThumb.animate().alpha(1).start(); imgPlay.animate().alpha(0f).start(); }
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) private void playVideo(int
position) { View itemView = mRecyclerView.getChildAt(position);final VideoView
videoView = itemView.findViewById(R.id.video_view);final ImageView imgPlay =
itemView.findViewById(R.id.img_play);final ImageView imgThumb =
itemView.findViewById(R.id.img_thumb);final RelativeLayout rootView =
itemView.findViewById(R.id.root_view);final MediaPlayer[] mediaPlayer = new
MediaPlayer[1]; videoView.start(); videoView.setOnInfoListener(new
MediaPlayer.OnInfoListener() {@Override public boolean onInfo(MediaPlayer mp,
int what, int extra) { mediaPlayer[0] = mp; mp.setLooping(true);
imgThumb.animate().alpha(0).setDuration(200).start(); return false; } });
videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override
public void onPrepared(MediaPlayer mp) { } }); imgPlay.setOnClickListener(new
View.OnClickListener() {boolean isPlaying = true; @Override public void onClick
(View v) {if (videoView.isPlaying()){ imgPlay.animate().alpha(1f).start();
videoView.pause(); isPlaying =false; }else { imgPlay.animate().alpha(0
f).start(); videoView.start(); isPlaying =true; } } }); } }
最后附上源码地址：https://github.com/shengweiling/DouyinDemo
<https://github.com/shengweiling/DouyinDemo>

• « 上一篇：Netty基础系列(3) --彻底理解NIO
• » 下一篇：html js 上传图片并回显