【Android 进阶】仿抖音系列之列表播放视频（二）-低调大师

【Android 进阶】仿抖音系列之列表播放视频（二）

2018-10-14 601

上一篇中，我们实现了仿抖音上下翻页切换视频的效果，详见【Android 进阶】仿抖音系列之翻页上下滑切换视频（一），这一篇，我们来实现抖音列表播放视频。

之前也在github上找到一个demo,这是链接，原理和我的一样，只是用起来比较麻烦。。。

先说下原理，这里用到了RecyclerView的onScrolled和onScrollStateChanged 监听，在onScrolled中判断当前可见的position，结合onScrollStateChanged中返回的当前RecyclerView的滑动状态，当是拖动和停止滚动时，可以播放；当是惯性滑动时，暂停播放。

关于RecyclerView3种滑动状态，RecyclerView.SCROLL_STATE_IDLE，RecyclerView.SCROLL_STATE_DRAGGING，RecyclerView.SCROLL_STATE_SETTLING，大家可以自行百度，这里不做过多的描述了。

rvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
                firstVisibleItem = layoutManager.findFirstVisibleItemPosition();
                lastVisibleItem = layoutManager.findLastVisibleItemPosition();

            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                switch (newState) {
                    case RecyclerView.SCROLL_STATE_IDLE://停止滚动
                        /**在这里执行，视频的自动播放与停止*/
                        autoPlayVideo(recyclerView);
                        break;
                    case RecyclerView.SCROLL_STATE_DRAGGING://拖动
                        autoPlayVideo(recyclerView);
                        break;
                    case RecyclerView.SCROLL_STATE_SETTLING://惯性滑动
                        JZVideoPlayer.releaseAllVideos();
                        break;
                }

            }
        });

布局就是一个RecyclerView，就不贴了，下面是Adapter

         urlList = new ArrayList<>();
        urlList.add("http://image.38.hn/public/attachment/201805/100651/201805181532123423.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803151735198462.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150923220770.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150922255785.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150920130302.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141625005241.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141624378522.mp4");
        urlList.add("http://image.38.hn/public/attachment/201803/100651/201803131546119319.mp4");

        videoAdapter = new ListVideoAdapter(urlList);
        rvList.setLayoutManager(new LinearLayoutManager(ListActivity.this));
        rvList.setAdapter(videoAdapter);

Adapter这里自己做了个封装，可以用原生或者其他封装比较好的，这里就不贴了

  class ListVideoAdapter extends BaseRecAdapter<String, VideoViewHolder> {


        public ListVideoAdapter(List<String> list) {
            super(list);
        }

        @Override
        public void onHolder(VideoViewHolder holder, String bean, int position) {
            holder.mp_video.setUp(bean, JZVideoPlayerStandard.CURRENT_STATE_NORMAL);
            if (position == 0) {
                holder.mp_video.startVideo();
            }
            Glide.with(context).load(bean).into(holder.mp_video.thumbImageView);
            holder.tv_title.setText("第" + position + "个视频");
        }

        @Override
        public VideoViewHolder onCreateHolder() {
            return new VideoViewHolder(getViewByRes(R.layout.item_video));

        }


    }

    public class VideoViewHolder extends BaseRecViewHolder {
        public View rootView;
        public MyVideoPlayer mp_video;
        public TextView tv_title;

        public VideoViewHolder(View rootView) {
            super(rootView);
            this.rootView = rootView;
            this.mp_video = rootView.findViewById(R.id.mp_video);
            this.tv_title = rootView.findViewById(R.id.tv_title);
        }

    }

布局如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:textSize="18sp" />

    <com.ch.doudemo.widget.MyVideoPlayer
        android:id="@+id/mp_video"
        android:layout_width="match_parent"
        android:layout_height="500dp" />

</LinearLayout>

这里使用的是 JiaoZiVideoPlayer，其中MyVideoPlayer 是之前公司项目需要，对其做的个性化定制，这里下面再说。

下来就是本篇的核心，通过判断可见项，暂停/播放视频，代码如下

