티스토리 뷰

프로그래밍/Android

[Android] MotionLayout 정리

추억꽃 2020. 3. 27. 11:22

MotionLayout 정리

MotionLayout

ConstraintSets

  • 레이아웃에 대한 모든 규칙을 캡슐화하여 뷰를 다시 만들지 않고도 레이아웃에 적용할 규칙 세트를 즉석에서 결정할 수 있음

  • MotionScene

    • res/xml 에 xml파일로 MotionScene가 보관됨

  • MotionScene 파일에는 애니메이션을 지정하는데 필요한 모든 것이 포함될 수 있다.

    • ConstraintSets
    • ConstraintSets 사이의 전환
    • 키 프레임 / 터치 처리 등

속성

  1. <MotionLayout> 속성

    • app:layoutDescription="@xml/scene" : MotionLayout Sence XML 파일 설정
    • app:applyMotionScene="boolean" : MotionScene 을 적용할지 여부 (기본값은 true)
    • app:showPaths="boolean" : 점선 Path를 보여줄지 여부 (릴리즈 / QA 시에는 false로 체크해야 함)
    • app:progress="float" : Transition Progress 설정 (범위 0~1)
    • app:currentState="reference" : 특정 ConstraintSet으로 설정
    • app:motionDebug : Debug 모드에서 모션 활성화 설정
      • NO_DEBUG / SHOW_ALL / SHOW_PATH / SHOW_PROGRESS

  2. <Transition> 속성

    • motion:constraintSetStart : 시작할 시점의 ConstraintSet / Layout XML 파일을 설정

    • motion:constraintSetEnd : 종료할 시점의 ConstraintSet / Layout XML 파일을 설정

    • motion:motionInterpolator : 전체 애니메이션의 보간 처리

      • linear / easeIn / easeOut / easeInOut / bounce

    • motion:duration : 애니메이션 진행시간 설정

      ( 핸들러에선 동작하지 않고, 핸들러에서 설정했을 경우에만 동작함)

    • jumpToStart : End 상태에 도달했을 때 Start 상태로 한번에 이동

    • jumpToEnd : Start 상태일 때 End 상태로 한번에 이동

    • animateToStart : End 상태에 도달했을 때 Start 상태로 애니메이션 실행

    • animateToEnd : Start 상태일 떄 End 상태로 애니메이션 실행

    2.1 <OnClick> 속성

    • motion:motionTarget : target 뷰 id 설정
    • motion:clickAction : 애니메이션의 실행 방향 설정
      • toogle / transitionToEnd / transitionToStart / jumpToEnd / jumpToStart

    2.2 <OnSwipe> 속성

    • motion:touchAnchorId : target 뷰 id 설정
    • motion:touchRegionId : 터치 범위를 제한할 뷰 id 설정
    • motion:touchAnchorSide : 움직일 뷰의 측면 설정
      • top / left / right / bottom
    • motion:dragDirection : 스와이프 할 방향 설정
      • dragUp / dragDown / dragLeft / dragRight
    • motion:dragScale : 스와이프 거리의 factor 설정
    • motion:moveWhenScrollAtTop : target 뷰가 Scroll이 가능한 뷰(ScrollView, RecyclerView 등) 일 때는 스크롤을 먼저 실행하고 스크롤이 최상단에 왔을 경우 움직이도록 한다.

    2.3 <KeyPosition> 속성

    • motion:motionTarget : 타겟 뷰 id 설정

    • motion:framePosition : 애니메이션의 시작/끝 사이의 지점을 설정 (0~100)

    • motion:percentX / motion:percentY : 좌표 상에서의 백분율 거리

      (KeyPostionType 타입에 따라 기준 적용)

    • motion:keyPositionType : x/y 값을 계산하는 방법을 지정

      • parentRelative : 타겟뷰의 부모뷰를 기준으로 위치 계산 (시작 0, 끝 1, 가운데는 0.5)
      • deltaRelative : 시작과 끝 상태의 x,y 좌표를 델타값을 기준으로 위치 계산
      • pathRelative : 시작과 끝의 path 길이를 기준으로 위치 계산

    • motion:percentWidth : 시작과 끝의 width 차이를 기준으로 한 백분율

    • motion:percentHeight : 시작과 끝의 height 차이를 기준으로 한 백분율

    • motion:sizePercent : 시작 사이즈의 기준이 되는 백분율

    2.4 <KeyCycle> 속성

    • motion:motionTarget : 타겟 뷰 id 설정
    • motion:framePosition : 애니메이션의 시작/끝 사이의 지점을 설정 (0~100)
    • motion:waveShape : 진동 웨이브 모양 설정
      • square / triangle / sawtooth / reverseSawtooth / cos / bounce
    • motion:wavePeriod : 웨이브 진동 횟수 설정
    • motion:waveOffset : 속성 Offset 설정
    • <CustomAttribute> : 리플렉션을 통한 타겟뷰의 커스텀 설정

    2.5 <KeyAttribute> 속성

    • motion:motionTarget : 타겟 뷰 id 설정
    • motion:framePosition : 애니메이션의 시작/끝 사이의 지점을 설정 (0~100)
    • motion:transitionEasing : 애니메이션 시작시의 곡선 설정
      • curve(1.0,0,0,1.0) / standard / accelerate / decelerate / linear
    • motion:transitionPathRotate : 타겟 뷰가 Path에 따라 회전되도록 설정
    • <CustomAttribute> : 리플렉션을 통한 타겟뷰의 커스텀 설정

  3. <Constraint> 속성

Step by Step (Example)

참고

'프로그래밍 > Android' 카테고리의 다른 글

[Android] ConstraintLayout 정리  (1) 2020.04.24
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함