Exo 使用自定义UI

作者: zcwfeng | 来源:发表于2021-08-06 11:13 被阅读0次

这部分看了网上一些文章,说的都很含糊,而且都是抄袭的。

总结下最近使用的感受和经验。

UI components

官网demo说的已经很详细,但是很多细节google都没处理,很多也没处理好。如果不是为了字幕的加载,和需求特殊,我可能不会选择exo单独使用。

gradle 依赖

implementation 'com.google.android.exoplayer:exoplayer-ui:2.X.X'

重要的组件,StyledPlayerControlView, StyledPlayerView, PlayerControlView and PlayerView.

样式化的变体提供了很全,但是更难定制。

StyledPlayerControlView and PlayerControlView

是用于控制回放的视图。它们显示标准播放控件,包括播放/暂停按钮、快进和快退按钮以及搜索栏。

PlayerControlView and PlayerView.

它们在播放过程中显示视频、字幕和专辑艺术,以及分别使用StyledPlayerControl视图或PlayerControl视图的播放控件。

Player views

根据官网介绍

<com.google.android.exoplayer2.ui.StyledPlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:show_buffering="when_playing"
    app:show_shuffle_button="true"/>

xml 里面这么生命使用基本demo就可以。但是如果自定义定制修改,需要重写StyledPlayerView,或者PlayerView .挺让人头大,可能不是架构功能,所以Google写的很死

Player control views

官网xml

<com.google.android.exoplayer2.ui.StyledPlayerControlView
    android:id="@+id/player_control_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

很明显。Sample例子:StyledPlayerView 和 StyledPlayerControlView 是配套使用。PlayerView 和 PlayerControlView 配套

Customization

自定义,最让人心烦,也是很苦恼的问题,功能很全但是改UI就很苦恼。我主要看重他的字幕功能。

如果想定制drawable和layout还是有很多坑的。(就像接入融云等一些聊天的UI)

官网修改UI简单做法

在自己项目中写一个一样名字的xml, exo_player_control_view.xml

如:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <ImageButton android:id="@id/exo_play"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_gravity="center"
      android:background="#CC000000"
      style="@style/ExoMediaButton.Play"/>

  <ImageButton android:id="@id/exo_pause"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_gravity="center"
      android:background="#CC000000"
      style="@style/ExoMediaButton.Pause"/>

</FrameLayout>

或者

覆盖布局文件是在整个应用程序中更改布局的最佳解决方案,但如果只在单个位置需要自定义布局,该怎么办?要实现这一点,首先定义一个布局文件,就像覆盖一个默认布局一样,但这次给它一个不同的文件名,例如custom_controls.xml。其次,使用一个属性指示在膨胀视图时应使用此布局。例如,在使用PlayerView时,可以使用controller_layout_id属性指定用于提供播放控件的布局

<com.google.android.exoplayer2.ui.PlayerView android:id="@+id/player_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:controller_layout_id="@layout/custom_controls"/>

这样也只能修改简单的按钮,和他预定义定死的按钮。

吐槽

  1. Google定死了id,你必须按照他的来,否则就像我一样全部重写,或者部分重写
    定制需要吧values.xml, 拿出来放到自己的项目。styles.xml 也是覆写

  2. PlayerView相关就把代码粘贴出来改。

  3. 关于控制,你必须通读UI相关源代码。而且全屏和旋转都需要自己控制。

  4. 设计师,必须有播放器和技术相关经验,不然程序累死找bug定制UI

  5. 不建议用,特殊情况可以,根据需求定制吧。

  6. 解耦太难。

相关文章

  • Exo 使用自定义UI

    这部分看了网上一些文章,说的都很含糊,而且都是抄袭的。 总结下最近使用的感受和经验。 UI components ...

  • Android开源库

    UI 之自定义 Behavior 实现 AppBarLayout 越界弹性效果 使用自定义 Behavior 实现...

  • MVP

    UI 之自定义 Behavior 实现 AppBarLayout 越界弹性效果 使用自定义 Behavior 实现...

  • 讯飞语音听写

    讯飞语音听写两种实现方式 自定义UI 使用自带UI 自定义UI实现步骤 在讯飞开放平台下载SDK 将开发工具包中l...

  • SYAlertView弹窗视图

    SYAlertView自定义弹窗子视图UI根据UI设计需求,自定义各种样式的弹窗子视图: 自定义UI及样式 自定义...

  • 基于element-plus button 源码分析造轮子

    前言 实现组件 button 新增功能和自定义UI换肤,使用 SCSS 变量和 CSS 自定义属性,参考 elem...

  • vue学习笔记(二):属性、事件、插槽

    UI框架使用:ant-design-vue 一、属性:自定义属性props 原生属性attr ...

  • 【译】About Drawing and Printing in

    优势和限制 自定义UI提供能更大的绘制灵活性 自定义UI是计算密集型操作,不能充分利用GPU,所以尽可能少的使用本...

  • iOS笔试题集锦

    转载原文链接 面试能力要求:精通iphone的UI开发,能熟练操作复杂表视图,熟练使用图层技术, 可以自定义UI控...

  • VUE使用element-ui的upload组件自定义文件列表

    原文 :VUE使用element-ui的upload组件自定义文件列表[https://blog.csdn.net...

网友评论

    本文标题:Exo 使用自定义UI

    本文链接:https://www.haomeiwen.com/subject/ndybvltx.html