/**
     * 自动播放
     */
    private void autoPlayVideo(RecyclerView recyclerView) {

        if (firstVisibleItem == 0 && lastVisibleItem == 0 && recyclerView.getChildAt(0) != null) {

            MyVideoPlayer videoView = null;
            if (recyclerView != null && recyclerView.getChildAt(0) != null) {
                videoView = recyclerView.getChildAt(0).findViewById(R.id.mp_video);
            }
            if (videoView != null) {
                if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
                    videoView.startVideo();
                }
            }
        }

        for (int i = 0; i <= lastVisibleItem; i++) {
            if (recyclerView == null || recyclerView.getChildAt(i) == null) {
                return;
            }
            MyVideoPlayer
                    videoView = recyclerView.getChildAt(i).findViewById(R.id.mp_video);
            if (videoView != null) {

                Rect rect = new Rect();
                //获取视图本身的可见坐标，把值传入到rect对象中
                videoView.getLocalVisibleRect(rect);
                //获取视频的高度
                int videoHeight = videoView.getHeight();

                if (rect.top <= 100 && rect.bottom >= videoHeight) {
                    if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
                        videoView.startVideo();
                    }
                    return;
                }

                JZVideoPlayer.releaseAllVideos();

            } else {
                JZVideoPlayer.releaseAllVideos();
            }

        }

    }

顺便说一下，为啥用JiaoZiVideoPlayer，就是因为 JZVideoPlayer.releaseAllVideos();，一句代码就可以暂停所有的播放器，否则自己要实现这个还是比较麻烦的

到这里，大概功能已经实现了，下面说说定制化的功能。需要去掉原播放器的进度条、按钮，点击视频，全屏播放，再次点击取消全屏。

我的做法是添加一个透明度为0的布局，覆盖在播放器上，这样实际上点击的是我们添加的布局

这里有个小技巧，可以粘贴源码中的布局，重要的事情说三遍，不要修改文件名、不要修改文件名、不要修改文件名，找到相关布局，设置android:visibility="gone"，这样我们的项目中的布局就会替换掉原来的布局。

完整代码如下

jz_layout_standard.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:descendantFocusability="blocksDescendants">

    <FrameLayout
        android:id="@+id/surface_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

    <ImageView
        android:id="@+id/thumb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#000000"
        android:scaleType="fitCenter" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone">

        <LinearLayout
            android:id="@+id/layout_bottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/jz_bottom_bg"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:visibility="invisible">

            <TextView
                android:id="@+id/current"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:text="00:00"
                android:textColor="#ffffff" />

            <SeekBar
                android:id="@+id/bottom_seek_progress"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0"
                android:background="@null"
                android:max="100"
                android:maxHeight="1dp"
                android:minHeight="1dp"
                android:paddingBottom="8dp"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:paddingTop="8dp"
                android:progressDrawable="@drawable/jz_bottom_seek_progress"
                android:thumb="@drawable/jz_bottom_seek_thumb" />

            <TextView
                android:id="@+id/total"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="00:00"
                android:textColor="#ffffff" />

            <TextView
                android:id="@+id/clarity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:paddingLeft="20dp"
                android:text="clarity"
                android:textAlignment="center"
                android:textColor="#ffffff" />

            <ImageView
                android:id="@+id/fullscreen"
                android:layout_width="52.5dp"
                android:layout_height="fill_parent"
                android:paddingLeft="14dp"
                android:paddingRight="14dp"
                android:scaleType="centerInside"
                android:src="@drawable/jz_enlarge" />
        </LinearLayout>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/bottom_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:layout_alignParentBottom="true"
        android:max="100"
        android:progressDrawable="@drawable/jz_bottom_progress" />

    <ImageView
        android:id="@+id/back_tiny"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginLeft="6dp"
        android:layout_marginTop="6dp"
        android:background="@drawable/jz_click_back_tiny_selector"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="gone">

        <RelativeLayout
            android:id="@+id/layout_top"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/jz_title_bg"
            android:gravity="center_vertical">

            <ImageView
                android:id="@+id/back"
                android:layout_width="23dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:paddingLeft="12dp"
                android:paddingStart="12dp"
                android:scaleType="centerInside"
                android:src="@drawable/jz_click_back_selector" />


            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginEnd="12dp"
                android:layout_marginLeft="12dp"
                android:layout_marginRight="12dp"
                android:layout_marginStart="12dp"
                android:layout_toEndOf="@+id/back"
                android:layout_toLeftOf="@+id/battery_time_layout"
                android:layout_toRightOf="@+id/back"
                android:ellipsize="end"
                android:maxLines="2"
                android:textColor="#ffffff"
                android:textSize="18sp" />

            <LinearLayout
                android:id="@+id/battery_time_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="14dp"
                android:layout_marginRight="14dp"
                android:gravity="center_vertical"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/battery_level"
                    android:layout_width="23dp"
                    android:layout_height="10dp"
                    android:layout_gravity="center_horizontal"
                    android:background="@drawable/jz_battery_level_10" />

                <TextView
                    android:id="@+id/video_current_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_vertical"
                    android:maxLines="1"
                    android:textColor="#ffffffff"
                    android:textSize="12.0sp" />
            </LinearLayout>

        </RelativeLayout>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/loading"
        android:layout_width="@dimen/jz_start_button_w_h_normal"
        android:layout_height="@dimen/jz_start_button_w_h_normal"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:indeterminateDrawable="@drawable/jz_loading"
        android:visibility="invisible" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone">

        <LinearLayout
            android:id="@+id/start_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical">

            <ImageView
                android:id="@+id/start"
                android:layout_width="@dimen/jz_start_button_w_h_normal"
                android:layout_height="@dimen/jz_start_button_w_h_normal"
                android:src="@drawable/jz_click_play_selector" />
        </LinearLayout>

        <TextView
            android:id="@+id/replay_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/start_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="6dp"
            android:text="@string/replay"
            android:textColor="#ffffff"
            android:textSize="12sp"
            android:visibility="invisible" />


        <LinearLayout
            android:id="@+id/retry_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/video_loading_faild"
                android:textColor="@android:color/white"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/retry_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/retry_bg"
                android:paddingBottom="4dp"
                android:paddingLeft="9dp"
                android:paddingRight="9dp"
                android:paddingTop="4dp"
                android:text="@string/click_to_restart"
                android:textColor="@android:color/white"
                android:textSize="14sp" />
        </LinearLayout>
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rl_touch_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0"
        android:background="@color/cf0f2f7"></RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:padding="15dp"
        android:visibility="gone">

        <ImageView
            android:id="@+id/iv_start"
            android:layout_width="16dp"
            android:layout_height="18dp"
            android:background="@mipmap/stop" />
    </LinearLayout>


