봄날은 갔다. 이제 그 정신으로 공부하자

MotionLayout - xml 구성요소 본문

학습

MotionLayout - xml 구성요소

길재의 그 정신으로 공부하자 2020. 11. 25. 20:02

이전 글인 "MotionLayout - Overview"의 후속되는 글로 해당 글로 여기에서는 MotionLayout에서 사용 가능한

XML TAG와 속성에 대해 설명합니다.

이전 글은 여기서...

als2019.tistory.com/16

 

MotionLayout - overview

안드로이드 앱 개발 시 버튼 위치가 변경되거나 스크롤에 따라 Toolbar 영역이 변하는 등의 처리는 해당 기능을 지원하는 라이브러리를 사용하거나, Animation 효과를 이용해서 직접 구현해 개발해

als2019.tistory.com

 

MotionLayout에서 사용 가능한 XML TAG

motionLayout에서 사용 가능한 XML tag는 아래 표와 같습니다.

<MotionScene>

Motion Scene 파일의 root 요소 입니다.

<MotionScene>에는 하나 이상의 <Transition> 요소가 포함되며, 각 요소는 모션 시퀀스의 시작 및 종료 상태와 두 상태간의 전환을 정의합니다.

Syntax

구문은 아래와 같습니다.

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

Attributes

   - defaultDuration

     모든 전환의 기본 기간은 ms(밀리초)이며, 기본 기간은 자체 기간을 지정하지 않은 모든 모션 시퀀스에 사용됩니다.

     예를 들어 defaultDuration="300"으로 설정했을 때 자체 기간을 명시적으로 지정하지 않으면 모든 모션 시퀀스의

     길이는 기본적으로 300 ms로 설정됩니다.

Must contain

   - <Transition>

      실행할 모션 시퀀스를 지정합니다.

      <MotionScene>에 여러 개의 <Transition> 요소가 포함되어 있다면 MotionLayout은 사용자의 상호작용에 따라

     가장 적합한 요소를 선택합니다.

      예를 들어 <MotionScene>에는 서로 다른 방향의 사용자 스와이프에 관해 각각의 <onSwipe>가 있는 4개의

      <Transition> 하위 요소가 있을 수 있습니다.

      사용자가 화면을 스와이프할 때 MotionLayout은 사용자 방향의 스와이프에 적절한 <Transition>을 사용합니다.

Can contain

   - <ConstraintSet>

      하나 이상의 <Transition> 노드에 관한 시작 또는 종료 상태를 지정합니다. <Transition>은 제약 조건 세트를 가리키는

      대신 XML 레이아웃을 가리킬 수 있으므로 <MotionScene>은 <ConstraintSet> 하위 요소가 없을 수 있습니다.

<ConstraintSet>

Motion 시퀀스의 한 지점에서 모든 View의 위치와 속성값을 정의합니다.

일반적으로 <Transition> 요소는 2개의 <ConstraintSet> 요소를 가리키는데, 하나의 모션 시퀀스의 시작을 정의하고 다른 하나는 끝을 정의합니다.

Syntax

구문은 아래와 같습니다.

<ConstraintSet
    id="@id/name">
    [ deriveConstraintsFrom="id" ]
    ...
</ConstraintSet>

Attributes

   - deriveConstraintsFrom (optional)

      또 다른 ConstraintSet의 ID입니다. 이 속성을 지정하면 이 제약 조건 세트가 특별히 제약 조건을 재정의하지 않는한

      이세트의 이 세트의 모든 제쟉 조건이 이 ConstraintSet에 적용됩다.

   - android:id

      이 제약 조건 세트의 고유 식별자 입니다. <Transition>은 모션 시퀀스의 시작 및 끝 지점을 식별하기 위해 이 ID가

      필요합니다.

Must contain

하나 이상의 <Constraint> 요소를 포함해야 합니다.

Contained in

   - <MotionScene>

<Constraint>

Motion 시퀀스의 요소 중 하나의 위치와 속성을 정의합니다.

Syntax

구문은 아래와 같습니다.

<Constraint
    android:id="@id/view_id"
    attributes
/>

Attributes

<Constraint>요소는 표준 ConstraintLayout 속성 세트를 지원합니다.

Contained in

   - <ConstraintSet>

<Transition>

Motion 시퀀스의 시작 및 종료 상태, 원하는 중간 상태, 시퀀스를 트리거하는 사용자 상호작용을 정의합니다.

