** 我真的需要帮助,如果你什么都不知道,请不要给我负面评价:|如果有什么困扰你评论**
我想在 Exoplayer 中为我的播放器编写自定义 UI(更改暂停播放按钮或添加新按钮,例如播放器速度下一个等)。
我使用 github 上的 Exoplayer 示例,在将代码添加到我的原始项目之前,我想在官方示例上测试自定义 UI。
我在 Stackoverflow 和 tuts+ 中阅读了有关自定义 UI 的页面,但我真的很困惑!
为什么更改某些按钮图像或更改它们的位置一定如此困难:)我该如何处理这个问题?
EDIT
这是样本https://github.com/google/ExoPlayer/tree/master/demo https://github.com/google/ExoPlayer/tree/master/demo
我读了这两篇文章:
http://www.brightec.co.uk/ideas/custom-android-media-controller http://www.brightec.co.uk/ideas/custom-android-media-controller
http://code.tutsplus.com/tutorials/create-a-music-player-on-android-user-controls--mobile-22787 http://code.tutsplus.com/tutorials/create-a-music-player-on-android-user-controls--mobile-22787
根据这个link http://brightec.co.uk/ideas/custom-android-media-controller“您可以从 Android 中包含的 MediaController 类开始,而不是从头开始编写自己的媒体控制器”,我问这个问题是因为我无法在 exoplayer 库上执行此步骤,并且教程是为默认媒体播放器编写的
自定义 ExoPlayer 的 UI 非常简单。如果您查看 ExoPlayer 源代码,布局 res 目录包含该文件exo_player_control_view.xml
指向(包括)另一个布局 -exo_playback_control_view
.
- 复制布局资源的内容 -
exo_playback_control_view.xml
- 使用您选择的任何名称创建布局资源文件 - 例如:
custom_exo_playback_control_view.xml
。将复制的内容粘贴到新的xml中
- 根据需要对 UI 小部件进行任何更改。不要更改任何小部件/控件的 Id 属性。
- 将自定义 exoPlayer UI 资源指向包含以下内容的布局文件:
PlayerView
.
这里是custom_exo_controller_view
我根据原始文件创建了 xml。我想要为播放器控件使用不同的背景颜色以及不同的按钮和进度视图颜色:
<LinearLayout 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="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/attachment_document_desc_bg"
android:layoutDirection="ltr"
android:orientation="vertical"
android:paddingStart="20dp"
android:paddingEnd="20dp"
tools:targetApi="28">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingTop="4dp">
<ImageButton
android:id="@id/exo_prev"
style="@style/ExoMediaButton.Previous"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_rew"
style="@style/ExoMediaButton.Rewind"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_shuffle"
style="@style/ExoMediaButton.Shuffle"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_repeat_toggle"
style="@style/ExoMediaButton"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_play"
style="@style/ExoMediaButton.Play"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_pause"
style="@style/ExoMediaButton.Pause"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_ffwd"
style="@style/ExoMediaButton.FastForward"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_next"
style="@style/ExoMediaButton.Next"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
<ImageButton
android:id="@id/exo_vr"
style="@style/ExoMediaButton.VR"
android:tint="@color/colorPrimaryDark"
android:tintMode="src_in" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:textColor="#ff323232"
android:textSize="14sp"
android:textStyle="bold" />
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="@id/exo_progress"
android:layout_width="0dp"
android:layout_height="26dp"
android:layout_weight="1"
app:played_color="@color/colorPrimaryDark"
app:unplayed_color="@color/gray" />
<TextView
android:id="@id/exo_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:textColor="#ff323232"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
下面是我用于播放器的代码。注意,xml 属性app:controller_layout_id
指向上面定义的自定义控制器视图。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<com.google.android.exoplayer2.ui.PlayerView
android:id="@+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:auto_show="true"
app:controller_layout_id="@layout/custom_exo_controller_view"
app:fastforward_increment="10000"
app:repeat_toggle_modes="none"
app:resize_mode="fixed_width"
app:rewind_increment="10000"
app:surface_type="surface_view"
app:use_controller="true" />
</FrameLayout>
这应该会得到你想要的用户界面。
您可以根据需要在自定义控制器和代码中添加额外的控件,使用以下命令查找控件findViewById()
并编写事件监听器等。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)