이 튜토리얼에서는 한 TextView의 텍스트가 사라지면서 다른 텍스트가 나타나는 애니메이션을 Android 앱에서 구현하는 방법을 단계별로 알아보겠습니다.
1단계 — 새 프로젝트 생성
Android Studio에서 새 프로젝트를 생성합니다. 메뉴에서 File → New Project로 이동한 후, 프로젝트 생성에 필요한 모든 세부 정보(프로젝트 이름, 패키지 이름, 저장 위치 등)를 입력하고 완료합니다.
2단계 — 레이아웃 파일 작성 (activity_main.xml)
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"> <LinearLayout android:layout_width = "wrap_content" android:layout_height = "wrap_content"> <LinearLayout android:id = "@+id/parent" android:layout_width = "wrap_content" android:layout_height = "wrap_content"> <TextView android:id = "@+id/text" android:textSize = "30dp" android:textAlignment = "center" android:layout_width = "match_parent" android:textColor = "#ff4500" android:layout_height = "wrap_content" android:singleLine = "true" /> </LinearLayout> <Button android:id = "@+id/animate" android:text = "Animated button" android:layout_width = "wrap_content" android:layout_height = "wrap_content" /> </LinearLayout> </RelativeLayout>
위 레이아웃 코드에는 하나의 TextView와 하나의 Button이 포함되어 있습니다. 사용자가 버튼을 클릭하면 TextView의 텍스트가 애니메이션과 함께 업데이트됩니다.
3단계 — MainActivity.java 작성
src/MainActivity.java 파일에 다음 코드를 추가합니다.
package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView view = findViewById(R.id.text);
final LinearLayout parent = findViewById(R.id.parent);
view.setText("1+2");
Button animate = findViewById(R.id.animate);
animate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
slideUp.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
view.setText("3");
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
parent.startAnimation(slideUp);
}
});
}
}코드 핵심 로직 살펴보기
위 코드의 동작 원리는 다음과 같습니다.
- 앱이 시작되면 TextView에 초기 값으로 "1+2"가 표시됩니다.
- 버튼 클릭 시
AnimationUtils.loadAnimation()으로 슬라이드 업(slide_up) 애니메이션을 불러옵니다. AnimationListener의onAnimationEnd()콜백에서 애니메이션이 끝난 순간 텍스트를 "3"으로 변경합니다.- 텍스트가 포함된 부모 LinearLayout에
startAnimation()을 호출해 애니메이션을 실행합니다.
4단계 — 애플리케이션 실행 및 결과 확인
실제 Android 기기를 컴퓨터에 연결했다고 가정하고 앱을 실행해 보겠습니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 상단 툴바의 Run 버튼을 클릭하세요. 실행할 기기 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 초기 화면이 표시됩니다.
버튼을 클릭하면 TextView의 텍스트가 애니메이션 효과와 함께 아래와 같이 업데이트됩니다.
이렇게 하면 Android에서 한 TextView에서 다른 텍스트로 전환되는 애니메이션 효과를 손쉽게 구현할 수 있습니다. slide_up 외에도 fade_in, zoom_in 등 다양한 애니메이션 리소스를 활용하면 더욱 풍부한 UI 효과를 만들 수 있습니다.