首页 > 代码库 > 手机影音第六天 自定义播放器页面的实现(按钮暂时未监听)
手机影音第六天 自定义播放器页面的实现(按钮暂时未监听)
目前进度的项目源代码托管在里码云上,地址如下:
https://git.oschina.net/joy_yuan/MobilePlayer
感兴趣的可以去下载看看,多多支持
这次就摒弃了系统自带的控制栏,即之前写的通过系统自带的控制栏
videoview.setMediaController(new MediaController(this));
转而自己写控制器布局,实际截图如下:
效果图:
一、Activity的声明周期重温与横竖屏切换时的问题
有2个页面,A页面,B页面,下面括号里的A,B代表是哪个页面的声明周期方法,不是参数
1、 当从A页面,切换到B页面时,B页面全覆盖A页面
1.1、那么2个Activity的声明周期变化,如下:
onCreate (A) --->onStart (A) ----->onResume(A)------>onPaused(A)------>onCreate(B)---
-->onStart(B)---->onResume(B)----onStop(A)
1.2、按回退键从B回到A时,变化如下
onPause(B)---->onRestart(A)--->onStart(A)---->onResume(A)--->onStop(B)--
-->onDestroy(B)
2、当从A切换到B时,B页面类似弹框,没有覆盖全A,那么声明周期变化如下
2.1、onCreate(A)--->onStart(A)---->onResume(A)----->onPaused(A)---->onCreate(B)---->onStart(B)---->onResume(B) 因为A没有被全部覆盖,所以A没有停
2.2按回退键,退回到A时
onPaused(B)---->onResume(A)---->onStop(B)---->onDestroy(B)
---------------------------------------------------------------------------------------------------
对于之前写的代码,如果进入到了主页面,即显示视频列表的页面后,有一个小Bug,即切换横竖屏,会导致程序崩溃,原因在与切换横竖屏后,,系统会自动的重新去create 一个MainActivity,这时候就有2个MainActivity,导致崩溃。解决办法是在AndroidManifext.xml里注册activity时,设置忽略几个屏幕变化的监听,代码如下:
即多了 android:configChanges="keybordHidden|screenSize|orientation"
<activity android:name=".activity.SplashActivity" android:configChanges="keyboardHidden|screenSize|orientation" > <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity>
同时对于之前的播放器,如果在播放视频时,切换横竖屏时,会导致视频从新播放,解决办法同样是在播放器的这个activity里加入上面的配置。完整的AndroidManifext.xml如下:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.yuanlp.mobileplayer"> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".activity.SplashActivity" android:configChanges="keyboardHidden|screenSize|orientation" > <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <activity android:name=".activity.MainActivity" android:launchMode="singleTask"> </activity> <activity android:name=".activity.SystemVideoPlayer" android:configChanges="keyboardHidden|screenSize|orientation" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" ></activity> </application> </manifest>
二、分析布局
实际效果没有横屏最上方的系统自己的状态栏,只是利用手机截图时把状态栏拉下来了
1、整体布局是一个RelativeLayout,这样就可以用top和bottom来控制声音控制栏和进度控制栏的布局
2、子布局使用LinearLayout的好处之一是,可以使用weight权重这个属性,这样就可以方便的实现根据权重来平均分割宽度,如最下方的那几个暂停、上一个,下一个等5个按钮,就是设置button的weight为1.
3、声音控制栏上面其实还有一栏,只是被覆盖了,是一个Linearlayout,和声音控制栏一样,其中声音的进度条SeekBar的权重是1,其余的声音图标和右边的i图标就会自动被挤开。
4、下方的播放进度条和5个按钮,放在一个LinearLayout中,这个布局根据RelativeLayout放在底部,并且是一个vertical布局,其中有2个LinearLayou子布局,2个子布局都是水平布局。
三、布局代码
1、system_video_player.xml
与昨天相比,就include一个自定义的布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:gravity="center" android:background="#000000" android:layout_width="match_parent" android:layout_height="match_parent"> <VideoView android:layout_centerInParent="true" android:id="@+id/videoview" android:layout_width="match_parent" android:layout_height="match_parent"/> <include layout="@layout/media_controller"/> </RelativeLayout>
2、media_controller.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"> <LinearLayout android:id="@+id/ll_top" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:gravity="center_vertical" android:background="@drawable/bg_player_status" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_weight="1" android:id="@+id/tv_name" android:layout_marginLeft="8dp" android:text="视频的名称" android:textColor="#ffffff" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="@+id/iv_battery" android:layout_marginRight="8dp" android:src="http://www.mamicode.com/@drawable/ic_battery_0" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/tv_system_time" android:layout_marginRight="8dp" android:textColor="#ffffff" android:text="12:00" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:gravity="center_vertical" android:background="@drawable/bg_player_top_control" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:id="@+id/btn_voice" android:background="@drawable/btn_voice_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <SeekBar android:id="@+id/seekbar_voice" android:progress="20" android:progressDrawable="@drawable/progress_horizontal" android:thumb="@drawable/progress_thumb" android:minHeight="6dp" android:maxHeight="6dp" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:id="@+id/switch_player" android:background="@drawable/btn_switch_player_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> <LinearLayout android:layout_alignParentBottom="true" android:id="@+id/ll_bottom" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:background="@drawable/bg_player_bottom_seekbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="0:00" android:textColor="#ffffff" android:id="@+id/tv_current_time" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <SeekBar android:id="@+id/seekbar_video" android:progress="20" android:progressDrawable="@drawable/progress_horizontal" android:thumb="@drawable/progress_thumb" android:minHeight="6dp" android:maxHeight="6dp" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text="20:00" android:textColor="#ffffff" android:id="@+id/tv_duration" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:gravity="center_vertical" android:background="@drawable/bg_player_bottom_control" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_weight="1" android:id="@+id/bt_exit" android:background="@drawable/bt_exit_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_weight="1" android:id="@+id/bt_video_pre" android:background="@drawable/bt_video_pre_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_weight="1" android:id="@+id/bt_video_start_pause" android:background="@drawable/bt_video_pause_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_weight="1" android:id="@+id/bt_next" android:background="@drawable/bt_next_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_weight="1" android:id="@+id/bt_video_switch_screen" android:background="@drawable/bt_video_switch_screen_full_selector" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> </RelativeLayout>
本文出自 “YuanGuShi” 博客,请务必保留此出处http://cm0425.blog.51cto.com/10819451/1948393
手机影音第六天 自定义播放器页面的实现(按钮暂时未监听)