Youtube 앱 개발하기

Side Project - Youtube
영상의 목록을 보여주고 영상을 플레이하는 유튜브의 간단한 기능을 구현한 프로젝트

 

• Github -> https://github.com/hwayeon351/Youtube

GitHub - hwayeon351/Youtube

---

학습 회고

오늘은 어제에 이어 MotionLayout을 이용해서 화면 전환 UI를 구성하였다.

---

오늘 공부한 내용

• MotionScene

MotionScene은 하나 이상의 Transition 요소가 포함되고 각 요소는 모션 시퀀스의 시작과 종료 상태, 두 상태간의 전환, 또는 모션의 중간 상태를 정의한다.

또한, 모션을 트리거하는 사용자와의 상호작용을 지정한다.

• Transition

Transition에는 실행할 모션 시퀀스를 지정한다.

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
   <KeyFrameSet>
   </KeyFrameSet>
    <OnSwipe
        motion:touchAnchorId="@+id/mainContainerLayout"
        motion:touchAnchorSide="bottom" />
</Transition>

1. motion:constraintSetEnd, motion:constraintSetStart - 모션 시퀀스의 최종 상태와 초기 상태에 관한 참조를 위한 속성이다. ConstraintSet의 ID(@+id/constraintSetId)이거나 레이아웃(@+layout/layoutState)을 지정할 수 있다.
2. motion:duration - 모션이 완료되는 데 걸리는 시간을 밀리초 단위로 지정한다.

 

 

• fragment_player에 Swipe Handler 추가하기

Swipe Handler를 추가하면 fragment_player_scene의 <Transition> 요소 내부에 <OnSwipe> 요소가 추가된다.

Transition 내부에 <OnSwipe>를 추가해서 모션 시퀀스가 사용자의 스와이프를 통해 트리거되도록 지정할 수 있다.

1. motion:touchAnchorId - 스와이프하고 드래그할 수 있는 뷰를 지정한다
2. motion:touchAnchorSide - start, end, top, bottom, left, right, middle 중 하나를 선택해서 touchAnchorId에서 지정한 뷰를 드래그하는 방향을 정할 수 있다.

 

• ConstraintSet

ConstraintSet을 통해 모션을 설명하는 다양한 제약조건을 정의한다.

모션의 엔드포인트마다 한 개씩 ConstraintSet을 정의해야 한다.

MotionLayout의 start와 end ConstraintSet을 정의해서 아래에 위치한 MotionLayout을 위/아래로 드래그해서 start에서 end로, end에서 start로 모션에 따라 MotionLayout 안의 View들의 속성을 변화시킬 것이다.

따라서, start에 관한 ConstraintSet과 end에 관한 ConstraintSet을 구성하였다.

 

1. start ConstraintSet

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/fragmentRecyclerView"
            android:layout_width="0dp"
            android:layout_height="0.1dp"
            android:layout_marginBottom="66dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/mainContainerLayout"
            motion:layout_constraintVertical_bias="1.0" />
        <Constraint
            android:id="@+id/mainContainerLayout"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_marginBottom="66dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="1.0" />
        <Constraint
            android:id="@+id/playerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toBottomOf="@id/mainContainerLayout"
            motion:layout_constraintDimensionRatio="H, 1:2.5"
            motion:layout_constraintStart_toStartOf="@id/mainContainerLayout"
            motion:layout_constraintTop_toTopOf="@id/mainContainerLayout" />
    </ConstraintSet>

start 상태일 때 MotionLayout

 

2. end ConstraintSet

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/playerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        motion:layout_constraintBottom_toBottomOf="@id/mainContainerLayout"
        motion:layout_constraintEnd_toEndOf="@id/mainContainerLayout"
        motion:layout_constraintStart_toStartOf="@id/mainContainerLayout"
        motion:layout_constraintTop_toTopOf="@id/mainContainerLayout" />
    <Constraint
        android:id="@+id/mainContainerLayout"
        android:layout_width="0dp"
        android:layout_height="250dp"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toTopOf="parent" />
    <Constraint
        android:id="@+id/fragmentRecyclerView"
        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/mainContainerLayout" />
</ConstraintSet>

end 상태일 때 MotionLayout

 

 

• MotionLayout 적용하기

• 홈 화면의 FrameLayout에 MotionLayout을 담는 프래그먼트 붙이기

홈 화면 하단에 지금까지 정의한 MotionLayout을 띄우기 위해  frameLayout에 MotionLayout을 띄우는 프래그먼트를 붙여준다.

class MainActivity : AppCompatActivity() {



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, PlayerFragment())
            .commit()
    }
}

 

 

 

 

https://developer.android.com/training/constraint-layout/motionlayout?hl=ko 

MotionLayout으로 모션 및 위젯 애니메이션 관리  |  Android 개발자  |  Android Developers