Android自定义videoview仿抖音界面

本文实例为大家分享了android自定义videoview仿抖音界面的具体代码，供大家参考，具体内容如下

1.效果图

和抖音的界面效果一模一样，而且可以自定义，需要什么页面，请自己定义

2.自定义videoview

package com.example.myapplication20;
 
 
import android.content.context;
import android.util.attributeset;
import android.widget.videoview;
 
 
/**
 * 作者：created by jarchie
 * 时间：2020/12/7 15:05:57
 * 邮箱：[e-mail]
 * 说明：自定义宽高videoview
 */
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);
    }
}

3.xml界面

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mrootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <imageview
        android:id="@+id/mthumb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="false"
        android:focusable="false"
        android:scaletype="centercrop"
        android:visibility="visible" />
 
    <imageview
        android:id="@+id/mplay"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerinparent="true"
        android:alpha="0"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/play_arrow" />
 
 
    <linearlayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignparentbottom="true"
        android:layout_marginleft="10dp"
        android:layout_marginbottom="60dp"
        android:orientation="vertical">
 
        <textview
            android:id="@+id/mtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:linespacingextra="5dp"
            android:textcolor="@android:color/white"
            android:textsize="16sp"
            tools:text="测试测试数据哈哈哈哈\n家里几个垃圾了个两个垃圾" />
 
 
    </linearlayout>
 
    <com.example.myapplication20.cusvideoview
        android:id="@+id/mvideoview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="false"
        android:focusable="false" />
</relativelayout>

4.drawable

<vector android:alpha="0.61" android:height="24dp"
    android:viewportheight="24.0" android:viewportwidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillcolor="#99ffffff" android:pathdata="m8,5v14l11,-7z"/>
</vector>

5.主界面设置地址，注意，本demo使用的是本地的视频文件，文件存储再../res/raw文件夹里面，请自行获取

package com.example.myapplication20;
 
import androidx.annotation.nullable;
import androidx.appcompat.app.appcompatactivity;
 
 
import android.media.mediaplayer;
import android.net.uri;
import android.os.bundle;
import android.util.log;
import android.view.view;
import android.widget.imageview;
import android.widget.textview;
 
import androidx.annotation.nullable;
import androidx.appcompat.app.appcompatactivity;
 
/**
 * 作者：jarchie
 * 源码参考地址：https://github.com/jarchie/tiktokdemo
 */
 
public class mainactivity extends appcompatactivity {
    cusvideoview mvideoview;
    private int[] videos = {r.raw.v1, r.raw.v2, r.raw.qi};
    textview mtitle;
 
 
    @override
    protected void oncreate(@nullable bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
 
        mvideoview = findviewbyid(r.id.mvideoview);
        mtitle = findviewbyid(r.id.mtitle);
 
        string url = "android.resource://" + getpackagename() + "/" + videos[1];
        log.e("tag", "video_oncreate: " + url);
 
        mvideoview.setvideouri(uri.parse(url));
        mtitle.settext("@王燕\n一起来跳支舞吧");
    }
 
 
    @override
    protected void onstart() {
        super.onstart();
        playvideo();
    }
 
    @override
    protected void ondestroy() {
        super.ondestroy();
        releasevideo();
    }
 
    //播放
    private void playvideo() {
 
        log.e("tag", "play_video");
 
        // view itemview = mrecycler.getchildat(0);
        final cusvideoview mvideoview = findviewbyid(r.id.mvideoview);
        final imageview mplay = findviewbyid(r.id.mplay);
        final imageview mthumb = 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() {
 
        log.e("tag", "releasevideo_video");
 
        //  view itemview = mrecycler.getchildat(index);
        final cusvideoview mvideoview = findviewbyid(r.id.mvideoview);
        final imageview mthumb = findviewbyid(r.id.mthumb);
        final imageview mplay = findviewbyid(r.id.mplay);
        mvideoview.stopplayback();
        mthumb.animate().alpha(1).start();
        mplay.animate().alpha(0f).start();
    }
 
 
}

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