经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Android自定义videoview仿抖音界面
来源:jb51  时间:2021/5/10 8:45:56  对本文有异议

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

1.效果图

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

2.自定义videoview

  1. package com.example.myapplication20;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.widget.VideoView;
  5. /**
  6. * 作者:created by Jarchie
  7. * 时间:2020/12/7 15:05:57
  8. * 邮箱:jarchie520@gmail.com
  9. * 说明:自定义宽高VideoView
  10. */
  11. public class CusVideoView extends VideoView {
  12. public CusVideoView(Context context) {
  13. super(context);
  14. }
  15. public CusVideoView(Context context, AttributeSet attrs) {
  16. super(context, attrs);
  17. }
  18. public CusVideoView(Context context, AttributeSet attrs, int defStyleAttr) {
  19. super(context, attrs, defStyleAttr);
  20. }
  21. @Override
  22. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  23. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  24. int width = getDefaultSize(getWidth(), widthMeasureSpec);
  25. int height = getDefaultSize(getHeight(), heightMeasureSpec);
  26. setMeasuredDimension(width, height);
  27. }
  28. }

3.xml界面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:id="@+id/mRootView"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent">
  8. <ImageView
  9. android:id="@+id/mThumb"
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent"
  12. android:clickable="false"
  13. android:focusable="false"
  14. android:scaleType="centerCrop"
  15. android:visibility="visible" />
  16. <ImageView
  17. android:id="@+id/mPlay"
  18. android:layout_width="100dp"
  19. android:layout_height="100dp"
  20. android:layout_centerInParent="true"
  21. android:alpha="0"
  22. android:clickable="true"
  23. android:focusable="true"
  24. android:src="@drawable/play_arrow" />
  25. <LinearLayout
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:layout_alignParentBottom="true"
  29. android:layout_marginLeft="10dp"
  30. android:layout_marginBottom="60dp"
  31. android:orientation="vertical">
  32. <TextView
  33. android:id="@+id/mTitle"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:lineSpacingExtra="5dp"
  37. android:textColor="@android:color/white"
  38. android:textSize="16sp"
  39. tools:text="测试测试数据哈哈哈哈\n家里几个垃圾了个两个垃圾" />
  40. </LinearLayout>
  41. <com.example.myapplication20.CusVideoView
  42. android:id="@+id/mVideoView"
  43. android:layout_width="match_parent"
  44. android:layout_height="match_parent"
  45. android:clickable="false"
  46. android:focusable="false" />
  47. </RelativeLayout>

4.drawable

  1. <vector android:alpha="0.61" android:height="24dp"
  2. android:viewportHeight="24.0" android:viewportWidth="24.0"
  3. android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
  4. <path android:fillColor="#99ffffff" android:pathData="M8,5v14l11,-7z"/>
  5. </vector>

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

  1. package com.example.myapplication20;
  2. import androidx.annotation.Nullable;
  3. import androidx.appcompat.app.AppCompatActivity;
  4. import android.media.MediaPlayer;
  5. import android.net.Uri;
  6. import android.os.Bundle;
  7. import android.util.Log;
  8. import android.view.View;
  9. import android.widget.ImageView;
  10. import android.widget.TextView;
  11. import androidx.annotation.Nullable;
  12. import androidx.appcompat.app.AppCompatActivity;
  13. /**
  14. * 作者:JArchie
  15. * 源码参考地址:https://github.com/JArchie/TiktokDemo
  16. */
  17. public class MainActivity extends AppCompatActivity {
  18. CusVideoView mVideoView;
  19. private int[] videos = {R.raw.v1, R.raw.v2, R.raw.qi};
  20. TextView mTitle;
  21. @Override
  22. protected void onCreate(@Nullable Bundle savedInstanceState) {
  23. super.onCreate(savedInstanceState);
  24. setContentView(R.layout.activity_main);
  25. mVideoView = findViewById(R.id.mVideoView);
  26. mTitle = findViewById(R.id.mTitle);
  27. String url = "android.resource://" + getPackageName() + "/" + videos[1];
  28. Log.e("TAG", "video_onCreate: " + url);
  29. mVideoView.setVideoURI(Uri.parse(url));
  30. mTitle.setText("@王燕\n一起来跳支舞吧");
  31. }
  32. @Override
  33. protected void onStart() {
  34. super.onStart();
  35. playVideo();
  36. }
  37. @Override
  38. protected void onDestroy() {
  39. super.onDestroy();
  40. releaseVideo();
  41. }
  42. //播放
  43. private void playVideo() {
  44. Log.e("TAG", "play_video");
  45. // View itemView = mRecycler.getChildAt(0);
  46. final CusVideoView mVideoView = findViewById(R.id.mVideoView);
  47. final ImageView mPlay = findViewById(R.id.mPlay);
  48. final ImageView mThumb = findViewById(R.id.mThumb);
  49. final MediaPlayer[] mMediaPlayer = new MediaPlayer[1];
  50. mVideoView.start();
  51. mVideoView.setOnInfoListener(new MediaPlayer.OnInfoListener() {
  52. @Override
  53. public boolean onInfo(MediaPlayer mp, int what, int extra) {
  54. mMediaPlayer[0] = mp;
  55. mp.setLooping(true);
  56. mThumb.animate().alpha(0).setDuration(200).start();
  57. return false;
  58. }
  59. });
  60. //暂停控制
  61. mPlay.setOnClickListener(new View.OnClickListener() {
  62. boolean isPlaying = true;
  63. @Override
  64. public void onClick(View v) {
  65. if (mVideoView.isPlaying()) {
  66. mPlay.animate().alpha(1f).start();
  67. mVideoView.pause();
  68. isPlaying = false;
  69. } else {
  70. mPlay.animate().alpha(0f).start();
  71. mVideoView.start();
  72. isPlaying = true;
  73. }
  74. }
  75. });
  76. }
  77. //释放
  78. private void releaseVideo() {
  79. Log.e("TAG", "releaseVideo_video");
  80. // View itemView = mRecycler.getChildAt(index);
  81. final CusVideoView mVideoView = findViewById(R.id.mVideoView);
  82. final ImageView mThumb = findViewById(R.id.mThumb);
  83. final ImageView mPlay = findViewById(R.id.mPlay);
  84. mVideoView.stopPlayback();
  85. mThumb.animate().alpha(1).start();
  86. mPlay.animate().alpha(0f).start();
  87. }
  88. }

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号