Режим «картинка в картинке» с MotionLayout - PullRequest
0 голосов
/ 04 мая 2020

Я пытался реализовать чувство Picture-In-Picture mode с помощью MotionLayout. Причина, по которой я выбираю MotionLayout для этой работы, заключается в том, что вам нужно начинать другое занятие, когда вы входите в режим PiP, и поскольку я не хотел, чтобы я попытал счастья с MotionLayout.

В учебных целях я создал очень простое приложение с 1 Activity хостингом 2 Fragments. 1-й Fragment просто показывает список изображений. При нажатии на одно из этих изображений вы перейдете ко 2-му Fragment, на котором показано изображение. Но я также хочу позволить пользователю минимизировать содержимое 2-го Fragment (например, режима Picture-In-Picture), чтобы пользователь мог просматривать список изображений на предыдущем Fragment во время просмотра текущего выбранного изображения.

Вот небольшой набросок, как это должно работать (надеюсь, вы поняли идею, посмотрев на изображение ниже): enter image description here

Теперь это то, что я попробовал программно:

Мой showing_image_layout.xml файл макета, используемый ShowingImageFragment, выглядит следующим образом:

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/motionLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/motionscene">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter" />

    </androidx.constraintlayout.motion.widget.MotionLayout>
</layout>

Ничего особенного. Он содержит только ImageView, окруженный MotionLayout виджетом. А теперь, это мой файл сцены движения, к которому относится предыдущий макет:

<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end">

        <OnSwipe
            app:touchAnchorId="@id/imageView"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/motionLayout"
            android:layout_height="match_parent"
            android:layout_width="match_parent"/>

        <Constraint
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/motionLayout"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>

        <Constraint
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="150dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />
    </ConstraintSet>

</MotionScene>

Что я здесь делаю: я уменьшаю высоту ImageView до 150dp и перемещаю ее в правый нижний угол после удара. И width и height всего файла макета, указанного идентификатором motionLayout, также изменяются с match_parent на wrap_content. Моя идея состояла в том, чтобы сделать размеры всего макета зависимыми от его дочерних элементов, поэтому, поскольку ImageView уменьшается, макет также должен быть минимизирован.

Но когда я запускаю приложение и применяю это, ImageView выходит в правом нижнем углу, как и ожидалось, НО я не вижу список изображений (предыдущий фрагмент). Предыдущий фрагмент со списком изображений не отображается? Почему ? Что я делаю не так?

ПРИМЕЧАНИЕ: Для навигационной части я использую Navigation Android Architecture Component. Как только изображение нажимается, выполняется следующий код ...

findNavController().navigate(ImageListFragmentDirections.actionImageListFragmentToShowingImageFragment())

... и мы переходим к ShowingImageFragment.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...