</RelativeLayout>

还需要实现循环播放，这个比较简单，重写onAutoCompletion方法，当其播放完成时，继续播放即可。

 @Override
    public void onAutoCompletion() {

        thumbImageView.setVisibility(View.GONE);

        if (currentScreen == SCREEN_WINDOW_FULLSCREEN) {
            onStateAutoComplete();
            setUp((String) getCurrentUrl(), JZVideoPlayer.SCREEN_WINDOW_FULLSCREEN);
        } else {
            super.onAutoCompletion();
            setUp((String) getCurrentUrl(), JZVideoPlayer.CURRENT_STATE_NORMAL);
        }
        //循环播放

        startVideo();
    }

到这里，列表播放这个功能已经完成了。

最后，献上完整代码。Github

微信关注我们

原文链接：https://yq.aliyun.com/articles/658278

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android开发 - ImageView加载Base64编码的图片

在我们开发应用的过程中，并不是所有情况下都请求图片的URL或者加载本地图片，有时我们需要加载Base64编码的图片。这种情况出现在服务端需要动态生成的图片，比如：二维码图形验证码 … 这些应用场景有个共同点就是，这些图片都是由服务器动态生成，并不需要生成后保存成文件再返回给客户端。 Android中ImageView加载Base64图片其实非常简单，并不需要引入第三方库，方法如下： import android.util.Base64; # 代码片段 String base64 = "data:image/png;base64......" byte[] decodedString = Base64.decode(base64, Base64.DEFAULT); Bitmap decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length); imageView.setImageBitmap(decodedByte); 这样就可以将Base64的图片加载到ImageView中了。其...

2018-10-15

556

又是好久没有积累东西了。惭愧，惭愧。。。手动哭泣。闲话说到这里，下面我介绍一种新的 App 保活方式哈，目前用小米家族手机涵盖 Android 5.0 到 Android 8.1家族的测试。结论是，不主动干掉，是死不了的。但是主动干掉了，是活不了的。之前介绍介绍了双进程保活，我还大言不惭的适配 8.0 。但是，从 Android 6.0 之后这个方法及其不好用，说死就死，华为，小米分分钟弄死笔者的 App 。而且最恶心的事情，居然 ANR 。笔者对现在那些闭着眼睛抄博客的大佬实在不敢恭维了。对了，之前的笔记地址为：自己用到的Android 双服务保活（适配8.0）, Android 6.0 以上不建议使用！！！好了，下面说说，服务播放音乐，保活的基本原理吧。一、保活原理 1、准备一首无声音乐（文末我会提供）； 2、在认为可以进行保活的位置进行激活服务播放（笔者在MainActivity 内启动服务）； 3、在服务的 onCreate（）方法内初始化 MediaPlayer 对象； 4、将 onBind（）方法返回值置空； 5、在 onStartComm...

2018-10-15

544

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。