안드로이드에서 TextView에 슬라이드 다운 애니메이션 적용하는 방법

이 예제는 안드로이드에서 TextView가 화면 위쪽에서 아래로 내려오는 슬라이드 다운(Slide Down) 애니메이션을 구현하는 방법을 보여줍니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File ⇒ New Project 메뉴로 이동한 후, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력하여 프로젝트를 만듭니다.

2단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent">
    <TextView
        android:id = "@+id/text"
        android:textSize = "20dp"
        android:textAlignment = "center"
        android:layout_width = "match_parent"
        android:textColor = "#ff4500"
        android:layout_height = "wrap_content"
        android:singleLine = "true" />
</RelativeLayout>

위 코드에서 TextView는 화면 중앙에 배치되며, 애니메이션이 실행되면 지정된 위치로 아래로 내려오게 됩니다.

3단계: MainActivity 작성

src/MainActivity.java 파일에 아래 코드를 추가합니다.

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView view = findViewById(R.id.text);
        view.setText("How to show Slide down to show textview animation");
        Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_in_top);
        view.startAnimation(anim);
    }
}

위 코드에서는 slide_in_top 애니메이션을 사용하므로, res/anim 폴더 안에 slide_in_top.xml 파일을 생성해야 합니다. 해당 파일에 아래 코드를 추가합니다.

slide_in_top.xml 애니메이션 리소스

<?xml version = "1.0" encoding = "utf-8"?>
<set xmlns:android = "https://schemas.android.com/apk/res/android"
    android:fillAfter = "true"
    android:repeatCount = "100" >
    <translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromYDelta = "-100%"
        android:toYDelta = "0%" />
    <alpha
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromAlpha = "0.0"
        android:toAlpha = "1.0" />
</set>

이 XML 파일은 두 가지 효과를 동시에 적용합니다. <translate> 요소는 TextView를 Y축 기준 -100% 위치(화면 위쪽 바깥)에서 0% 위치까지 이동시키고, <alpha> 요소는 투명도를 0.0에서 1.0으로 변경하여 자연스럽게 나타나는 효과를 줍니다. fillAfter="true" 속성은 애니메이션 종료 후에도 최종 상태를 유지하도록 합니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터와 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 옵션 목록에서 모바일 기기를 선택하면, 연결된 기기의 화면에 아래와 같은 결과가 표시됩니다.

위 결과에서 확인할 수 있듯이, TextView가 화면 위쪽에서 아래로 부드럽게 슬라이드되며 나타납니다. 이처럼 AnimationUtils.loadAnimation() 메서드와 XML 애니메이션 리소스를 활용하면 별도의 라이브러리 없이도 간단하게 다양한 뷰 애니메이션을 구현할 수 있습니다.