Exoplayer UI разделить экран и добавить двойное нажатие, чтобы перейти вперед / назад круговой эффект

Question

Мне нужно воспроизвести следующий круговой эффект на exoplayer.

Я добавил два представления, exo_rew и exo_ffwd.

, которые автоматически возвращаютсяили вперед по стандартной настройке.

Это код, который я написал до сих пор:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/exo_rew"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1"
        android:gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:background="#00000000"
        android:foreground="?attr/selectableItemBackground"
        tools:ignore="Orientation" />

    <LinearLayout
        android:id="@+id/exo_ffwd"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1"
        android:layout_alignParentLeft="false"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:background="#00000000"
        android:foreground="?attr/selectableItemBackground"
        tools:ignore="Orientation" />

    <LinearLayout
        android:id="@+id/play_pause_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#15ffffff"
        android:gravity="center"
        >

        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"
            />

        <ImageButton
            android:id="@id/exo_pause"
            style="@style/ExoMediaButton.Pause"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignWithParentIfMissing="false"
        android:layout_centerHorizontal="false"
        android:layout_centerVertical="false"
        android:gravity="center_vertical"
        >

        <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:text="00:00"
            android:textColor="#FFBEBEBE"
            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="#4589f2"
            />

        <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:text="2:00:00"
            android:textColor="#FFBEBEBE"
            android:textSize="14sp"
            android:textStyle="bold"
            />

    </LinearLayout>

</RelativeLayout>

Есть две проблемы, которые я не смог решить:

1)То, что каждый вид занимает половину экрана, exo_rew слева и exo_ffwd справа.

Я не смог найти способ указать в xml layout_width, равный match_parent / 2.Есть ли способ?

Я попытался с помощью WeightSum на 1, но, похоже, он не работает.

2) Создайте эффект кругового изображения, как на изображении.

Сомнения лучше использовать холст, создающий круг, или эффект «раскрытия круга».

Может кто-нибудь помочь мне?

Answer 1

Если вы хотите добавить такое же поведение двойного касания, как YouTube, вы можете использовать мою библиотеку, чтобы добиться этого.Мой основной подход заключается в переопределении onTouchEvent объекта PlayerView для обнаружения DoubleTapGesture (SimpleGestureDetector) и создания наложения поверх него.

Я уже написал ответ здесь .Для его реализации используйте следующее:

0) Требования:

• Минимальный SDK: 21 (может быть ниже, но я еще не тестировал более старые версии)
• Библиотека ExoPlayer2 (по крайней мере, 2.10.4), так как замененное представление написано выше PlayerView ExoPlayer

1) Включите его в ваш gradle (он размещенна jitpack.io, чтобы вы добавили его в свои репозитории):

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.vkay94:DoubleTapPlayerView:0.5.1'
}

2) Добавьте представления внутри вашего XML:

<FrameLayout
    ... >

    <!-- Replace ExoPlayer's PlayerView -->
    <com.github.vkay94.dtpv.DoubleTapPlayerView
        android:id="@+id/doubletapplayerview"
        app:player_layout_id="@layout/exo_simple_player_view"
        app:use_controller="true"
        ...
    />

    <!-- Other views e.g. ProgressBar etc  -->

    <!-- Add the overlay on top of PlayerView -->
    <com.github.vkay94.dtpv.YouTubeDoubleTap
        android:background="@color/dtp_overlay_dim"
        android:id="@+id/youTubeDoubleTap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

3) Настройте его в своей деятельности:

// Link the PlayerView to the overlay to pass increment to the Player (seekTo)
// Important: set the (Simple)ExoPlayer to the PlayerView before this call
youTubeDoubleTap
    .setPlayer(doubletapplayerview)
    .setForwardRewindIncrementMs(5000)

// Set YouTube overlay to the PlayerView and double tapping enabled (false by default)
doubletapplayerview
    .activateDoubleTap(true)
    .setDoubleTapDelay(500)
    .setDoubleTapListener(youTubeDoubleTap)
  //.setDoubleTapListener(this) => handle event directly within´the activity

Ссылка на библиотеку на Github

Answer 2

Лучшим способом было бы использовать ConstraintLayout и добавить эти изображения с начальным, конечным, нижним и верхним ограничением и дать им ширину 0dp, таким образом, они будут просто занимать ширину в соответствии с их ограничением.ConstraintLayout очень мощный, он также уменьшит вашу иерархию представлений.И это поможет вашей цели.