如何使用自定义 UI 初始 android Exoplayer 播放和暂停按钮？

Question

我正在使用 Exoplayer 2.17.1 并想自定义 UI。一切正常，但无法初始化播放和暂停按钮，正如您在照片中看到的那样，并同时显示这两个按钮，但它不起作用。

在fragment_home.xml中：

  <com.google.android.exoplayer2.ui.StyledPlayerView
                android:id="@+id/styledPlayerView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:layout_margin="0dp"
                android:contentDescription=""
                android:padding="0dp"
                android:scaleType="fitCenter"
                app:use_controller="true"
                app:player_layout_id="@layout/exo_player_view"
                app:controller_layout_id="@layout/custom_exo_layout"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="PrivateResource" />

Custome_Exo_Layout:

<?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"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#80000000">

<ImageView
    android:id="@+id/exo_lock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:layout_alignParentRight="true"
    android:theme="@style/clickableview"
    app:srcCompat="@drawable/ic_baseline_lock_open"/>

<LinearLayout
    android:id="@+id/sec_controlvid1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <ImageView
        android:id="@id/exo_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/clickableview"
        app:srcCompat="@drawable/exo_icon_play" />

    <ImageView
        android:id="@id/exo_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/clickableview"
        app:srcCompat="@drawable/exo_icon_pause" />

</LinearLayout>

<LinearLayout
    android:id="@+id/sec_controlvid2"
    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:gravity="center"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:id="@+id/exo_position"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="4dp"
            android:layout_marginRight="4dp"
            android:text="/"
            android:textColor="#CBCDC8" />

        <TextView
            android:id="@+id/exo_duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="#CBCDC8" />

        <ImageView
            android:id="@+id/exo_bt_fullScreen"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:theme="@style/clickableview"
            app:srcCompat="@drawable/ic_baseline_fullscreen" />
    </LinearLayout>

    <com.google.android.exoplayer2.ui.DefaultTimeBar
        android:id="@+id/exo_progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="-8dp"
        app:buffered_color="#95989F"
        app:played_color="#FF0000"
        app:scrubber_color="#FF0000"
        app:unplayed_color="#45424E">
     </com.google.android.exoplayer2.ui.DefaultTimeBar>
   </LinearLayout>
</RelativeLayout>

Java:

@Override
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, 
     Bundle savedInstanceState) {
    binding = FragmentHomeBinding.inflate(inflater, container, false);
    root = binding.getRoot();

  StyledPlayerView  styledPlayerView = binding.styledPlayerView;
  ExoPlayer  exoPlayer = new ExoPlayer.Builder(context)
            .build();

    styledPlayerView.setPlayer(exoPlayer);
    styledPlayerView.setKeepScreenOn(true);

    exoPlayer.addListener(new Player.Listener() {
        @Override
        public void onPlaybackStateChanged(int playbackState) {
            Player.Listener.super.onPlaybackStateChanged(playbackState);
          if (playbackState == Player.STATE_BUFFERING)
                progressBarVideoHomeLoader.setVisibility(View.VISIBLE);
            else if (playbackState == Player.STATE_READY)
                progressBarVideoHomeLoader.setVisibility(View.INVISIBLE);
        }
    });

    exoPlayer.addMediaItem(MediaItem.fromUri(Uri.parse(videoURL)));
    exoPlayer.prepare();
    exoPlayer.play();
  return root;

}

clickableview.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="clickableview">
     <item name="colorControlHighlight">@android:color/darker_gray</item>
     <item name="android:background">?selectableItemBackgroundBorderless</item>
  </style>
</resources>

Answer 1

您只需将 android:visibility="gone" 添加到您的 exo_pause。如下更改您的代码

<LinearLayout
    android:id="@+id/sec_controlvid1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/exo_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/exo_ic_play_circle_filled"
        app:tint="@color/white"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/exo_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/exo_ic_pause_circle_filled"
        android:visibility="gone"
        app:tint="@color/white"
        tools:ignore="ContentDescription"/>

</LinearLayout>

或添加以下代码或根据您的要求进行更改。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/sec_controlvid1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
        android:id="@+id/exo_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:src="@drawable/exo_ic_play_circle_filled"
        app:layout_constraintBottom_toBottomOf="@+id/exo_pause"
        app:layout_constraintEnd_toEndOf="@+id/exo_pause"
        app:layout_constraintStart_toStartOf="@+id/exo_pause"
        app:layout_constraintTop_toTopOf="@+id/exo_pause"
        app:tint="@color/white"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/exo_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/exo_ic_pause_circle_filled"
        android:visibility="gone"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/white"
        tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>

我知道您已经知道不必更改任何 Exoplayer's id。如果问题还没有解决，请告诉我

Answer 2

StyledPlayerView中没有播放和暂停两个按钮，您应该更改以下代码：

<ImageView
    android:id="@id/exo_play"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/clickableview"
    app:srcCompat="@drawable/exo_icon_play" />

<ImageView
    android:id="@id/exo_pause"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/clickableview"
    app:srcCompat="@drawable/exo_icon_pause" />

收件人：

   <ImageView
        android:id="@+id/exo_play_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/clickableview"
        style="@style/ExoStyledControls.Button.Center.PlayPause"/>

如何使用自定义 UI 初始 android Exoplayer 播放和暂停按钮？

How to Initial android Exoplayer play and pause buttons with custom UI?

android-studio

exoplayer2.x