Syntax

구문은 아래와 같습니다.

<Transition
    motion:constraintSetStart="start"
    motion:constraintSetEnd="end"
    [ motion:duration="integer" ] >
    ...
</Transition>

Attributes

   - motion:constraintSetStart

     모션 시퀀스의 초기 상태로 <ConstraintSet>의 ID이거나 레이아웃일 수 있습니다.

     <ConstraintSet>을 지정하려면 이속성을 "@+id/constraintSetId"로 설정합니다. 

     레이아웃을 지정하려면 "@+layout/layoutState"로 설정합니다. 

   - motion:constraintSetEnd 

     모션 시퀀스의 종료 상태로 <ConstraintSet>의 ID이거나 레이아웃일 수 있습니다.

     <ConstraintSet>을 지정하려면 이속성을 "@+id/constraintSetId"로 설정합니다. 

     레이아웃을 지정하려면 "@+layout/layoutState"로 설정합니다. 

   - motion:duration

     모션 시퀀스의 지속 시간(단위: ms)입니다. 지정하지 않으면 <MotionScene> 요소의 defaultDuration이 사용됩니다.

Can contain

   - <onClick>

      모션 시퀀스가 사용자 터치로 트리거됨을 정의합니다.

   - <onSwipe>

      모션 시퀀스가 사용자 스와이프로 트리거됨을 정의합니다.

   - <keyFrameSet>

      모션 시퀀스의 요소에 관한 하나 이상의 중간 위치 또는 속성 설정을 정의합니다.

Contained in

   - <MotionScene>

<onClick>

사용자가 특정 View를 탭할 때 실행할 작업을 정의합니다. 단일 <Transition>에 여러 <onClick>가 있을 수 있으며 각 <onClick>은 다양한 타켓 뷰와 탭할 때 실행할 여러 작업을 정의합니다.

Syntax

구문은 아래와 같습니다.

<onClick
    motion:targetId="@id/target_view"
    motion:clickAction="action"/>

Attributes

   - motion:targetId

      모니터링 되고 있는 View입니다. 사용자가 이 View를 탭하면 전환이 발생합니다.

   - motion:clickAction

      View를 탭할 때 실행할 작업으로 지원되는 값은 다음과 같습니다.

      -> transitionToStart

           현재 레이아웃에서 <Transition> 요소의 motion:constraintSetStart 속성으로 지정된 레리아웃으로 애니메이션화

           합니다.

      -> transitionToEnd

           현재 레이아웃에서 <Transition> 요소의 motion:constraintSetEnd 속성으로 지정된 레리아웃으로 애니메이션화

           합니다.

      -> jumpToStart

           현재 레이아웃에서 <Transition> 요소의 motion:constraintSetStart 속성으로 지정된 레이아웃으로 이동합니다.

      -> jumpToEnd

           현재 레이아웃에서 <Transition> 요소의 motion:constraintSetEnd 속성으로 지정된 레이아웃으로 이동합니다.

      -> toggle

           레이아웃이 현재 시작 상태에 있다면 끝까지 애니메이션화하고 시작 상태에 있지 않다면 시작까지 애니메이션화

           합니다.

Contained in

   - <Trasition>

<onSwipe>

사용자가 특정 View를 스와이프할 때 실행할 작업을 정의합니다.

모션 시퀀스의 속도 및 타겟팅된 View의 모션은 스와이프의 속도 및 방향에 영향을 받으며, 선택적 매개변수로 설정된 제한을 적용받습니다. 단일 <Transition>에 여러 <onSwipe> 노드가 있을 수 있으며 각 <onSwipe>는 다양한 스와이프 방향을 지정하고 사용자가 스와이프 할 때 실행할 다양한 작업을 지정합니다.

Syntax

구문은 아래와 같습니다.

<onSwipemotion:touchAnchorId="@id/target_view"
 motion:touchAnchorSide="side"
 [ motion:dragDirection="direction" ]
 [ motion:dragScale="scale" ]
 [ motion:maxVelocity="maxVelocity" ]
 [ motion:maxAcceleration="maxAcceleration" ]
/>

