| Android仿抖音主页效果实现 | 您所在的位置：网站首页 › 抖音的主页是哪个页面 › Android仿抖音主页效果实现 |
Android仿抖音主页效果实现
|
目录 写在前面 一、准备工作 1.1、主页面布局 1.2、列表Item布局 1.3、列表Item适配器 二、自定义LayoutManager 三、实现播放 补充：源码地址：https://github.com/JArchie/TiktokDemo 写在前面
各位老铁，我又来啦！既然来了，那肯定又来搞事情啦，话不多说，先上图！
“抖音”都玩过吧，是不是很好玩，我反正是天天刷，作为一个非著名的Android低级攻城狮，虽然技术菜的一匹，但是也经常刷着刷着会思考：咦？这玩意是用哪个控件做的？这个效果是咋实现的啊？由于本人技术水平有限，所以今天咱就先挑个比较简单的来看看是如何实现的，思考再三，我们就拿抖音首页的这个效果来练练手吧，话不多说，开搞！ 一、准备工作我们先不急着写代码，先对抖音的这种效果做一个简单的分析，首先需要明确的是它是可以滑动的，并且可以上滑回去，也可以下滑到下一个，滑动的数量跟随视频的个数而定，到这里其实能实现这种效果的控件就已经被缩小到一个范围内了。初步判定可以使用ViewPager或者是RecyclerView来实现，你细想一下，它实际上就是一个列表啊，每一屏的视频效果就是一个单独的Item，并且它的列表Item的数量可以很大，至少目前你应该没有哪一次是能把抖音滑到底的吧，那最后咱们使用RecyclerView来实现这个效果。 为什么不用ViewPager？我们需要的是每次只加载一屏，ViewPager默认会有预加载机制，并且数据量较大的时候性能表现也是很差的。反之，RecyclerView最好的性能就是只加载一屏幕的Item，并且处理海量数据时性能更优，所以我们选用RecyclerView实现。 基础列表的承载控件我们已经选好了，然后通过上面的效果不难发现，每一屏里面实际上只有一个Item，所以基础的页面布局你应该也知道该怎么做了。然后就是视频播放了，由于这里我们只是仿照实现抖音的主页面效果，最核心的实际上是实现这个RecyclerView滑动的效果，所以代码我这里是尽量考虑简单化，因此视频播放就直接使用的Android原生的VideoView来做的，效果肯定不会多好，如果你对视频播放这块要求比较高的话，可以考虑使用基于ijkplayer实现的一些比较优秀的开源库，再或者能力强的自己基于ffmpeg定制开发播放器。 OK，到这里基本的分析就已经做完了，下面我们就先来实现基础代码吧！ 先把需要的图片和视频文件准备好哦，别忘记了，视频这里放在res/raw目录下：
新建一个TiktokIndexActivity.java，创建布局文件activity_tiktok_layout.xml： 1.2、列表Item布局由于我们的VideoView想要自己设置宽和高，所以这里自定义一个VideoView，重写onMeasure()测量方法： public class CusVideoView extends VideoView { public CusVideoView(Context context) { super(context); } public CusVideoView(Context context, AttributeSet attrs) { super(context, attrs); } public CusVideoView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getDefaultSize(getWidth(), widthMeasureSpec); int height = getDefaultSize(getHeight(), heightMeasureSpec); setMeasuredDimension(width, height); } }然后接着来编写每一屏Item的布局文件：item_tiktok_layout.xml 1.3、列表Item适配器然后创建列表Item的适配器TiktokAdapter.java：这里视频封面图片我是自己弄了两张图片，效果看上去不大好，有更好的方案的可以留言一起探讨哦！ public class TiktokAdapter extends RecyclerView.Adapter { private int[] videos = {R.raw.v1, R.raw.v2}; private int[] imgs = {R.drawable.fm1, R.drawable.fm2}; private List mTitles = new ArrayList(); private List mMarqueeList = new ArrayList(); private Context mContext; public TiktokAdapter(Context context) { this.mContext = context; mTitles.add("@乔布奇\nAndroid仿抖音主界面UI效果,\n一起来学习Android开发啊啊啊啊啊\n#Android高级UIAndroid开发"); mTitles.add("@乔布奇\nAndroid RecyclerView自定义\nLayoutManager的使用方式，仿抖音效果哦"); mMarqueeList.add("哈哈创作的原声-乔布奇"); mMarqueeList.add("嘿嘿创作的原声-Jarchie"); } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { return new ViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_tiktok_layout, viewGroup, false)); } @Override public void onBindViewHolder(@NonNull final ViewHolder holder, int pos) { //第一种方式：获取视频第一帧作为封面图片 // MediaMetadataRetriever media = new MediaMetadataRetriever(); // media.setDataSource(mContext,Uri.parse("android.resource://" + mContext.getPackageName() + "/" + videos[pos % 2])); // holder.mThumb.setImageBitmap(media.getFrameAtTime()); //第二种方式：使用固定图片作为封面图片 holder.mThumb.setImageResource(imgs[pos % 2]); holder.mVideoView.setVideoURI(Uri.parse("android.resource://" + mContext.getPackageName() + "/" + videos[pos % 2])); holder.mTitle.setText(mTitles.get(pos % 2)); holder.mMarquee.setText(mMarqueeList.get(pos % 2)); holder.mMarquee.setSelected(true); } @Override public int getItemCount() { return Integer.MAX_VALUE; } public class ViewHolder extends RecyclerView.ViewHolder { RelativeLayout mRootView; ImageView mThumb; ImageView mPlay; TextView mTitle; TextView mMarquee; CusVideoView mVideoView; public ViewHolder(@NonNull View itemView) { super(itemView); mRootView = itemView.findViewById(R.id.mRootView); mThumb = itemView.findViewById(R.id.mThumb); mPlay = itemView.findViewById(R.id.mPlay); mVideoView = itemView.findViewById(R.id.mVideoView); mTitle = itemView.findViewById(R.id.mTitle); mMarquee = itemView.findViewById(R.id.mMarquee); } } } 二、自定义LayoutManager我们使用RecyclerView都知道哈，要想让RecylcerView正常工作必须要有两个东西：①、Adapter，负责界面显示适配的，这里我们已经弄好了；②、LayoutManager，告诉列表如何摆放，所以现在想要实现抖音的列表效果的关键就在于这个LayoutManager了，并且普通的LinearLayoutManager是不行的，我们需要自己去实现这个LayoutManger。这里我们取个巧，直接继承LinearLayoutManager来实现自定义布局管理器。 RecyclerView里面有这样一个接口：下面是这个接口的系统源码 //这两个方法不是成对出现的，也没有顺序 public interface OnChildAttachStateChangeListener { void onChildViewAttachedToWindow(@NonNull View var1); void onChildViewDetachedFromWindow(@NonNull View var1); }它里面有两个方法，可以监听列表的Item添加进来和移除出去的两个动作，这是不是就很符合我们现在的使用场景啊，我们的每一屏只有一个Item，并且要在它被添加进来的时候播放视频，在移除时释放掉，所以我们需要实现这个接口。 需要注意的是，这个接口必须在LayoutManager成功进行初始化之后才能监听，所以我们在LayoutManager中重写onAttachedToWindow()方法，在它里面添加这个接口的监听： @Override public void onAttachedToWindow(RecyclerView view) { view.addOnChildAttachStateChangeListener(this); super.onAttachedToWindow(view); }完了之后呢，会重写接口中的两个方法，在这两个方法里面我们就可以来实现播放和暂停的操作了。那么这里问题又来了，播放和暂停这两个动作都涉及到一个问题，你是播放上一个视频还是播放下一个视频，因为列表是可以往下滑也可以往上滑的啊，所以我们还得重写另一个监听位移变化的方法：scrollVerticallyBy()，这里dy的值为正数是往上滑，负数是往下滑 private int mDrift;//位移，用来判断移动方向 @Override public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) { this.mDrift = dy; return super.scrollVerticallyBy(dy, recycler, state); }OK，这样我们就可以判断是向上滑还是向下滑了，那么上面onChildViewAttachedToWindow()这两个方法就可以写了，在这两个方法中，我们需要把具体的业务逻辑回调到Activity里面去处理，所以这里我们还需要再自定义一个接口OnPageSlideListener ： public interface OnPageSlideListener { //释放的监听 void onPageRelease(boolean isNext, int position); //选中的监听以及判断是否滑动到底部 void onPageSelected(int position, boolean isBottom); }现在来处理上面的两个回调接口onChildViewAttachedToWindow()和onChildViewDetachedFromWindow()： private OnPageSlideListener mOnPageSlideListener; //Item添加进来 @Override public void onChildViewAttachedToWindow(@NonNull View view) { //播放视频操作，判断将要播放的是上一个视频，还是下一个视频 if (mDrift > 0) { //向上 if (mOnPageSlideListener != null) mOnPageSlideListener.onPageSelected(getPosition(view), true); } else { //向下 if (mOnPageSlideListener != null) mOnPageSlideListener.onPageSelected(getPosition(view), false); } } //Item移除出去 @Override public void onChildViewDetachedFromWindow(@NonNull View view) { //暂停播放操作 if (mDrift >= 0) { if (mOnPageSlideListener != null) mOnPageSlideListener.onPageRelease(true, getPosition(view)); } else { if (mOnPageSlideListener != null) mOnPageSlideListener.onPageRelease(false, getPosition(view)); } }既然这里是通过接口的方式回调到Activity中实现，所以我们还得给它设置一个接口： //接口注入 public void setOnPageSlideListener(OnPageSlideListener mOnViewPagerListener) { this.mOnPageSlideListener = mOnViewPagerListener; }写到这里，当然还不行，此时如果你去跑你的项目，你会发现它还是会像普通的RecyclerView一样随意的滑动，所以我们还需要一个类的帮助才行：PagerSnapHelper，它可以实现让RecyclerView像ViewPager一样的滑动效果，这里我们给它绑定上RecyclerView： private PagerSnapHelper mPagerSnapHelper; public CustomLayoutManager(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); }推荐阅读：让你明明白白的使用RecyclerView——SnapHelper详解 到这里已经可以实现类似ViewPager滑动的效果了，但是我们还需要重写一个方法，不然的话向下滑动播放的时候会有Bug：因为onChildViewAttachedToWindow()和onChildViewDetachedFromWindow()这两个方法并不是成对出现的，它们二者之间也是没有顺序的，因此这里我们再来监听一下滑动状态的改变：判断已经处理完成即手指抬起时的状态 @Override public void onScrollStateChanged(int state) { switch (state) { case RecyclerView.SCROLL_STATE_IDLE: View view = mPagerSnapHelper.findSnapView(this);//拿到当前进来的View int position = getPosition(view); if (mOnPageSlideListener != null) { mOnPageSlideListener.onPageSelected(position, position == getItemCount() - 1); } break; } }CustomLayoutManager完整代码如下： public class CustomLayoutManager extends LinearLayoutManager implements RecyclerView.OnChildAttachStateChangeListener { private int mDrift;//位移，用来判断移动方向 private PagerSnapHelper mPagerSnapHelper; private OnPageSlideListener mOnPageSlideListener; public CustomLayoutManager(Context context) { super(context); } public CustomLayoutManager(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) { //播放视频操作，判断将要播放的是上一个视频，还是下一个视频 if (mDrift > 0) { //向上 if (mOnPageSlideListener != null) mOnPageSlideListener.onPageSelected(getPosition(view), true); } else { //向下 if (mOnPageSlideListener != null) mOnPageSlideListener.onPageSelected(getPosition(view), false); } } //Item移除出去 @Override public void onChildViewDetachedFromWindow(@NonNull View view) { //暂停播放操作 if (mDrift >= 0) { if (mOnPageSlideListener != null) mOnPageSlideListener.onPageRelease(true, getPosition(view)); } else { if (mOnPageSlideListener != null) mOnPageSlideListener.onPageRelease(false, getPosition(view)); } } @Override public void onScrollStateChanged(int state) { //滑动状态监听 switch (state) { case RecyclerView.SCROLL_STATE_IDLE: View view = mPagerSnapHelper.findSnapView(this); int position = getPosition(view); if (mOnPageSlideListener != null) { mOnPageSlideListener.onPageSelected(position, position == getItemCount() - 1); } break; } } @Override public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) { this.mDrift = dy; return super.scrollVerticallyBy(dy, recycler, state); } //接口注入 public void setOnPageSlideListener(OnPageSlideListener mOnViewPagerListener) { this.mOnPageSlideListener = mOnViewPagerListener; } } 三、实现播放我们接着在Activity中实现播放和停止的方法： //播放 private void playVideo() { View itemView = mRecycler.getChildAt(0); final CusVideoView mVideoView = itemView.findViewById(R.id.mVideoView); final ImageView mPlay = itemView.findViewById(R.id.mPlay); final ImageView mThumb = itemView.findViewById(R.id.mThumb); final MediaPlayer[] mMediaPlayer = new MediaPlayer[1]; mVideoView.start(); mVideoView.setOnInfoListener(new MediaPlayer.OnInfoListener() { @Override public boolean onInfo(MediaPlayer mp, int what, int extra) { mMediaPlayer[0] = mp; mp.setLooping(true); mThumb.animate().alpha(0).setDuration(200).start(); return false; } }); //暂停控制 mPlay.setOnClickListener(new View.OnClickListener() { boolean isPlaying = true; @Override public void onClick(View v) { if (mVideoView.isPlaying()) { mPlay.animate().alpha(1f).start(); mVideoView.pause(); isPlaying = false; } else { mPlay.animate().alpha(0f).start(); mVideoView.start(); isPlaying = true; } } }); } //释放 private void releaseVideo(int index) { View itemView = mRecycler.getChildAt(index); final CusVideoView mVideoView = itemView.findViewById(R.id.mVideoView); final ImageView mThumb = itemView.findViewById(R.id.mThumb); final ImageView mPlay = itemView.findViewById(R.id.mPlay); mVideoView.stopPlayback(); mThumb.animate().alpha(1).start(); mPlay.animate().alpha(0f).start(); }然后处理LayoutManager中回调到Activity中的播放逻辑： mLayoutManager.setOnPageSlideListener(new OnPageSlideListener() { @Override public void onPageRelease(boolean isNext, int position) { int index; if (isNext) { index = 0; } else { index = 1; } releaseVideo(index); } @Override public void onPageSelected(int position, boolean isNext) { playVideo(); } });Activity的完整代码如下： public class TikTokIndexActivity extends AppCompatActivity { private static final String TAG = TikTokIndexActivity.class.getSimpleName(); private RecyclerView mRecycler; private CustomLayoutManager mLayoutManager; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tiktok_layout); initView(); initListener(); } //初始化监听 private void initListener() { mLayoutManager.setOnPageSlideListener(new OnPageSlideListener() { @Override public void onPageRelease(boolean isNext, int position) { int index; if (isNext) { index = 0; } else { index = 1; } releaseVideo(index); } @Override public void onPageSelected(int position, boolean isNext) { playVideo(); } }); } //初始化View private void initView() { mRecycler = findViewById(R.id.mRecycler); mLayoutManager = new CustomLayoutManager(this, OrientationHelper.VERTICAL, false); TiktokAdapter mAdapter = new TiktokAdapter(this); mRecycler.setLayoutManager(mLayoutManager); mRecycler.setAdapter(mAdapter); } //播放 private void playVideo() { //...这里的代码见上方说明 } //释放 private void releaseVideo(int index) { //...这里的代码见上方说明 } }到这里，仿抖音首页播放的效果就简单实现了，OK，咱们下期再会吧！ 祝：工作顺利！ |
【本文地址】