경험의 기록

 

모션 레이아웃을 사용하면

앱에서 깔끔한 애니메이션을 쉽게 만들 수 있다.

 

 


레이아웃 세팅

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@drawable/cat"
        android:adjustViewBounds="true"/>

    <TextView
        android:id="@+id/titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="고양이"
        android:textSize="28sp"
        android:textStyle="bold"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        android:layout_marginTop="10dp"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleText"
        android:layout_margin="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/DesText"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="고양이(학명: Felis Catus, 영어: Cat)는 식육목 고양이과에 속하는 포유류다. 들고양이(영어: Wild Cat)는 약 10만 년에서 7만년 전부터 존재했다. 길들여진 고양이의 기원은 약 1만년 전 중동 지역에서 스스로 숲속을 나와 사람들이 모여사는 마을에 정착하여 길들여진 아프리카들고양이(학명: Felis Lybica)로 추측된다.[4]

고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에 이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는 창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀 지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다. 이 후 아라비아 상인들의 실크로드를 통해 유럽과 아시아 전역으로 퍼져나갔으며, 항해를 하는 데에도 도움이 되어 인간과 함께 항해를 동행하면서 전 세계로 퍼져나갔다. 중국의 십이지에는 포함되어 있지 않지만 타이와 베트남에서는 토끼 대신 고양이가 십이지 중 하나다.

스핑크스처럼 털이 거의 없거나 맹크스처럼 꼬리가 없는 품종도 있다. 품종은 장모종, 중모종, 단모종 등으로 나뉘며, 단모종의 대표종인 아비니시안 고양이와 장모종의 대표종인 페르시안 고양이가 있다.

애완견과는 달리 옛 습성이 살아 있으며, 발톱을 숨길 수 있어서 쥐, 새, 벌레 등을 사냥할 수 있다."
                android:textSize="16sp"
                android:padding="10dp"/>
        </LinearLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

사용할 레이아웃을 만들어준다.

위로 스와이프하면

이미지가 가려지고 스크롤뷰가 커지는 애니메이션을 만들어보려고 한다.

 

모션 레이아웃 변경

레이아웃 우클릭 -> Convert to MotionLayout 

 

모션 레이아웃으로 변경해준다.

 

변경시 xml 패키지에 새로운 xml이 추가된 것을 확인할 수 있는데

일단 다시 메인xml으로 돌아와서

 

end 에서 이미지의 높이를 1dp로 수정하여 이미지를 가려준다.

 

이제 위의 화살표를 클릭하고

KeyAttribute로 속성을 추가해준다.

 

alpha는 투명도를 의미하며

프레임을 정할수 있다.

100으로 설정해주었다.

 

이제 100개의 애니메이션으로 쪼개진 것을 확인할 수 있으며

알파값을 0~1 사이로 변경하여 투명도를 조절할 수 있다.

0으로 하면 축소되었을때의 투명도가 0이 된다.

 

투명도 말고도 다양한 속성들을 사용할 수 있다.

 

스와이프 핸들러를 이용하여 어떤 스와이프를 했을때

애니메이션이 발생할지 설정할 수 있다.

 

 

스와이프 시 잘 축소되는 것을 확인할 수 있다.

 

 

또한 아까 추가된 motionscene에서

 

애니메이션을 관리할 수 있다.

 

 

https://github.com/HanYeop/AndroidStudio-Practice2/tree/master/MotionLayoutEx

 

HanYeop/AndroidStudio-Practice2

(2021.05.20~) 안드로이드 학습 내용 저장소. Contribute to HanYeop/AndroidStudio-Practice2 development by creating an account on GitHub.

github.com

 

 

 

 

 

 

 

참고

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

https://www.youtube.com/watch?v=ROkKPgXpd1Y&list=PLSrm9z4zp4mHFX6JfhN46g8GR8Cyb7eSH&index

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading