版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zxd1435513775/article/details/81533053
参看：Android自定义视频播放器（一）：https://blog.csdn.net/zxd1435513775/article/details/81507909
一、引言
上一篇在对VideoView使用时，加上了这样一行代码：
videoView.setMediaController(new MediaController(this));
这行代码为VideoView加上了控制面板，可以操作视频播放的快慢和暂停，我们在Manifest文件中，把页面横屏展示，配置代码：
<activity android:name=".activity.VideoActivity"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
android:configChanges="orientation|screenSize|keyboardHidden"
android:screenOrientation="landscape"
>
效果如下如所示：
二、自定义面板
对于VideoView系统自带的控制面板，很简单但不是很好用，下面来为VideoView自定义控制面板，增强其控制面板的功能。
1、VideoActivity页面布局
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context=".activity.VideoActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<VideoView
android:id="@+id/mVideoView"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<include layout="@layout/media_controller"/>
</RelativeLayout>
我们让VideoView在布局中居中显示，然后在该布局中使用include标签导入自定义控制面板的样式，布局代码如下，这里贴出的只是页面的主体布局，对于各个selector也很简单，就不贴了：
<?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">
<LinearLayout
android:id="@+id/ll_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_player_status"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_weight="1"
android:text="视频名称"
android:textColor="#ffffff" />
<ImageView
android:id="@+id/iv_battery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="@drawable/ic_battery_10" />
<TextView
android:id="@+id/tv_system_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="12:00"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_player_top_control"
android:gravity="center_vertical"
android:orientation="horizontal">
<Button
android:id="@+id/btn_voice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/btn_voice_selector" />
<SeekBar
android:id="@+id/seekbar_voice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxHeight="6dp"
android:minHeight="6dp"
android:progressDrawable="@drawable/progress_horizontal"
android:thumb="@drawable/progress_thumb" />
<Button
android:id="@+id/btn_swich_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/btn_swich_player_selector" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_player_bottom_seekbar"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_current_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0:00"
android:textColor="#ffffff" />
<SeekBar
android:id="@+id/seekbar_video"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:maxHeight="6dp"
android:minHeight="6dp"
android:progressDrawable="@drawable/progress_horizontal"
android:thumb="@drawable/progress_thumb" />
<TextView
android:id="@+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:text="20:00"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_player_bottom_control"
android:gravity="center_vertical"
android:orientation="horizontal">
<Button
android:id="@+id/btn_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/btn_exit_selector" />
<Button
android:id="@+id/btn_video_pre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/btn_video_pre_selector" />
<Button
android:id="@+id/btn_video_start_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/btn_video_pause_selector" />
<Button
android:id="@+id/btn_video_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/btn_video_next_selector" />
<Button
android:id="@+id/btn_video_siwch_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/btn_video_siwch_screen_full_selector" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
三、自定义控制面板效果
1、布局需要注意
上述控制面板页面布局中，需要注意地方是，声音的SeekBar的三个背景颜色，这里是采用自定义，需要覆盖掉系统的自定义样式，对应的选择器代码如下：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/progress_background">
</item>
<item android:id="@android:id/secondaryProgress" android:drawable="@drawable/progress_secondaryprogress">
</item>
<item android:id="@android:id/progress" android:drawable="@drawable/progress_normal">
</item>
</layer-list>
在VideoActivity中可以看到如下效果：
四、在Activity中实例化布局元素
布局写完了，要在VideoActivity中，对这些元素进行初始化，然后再对这些元素绑定事件的监听器，就可以操作视频的播放了。这里对获取页面元素，我们采用第三方工具，省时省力。
https://www.buzzingandroid.com/tools/android-layout-finder/
打开这个网址后，把我们的xml布局文件复制到里面，就可以得到所有的带id的元素。
获取到的初始化代码如下：
private LinearLayout llTop;
private TextView tvName;
private ImageView ivBattery;
private TextView tvSystemTime;
private Button btnVoice;
private SeekBar seekbarVoice;
private Button btnSwichPlayer;
private LinearLayout llBottom;
private TextView tvCurrentTime;
private SeekBar seekbarVideo;
private TextView tvDuration;
private Button btnExit;
private Button btnVideoPre;
private Button btnVideoStartPause;
private Button btnVideoNext;
private Button btnVideoSiwchScreen;
/**
* Find the Views in the layout<br />
* <br />
* Auto-created on 2018-08-09 11:01:32 by Android Layout Finder
* (http://www.buzzingandroid.com/tools/android-layout-finder)
*/
private void findViews() {
llTop = (LinearLayout)findViewById( R.id.ll_top );
tvName = (TextView)findViewById( R.id.tv_name );
ivBattery = (ImageView)findViewById( R.id.iv_battery );
tvSystemTime = (TextView)findViewById( R.id.tv_system_time );
btnVoice = (Button)findViewById( R.id.btn_voice );
seekbarVoice = (SeekBar)findViewById( R.id.seekbar_voice );
btnSwichPlayer = (Button)findViewById( R.id.btn_swich_player );
llBottom = (LinearLayout)findViewById( R.id.ll_bottom );
tvCurrentTime = (TextView)findViewById( R.id.tv_current_time );
seekbarVideo = (SeekBar)findViewById( R.id.seekbar_video );
tvDuration = (TextView)findViewById( R.id.tv_duration );
btnExit = (Button)findViewById( R.id.btn_exit );
btnVideoPre = (Button)findViewById( R.id.btn_video_pre );
btnVideoStartPause = (Button)findViewById( R.id.btn_video_start_pause );
btnVideoNext = (Button)findViewById( R.id.btn_video_next );
btnVideoSiwchScreen = (Button)findViewById( R.id.btn_video_siwch_screen );
btnVoice.setOnClickListener( this );
btnSwichPlayer.setOnClickListener( this );
btnExit.setOnClickListener( this );
btnVideoPre.setOnClickListener( this );
btnVideoStartPause.setOnClickListener( this );
btnVideoNext.setOnClickListener( this );
btnVideoSiwchScreen.setOnClickListener( this );
}
/**
* Handle button click events<br />
* <br />
* Auto-created on 2018-08-09 11:01:32 by Android Layout Finder
* (http://www.buzzingandroid.com/tools/android-layout-finder)
*/
@Override
public void onClick(View v) {
if ( v == btnVoice ) {
// Handle clicks for btnVoice
} else if ( v == btnSwichPlayer ) {
// Handle clicks for btnSwichPlayer
} else if ( v == btnExit ) {
// Handle clicks for btnExit
} else if ( v == btnVideoPre ) {
// Handle clicks for btnVideoPre
} else if ( v == btnVideoStartPause ) {
// Handle clicks for btnVideoStartPause
} else if ( v == btnVideoNext ) {
// Handle clicks for btnVideoNext
} else if ( v == btnVideoSiwchScreen ) {
// Handle clicks for btnVideoSiwchScreen
}
}
对于各个元素绑定事件的具体操作，下面文章接着讲。