Attributes

   - motion:touchAnchorId

      스와이프하여 이동중인 View의 ID 입니다.

   - motion:touchAnchorSide

      스와이프가 고정되는 타켓 View의 측면입니다. MotionLayout은 이 앵커와 사용자 손가락 사이에 일정한 거리를 유지

      하려고하며 허용되는 값은 4개("left", "right", "top", "bottom") 입니다.

   - motion:dragDirection

      사용자의 스와이프 모션 방향입니다. 이 속성이 설정되어 있으면 이 <onSwipe>는 지정된 방향의 스와이프에만 적용

      됩니다.

      허용되는 값은 4개("dragLeft", "dragRight", "dragTop", "dragBottom") 입니다.

   - motion:dragScale

      스와이프 길이를 기준으로 View가 이동하는 거리를 제어합니다. 기본값은 1이며, View가 스와이프만큼 이동해야 함을

      나타냅니다.

      dragScale이 1보다 작으면 View가 스와이프보다 덜 이동합니다.

      dragScale이 1보다 크면 View가 스와이프보다 더 많이 이동합니다.

   - motion:maxVelocity

      타겟 View의 최대 속도 입니다.

   - motion:maxAcceleration

      타겟 View의 최대 가속도 입니다.

Contained in

   - <Trasition>

<keyFrameSet>

Motion 시퀀스 중 View의 위치와 속성을 정의합니다.

기본적으로 모션은 초기 상태에서 종료 상태로 진행되지만 <keyFrameSet>을 사용하면 더 복잡한 모션을 빌드할 수 있습니다. <keyFrameSet>에는 <keyPosition> 또는 <keyAttribute>가 포함되어 있습니다. 이러한 각 노드는 모션의 특정 시점에 타겟 View의 위치 또는 속성을 지정합니다. MotionLayout은 시작 지점에서 각 중간 지점까지 그리고 이어서 최종 대상 지점까지 View를 부드럽게 애니메이션합니다.

 

예를 들어 모션 시퀀스의 초기 상태에는 View의 왼쪽 하단 모서리에 불투명한 공이 있으며 최종 상태에는 오른쪽 상단 모서리에 완전 투명한 공이 있다고 가정해보겠습니다.

기본적으로 MotionLayout에서 공은 대각선으로 부드럽게 이동하여 대상 지점에 도달해 사라질 때까지 점차 투명해집니다.

<keyFrameSet>을 사용하면 이러한 동작을 변경할 수 있습니다.

예를 들어 공이 완전히 불투명한 상태를 유지하면서 왼쪽 상단 모서리로 수직으로 이동한 후 페이드아웃하는 동안 오른쪽 상단 모서리로 수평으로 이동하도록 설정할 수 있습니다.

이렇게 하려면 <keyFrameSet>을 만들고 그안에 <keyPosition> 및 <keyAttribute>를 추가하면 됩니다.

<keyPosition>은 공의 중간 위치를 정의하고 <keyAttribute>는 공이 모션 중간에 불투명하게 유지되도록 정의합니다.

Syntax

구문은 아래와 같습니다.

<KeyFrameSet>
 [ <KeyPosition/>... ]
 [ <KeyAttribute/>...]
</KeyFrameSet>

Can contain

   - <keyPosition>

   - <keyAttribute>

Contained in

   - <Trasition>

<keyPosition>

Motion 시퀀스. 중 특정 시점의 View 위치를 정의합니다.

이 속성은 모션의 기본 경로를 조정하는데 사용합니다.

예를 들어 객체를 ㅅ외쪽 상단에서 시작하여 오른쪽 하단에서 종료하면 기본 모션 시퀀스는 화면의 대각선 직선 경로로 객체를 이동합니다. <keyPosition> 요소를 하나 이상 추가하여 경로를 변경할 수 있습니다.

Syntax

구문은 아래와 같습니다.

<KeyPosition
    motion:motionTarget="@id/targetPath"
    motion:framePosition="percentage"
    motion:keyPositionType="type"
    motion:percentX="xOffset"
    motion:percentY="yOffset"
/>

