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 * 郵箱:[email protected] * 說明:自定義寬高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(); } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Android實現背景圖片輪播
- Android繪制平移動畫的示例代碼
- Android實現老虎機小遊戲代碼示例
- Android 滑動Scrollview標題欄漸變效果(仿京東toolbar)
- android實現簡單的活動轉盤