안드로이드 유튜브 스타일 모션레이아웃(3) - 모션레이아웃 적용하기[1]

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

이번에는 FragmentHome의 item을 클릭했을 때

왼쪽 사진 -> 오른쪽 사진 으로 변하는 MotionLayout을 구성해보겠습니다.

#1. ConstraintLayout을 MotionLayout으로 바꾸기

activity_main의 최상위 레이아웃인 ConstraintLayout을

MotionLayout으로 변경해주세요. 

MotionLayout은 부모 Layout이어야하고 

자식 뷰까지만 모션을 적용할 수 있습니다. 

예를 들어 

<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:ignore="contentDescription">

    <FrameLayout
        android:id="@+id/page_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:layout_constraintTop_toTopOf="parent">
        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

레이아웃이 이렇게 구성되어 있다고 하면, 

FragmentLayout에는 모션을 적용할 수 있지만, 

AppCompatTextView에는 적용할 수 없습니다.

#2. res/xml 디렉토리 생성하고, scene_main.xml 만들기

여기까지 따라오신 분들, 이 포스팅을 찾아오신 분들은

기본적으로 MotionLayout에 대해 알고 계시겠죠?

scene_main.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
 
    <Transition
        motion:constraintSetEnd="@id/expanded"
        motion:constraintSetStart="@id/baseState"
        motion:duration="250"
        motion:motionInterpolator="linear"/>
 
 
    <Transition
        motion:constraintSetEnd="@id/collapsed"
        motion:constraintSetStart="@id/expanded"
        motion:duration="250"
        motion:motionInterpolator="linear">
 
        <OnSwipe
            motion:dragDirection="dragDown"
            motion:onTouchUp="autoComplete"
            motion:touchAnchorId="@id/videoDetailLayout"
            motion:touchAnchorSide="bottom"
            motion:touchRegionId="@id/videoDetailLayout" />
 
        <KeyFrameSet>
 
            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/videoImage"
                motion:percentWidth="0"
                motion:percentX="0" />
 
            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/videoDetailLayout"
                motion:percentWidth="0" />
 
            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/recyclerview_container"
                motion:percentWidth="0" />
 
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="75"
                motion:motionTarget="@id/recommendListView" />
 
        </KeyFrameSet>
 
    </Transition>
 
    <Transition
        motion:constraintSetEnd="@id/baseState"
        motion:constraintSetStart="@id/collapsed"
        motion:duration="300"
        motion:motionInterpolator="easeInOut">
 
        <OnSwipe
            motion:dragDirection="dragDown"
            motion:onTouchUp="autoComplete"
            motion:touchAnchorId="@id/videoDetailLayout"
            motion:touchAnchorSide="bottom"
            motion:touchRegionId="@id/videoDetailLayout" />
 
    </Transition>
 
    <ConstraintSet android:id="@+id/baseState">
 
        <Constraint
            android:id="@id/detailVideoContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0"
            android:background="#000000" />
 
        <Constraint
            android:id="@id/page_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toTopOf="@id/bottom_ynav"
            motion:layout_constraintTop_toTopOf="parent" />
 
        <Constraint
            android:id="@id/videoDetailLayout"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:background="@android:color/white"
            motion:layout_constraintTop_toBottomOf="parent" />
 
        <Constraint
            android:id="@id/videoImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="2dp"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintDimensionRatio="W,2.5:1"
            motion:layout_constraintStart_toStartOf="@id/videoDetailLayout"
            motion:layout_constraintTop_toTopOf="@id/videoDetailLayout" />
 
 
        <Constraint
            android:id="@id/recyclerview_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout" />
 
        <Constraint
            android:id="@id/recommendListView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout" />
 
 
        <Constraint
            android:id="@id/bottom_ynav"/>
 
    </ConstraintSet>
 
    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@id/detailVideoContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="1"
            android:background="#000000" />
 
        <Constraint
            android:id="@id/videoDetailLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintDimensionRatio="16:9"
            motion:layout_constraintTop_toTopOf="parent" />
 
        <Constraint
            android:id="@id/videoImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintEnd_toEndOf="@id/videoDetailLayout"
            motion:layout_constraintStart_toStartOf="@id/videoDetailLayout"
            motion:layout_constraintTop_toTopOf="@id/videoDetailLayout" />
 
        <Constraint
            android:id="@id/bottom_ynav"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="?android:attr/windowBackground"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toBottomOf="parent" />
 
 
        <Constraint
            android:id="@id/recyclerview_container"
            android:layout_width="0dp"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout" />
 
        <Constraint
            android:id="@id/recommendListView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout">
            <PropertySet
                android:visibility="visible"
                motion:alpha="1" />
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
 
    </ConstraintSet>
 
    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@id/detailVideoContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0"
            android:background="#000000" />
 
        <Constraint
            android:id="@id/videoDetailLayout"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_marginBottom="4dp"
            android:background="@drawable/border_lgtgray"
            motion:layout_constraintBottom_toTopOf="@id/bottom_ynav">
            <PropertySet motion:alpha="1" />
        </Constraint>
 
        <Constraint
            android:id="@id/videoImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="2dp"
            android:scaleType="centerCrop"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintDimensionRatio="H,1:2.5"
            motion:layout_constraintStart_toStartOf="@id/videoDetailLayout"
            motion:layout_constraintTop_toTopOf="@id/videoDetailLayout">
 
        </Constraint>
 
        <Constraint
            android:id="@id/bottom_nav"
            android:layout_width="0dp"
            android:layout_height="42dp"
            android:background="?android:attr/windowBackground"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />
 
 
        <Constraint
            android:id="@id/recyclerview_container"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_marginBottom="4dp"
            android:alpha="1"
            motion:layout_constraintBottom_toTopOf="@id/bottom_ynav"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout" />
 
        <Constraint
            android:id="@id/recommendListView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="@id/videoDetailLayout"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/videoDetailLayout" />
 
    </ConstraintSet>
 
 
</MotionScene>

baseState는  아래 상태이고      expanded는 아래 상태입니다.

   

위 xml을 작성했다면 

이제 MotionLayout에 아래 속성 세 가지를 추가해주세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    app:showPaths="true"
    app:motionDebug="SHOW_ALL"
    app:layoutDescription="@xml/scene_main"
    tools:ignore="contentDescription">

이제 activity_main.xml은 scene_xml 영향을 받습니다.

여기서 더 작성하면 포스팅이 너무 길어져서

깃허브 소스 남깁니다.

https://github.com/Parksunggyun/MirrorYoutube

추가된 파일들로는 

anim/rotation_arrow.xml, rotation_arrow_reverse.xml

RecommendListAdapter.kt

VideoInfo.kt

Videos.kt

변경된 파일

FragmentHome.kt

MainActivity.kt

가 있습니다.

감사합니다.