Attributes

   - motion:motionTarget

      모션이 이<keyPosition>으로 제어되는 View 입니다.

   - motion:framePosition

      모션 시퀀스에서 뷰가 이 <keyPosition>으로 지정된 지점에 도달하는 시점을 지정하는 1~99까지의 정수입니다.

      예를 들어 framePosition이 25인 경우, View는 모션의 1/4에서 지정된 지점에 도달합니다.

   - motion:percentX, motion:percentY

      View가 도달해야하는 위치를 지정합니다. keyPositionType 속성은 이러한 값이 해석되는 방식을 지정합니다.

   - motion:keyPositionType

      percentX & percentY 값이 해석되는 방식을 지정합니다. 가능한 설정은 다음과 같습니다.

      -> percentRelative

           percentX & percentY는 상위 View를 기준으로 지정됩니다.

           X는 0(왼쪽)에서 1(오른쪽)까지의 가로축입니다.

           Y는 0(위)에서 1(아래)까지의 세로축 입니다.

           예를 들어 타겟 View가 상위 View의 오른쪽 중간 지점에 도달하게 하려면 percentX를 1로 percentY를 0.5로

           설정해야 합니다.

      -> deltaRelative

           percentX와 percentY는 View가 전체 모션 시퀀스에서 이동하는 거리를 기준으로 지정됩니다.

           X는 가로축이고 Y는 세로축입니다. 두 경우 모두 0은 축에서 View의 시작 위치이고 1은 최종 위치 입니다.

           예를 들어 타겟 View가 위로 100dp, 오른쪽으로 100dp 이동하지만 개발자는 View가 모션의 1/4에서 40dp 아래로

           이동하여 시작한 다음 호가 다시 위로 올라가기를 바란다고 가정해보겠습니다.

           이 작업을 실행하려면 framePosition을 25, frmaePositionType을 deltaRelative로 percentY를 -0.4로 설정

           합니다.

      -> pathRelative

           X축은 타겟 View가 경로를 따라 이동하는 방향이며 0이 시작 위치이고 1이 최종 위치 입니다.

           Y축은 X축과 수직이며 양수 값은 경로 왼쪽, 음수값은 오른쪽에 있습니다. 0이 아닌 percentY를 설정하면 View가

           한 방향 또는 다른 방향으로 호를 그립니다. 따라서 View의 초기 위치는 (0, 0)이고 최종 위치는 (1, 0)입니다.

           예를 들어 개발자가 View가 모션 시퀀스의 절반을 사용하여 전체 거리의 10%를 포함한 다음 속도를 높여 나머지

           90%를 포함하길 바란다고 가정해보겠습니다. 이렇게 하려면 framePosision을 50으로, framePositionType을

           pathRelative로 percentX를 0.1로 설정합니다.

Contained in

   - <keyFrameSet>

<keyAttribute>

Motion 시퀀스 중 특정 시점의 View 속성을 정의합니다.

<keyAttribute>를 사용하여 View의 표준 속성을 설정할 수 있습니다.

예를 들어 View의 불투명도(android:alpha)가 초기 <ConstraintSet>에서 0으로, 최종 <ConstraintSet>에서 1로 설정되었다고 가정해보겠습니다. 그러면 기본적으로 View가 전체 모션 시퀀스 과정에서 선형으로 "fade in"됩니다. 이렇게 하는 대신 View가 모션 시퀀스 과정의 80%까지 보이지 않은 상태로 유지된 이후 빠르게 페이드 인 되도록 하려면 motion:framePosition을 80으로 설정하고 android:alpha를 0으로 설정한 단일 <keyAttribute> 노드를 추가하면 됩니다.

Syntax

구문은 아래와 같습니다.

<KeyAttribute
    motion:motionTarget="@id/targetPath"
    motion:framePosition="percentage"
    [ attribute = value ]
/>

Attributes

   - motion:motionTarget

      속성이 이<keyAttribute>에 의헤 제어되는 View입니다.

   - motion:framePosition

      모션 시퀀스에서 View가 이 <keyAttribute>에 의해 지정된 속성을 보유하는 시기를 지정하는 1~99 사이의 정수

      입니다.

      예를 들어 framePosition이 25이면 뷰는 모션 진행 과정의 1/4까지의 지정된 속성을 보유합니다.

      아래와 같은 View 속성을 설정할 수 있습니다.

      -> android:visibility

      -> android:alpha

      -> android:elevation

      -> android:rotation

      -> android:rotationX

      -> android:rotationY

      -> transitionPathRotate

      -> android:scaleX

      -> android:scaleY

      -> android:translationX

      -> android:translationY

      -> android:translationZ

Contained in

   - <keyFrameSet>

 

'학습' 카테고리의 다른 글

Google Play 결제 시스템 - 개요  (0) 2020.12.14
MotionLayout - entrance scene sample 분석  (0) 2020.11.25
MotionLayout - overview  (0) 2020.11.25
UI Test 적용하기  (0) 2020.11.25
우선 UNIT Test부터 적용하기  (0) 2020.11.25
'학습' Related Articles more
Comments