ExoPlayer系列1自定义UI

app:resize_mode="fill"

则为效果图添补效果，如果修正为

app:resize_mode="fit"

则为自适应效果。

<com.google.android.exoplayer2.ui.StyledPlayerView android:id="@+id/style_player_view" android:layout_width="match_parent" android:layout_height="match_parent"- app:resize_mode="fill"+ app:resize_mode="fit" app:hide_on_touch="true" app:show_timeout="5000" />

左图为fill,右图为fit

在我们app的res目录定义一个布局文件，名称必须定义成exo_styled_player_control_view.xml,里面控件id的名称是固定的,必现是ExoPlayer定义好的，比如下面掌握播放和停息的按钮必id必须是`exo_play_pause

<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_pause" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:background="@color/design_default_color_error" style="@style/ExoMediaButton.Play"/></FrameLayout>

device-2021-12-29-200806

如果想更换StyledPlayerView中默认的播放掌握的UI,可以复写其布局文件，做法是把controller_layout_id更换成我们自己的布局文件custom_control_layout。

<com.google.android.exoplayer2.ui.StyledPlayerView android:id="@+id/style_player_view" android:layout_width="match_parent" android:layout_height="match_parent" app:resize_mode="fit" app:hide_on_touch="true" app:show_timeout="5000" + app:controller_layout_id="@layout/custom_control_layout" />

但是custom_control_layout.xml这个布局有一定的哀求，那便是控件id的名称是固定的,必现是ExoPlayer定义好的，比如下面掌握播放和停息的按钮必id必须是exo_play_pause.详细这些id是什么，可以查阅StyledPlayerControlView这个类。

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@id/exo_controls_background" android:layout_width="0dp" android:layout_height="0dp" android:background="@color/exo_black_opacity_60"/> <LinearLayout android:id="@id/exo_center_controls" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@android:color/transparent" android:gravity="center" android:padding="@dimen/exo_styled_controls_padding" android:clipToPadding="false"> <ImageView android:id="@id/exo_prev" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_custom_previous" android:layout_gravity="center" /> <ImageView android:id="@id/exo_play_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_custom_play_pasue"/> <ImageView android:id="@id/exo_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_custom_next" android:layout_gravity="center" /> </LinearLayout></merge>三种自定义的实现办法。

上面的三种自定义的实现办法，有助于我们自己写自定义View的时候借鉴，下面先容一下其详细的实现办法，方便我们借鉴。
这样，我们后面写的自定义View，功能可以更多，扩展性更好。

实在很好理解，自定义View的时候，预置了很多的属性，通过修正这些属性达到自定义Ui的浸染，下面的代码便是上面设置resizeMode的实现办法。

public StyledPlayerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); ... int resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT; if (attrs != null) { TypedArray a = context .getTheme() .obtainStyledAttributes( attrs, R.styleable.StyledPlayerView, defStyleAttr, / defStyleRes= / 0); try { ... resizeMode = a.getInt(R.styleable.StyledPlayerView_resize_mode, resizeMode); ... } finally { a.recycle(); } ... } }重写布局文件

上面的例子，在app moudule重写了exo_styled_player_control_view.xml布局文件，其实在StyledPlayerControlView 里有个同名的布局文件。
在运行时，app module的布局文件会覆盖exoplayer库里的同名布局文件。
但是这里要把稳，在布局文件中利用的控件id，必现是StyledPlayerView或者StyledPlayerControlView中定义好的。

public StyledPlayerControlView( Context context, @Nullable AttributeSet attrs, int defStyleAttr, @Nullable AttributeSet playbackAttrs) { super(context, attrs, defStyleAttr); int controllerLayoutId = R.layout.exo_styled_player_control_view; ...}自定义布局文件

public StyledPlayerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); ... int playerLayoutId = R.layout.exo_styled_player_view; if (attrs != null) { TypedArray a = context .getTheme() .obtainStyledAttributes( attrs, R.styleable.StyledPlayerView, defStyleAttr, / defStyleRes= / 0); try { ... playerLayoutId = a.getResourceId(R.styleable.StyledPlayerView_player_layout_id, playerLayoutId); } finally { a.recycle(); } }... LayoutInflater.from(context).inflate(playerLayoutId, this); ... }上面的代码阐明了，如果我们定义一个新的布局，然后可以更换StyledPlayerView中的默认布局。
StyledPlayerControlView也是类似的事理。
总结

本节紧张描述了如何利用ExoPlayer供应的UI控件来自定义播放界面，下一节将讲解一下Track selection。