이 튜토리얼에서는 안드로이드에서 슬라이드 업/다운(Slide Up/Down) 애니메이션을 활용해 특정 뷰(View)를 자연스럽게 보여주고 숨기는 방법을 단계별로 알아봅니다. 로그인 패널이나 하단 시트처럼 화면 아래에서 위로 올라오는 UI를 구현할 때 유용하게 활용할 수 있습니다.
1단계: 새 프로젝트 생성
Android Studio를 실행한 후 File → New Project 메뉴로 이동하여 새 프로젝트를 생성합니다. 프로젝트 생성에 필요한 모든 정보를 입력하고 빈 액티비티(Empty Activity) 템플릿을 선택합니다.
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:layout_height = "match_parent"> <Button android:id = "@+id/button" android:layout_centerHorizontal = "true" android:layout_marginTop = "100dp" android:layout_width = "150dp" android:text = "Click" android:layout_height = "wrap_content"/> <LinearLayout android:id = "@+id/view" android:background = "#a6e1aa" android:orientation = "vertical" android:layout_alignParentBottom = "true" android:layout_width = "match_parent" android:layout_margin = "20dp" android:layout_height = "200dp"> <EditText android:hint = "User name" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> <EditText android:hint = "Password" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </LinearLayout> </RelativeLayout>
위 코드에서는 버튼 하나와 화면 하단에 배치된 LinearLayout을 사용했습니다. 이 LinearLayout에는 사용자 이름과 비밀번호를 입력받는 EditText 두 개가 포함되어 있으며, 버튼을 클릭하면 이 레이아웃이 애니메이션과 함께 나타나거나 사라지게 됩니다.
3단계: 메인 액티비티 코드 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다.
package com.example.andy.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
boolean opened;
LinearLayout view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = findViewById(R.id.view);
view.setVisibility(View.INVISIBLE);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!opened){
view.setVisibility(View.VISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0,
0,
view.getHeight(),
0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
} else {
view.setVisibility(View.INVISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0,
0,
0,
view.getHeight());
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
opened = !opened;
}
});
}
}핵심 코드 살펴보기
위 코드의 핵심은 TranslateAnimation 클래스를 사용해 뷰를 위아래로 이동시키는 것입니다. opened 불리언 변수로 현재 상태를 추적하며, 버튼을 클릭할 때마다 뷰를 표시하거나 숨깁니다.
뷰를 표시하는 코드 (슬라이드 업)
뷰를 아래에서 위로 올려 표시하려면 다음 코드를 사용합니다.
TranslateAnimation animate = new TranslateAnimation( 0, 0, view.getHeight(), 0); animate.setDuration(500); animate.setFillAfter(true); view.startAnimation(animate);
뷰를 숨기는 코드 (슬라이드 다운)
반대로 뷰를 아래로 내려 숨기려면 다음 코드를 사용합니다.
TranslateAnimation animate = new TranslateAnimation( 0, 0, 0, view.getHeight()); animate.setDuration(500); animate.setFillAfter(true); view.startAnimation(animate);
setDuration(500)은 애니메이션 지속 시간을 500밀리초(0.5초)로 설정하며, setFillAfter(true)는 애니메이션이 끝난 후에도 마지막 상태를 유지하도록 합니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결한 상태에서 Android Studio의 툴바에 있는 Run 아이콘을 클릭합니다. 옵션 목록에서 연결된 모바일 기기를 선택하면 앱이 설치되고 실행됩니다.
앱이 처음 실행되면 아래와 같은 기본 화면이 표시됩니다.
버튼을 클릭하면 로그인 패널이 아래에서 위로 슬라이드되며 나타납니다. 같은 버튼을 한 번 더 클릭하면 뷰가 아래로 내려가며 사라집니다.
마무리
이렇게 TranslateAnimation을 활용하면 별도의 외부 라이브러리 없이도 간단한 코드만으로 뷰를 부드럽게 표시하고 숨길 수 있습니다. 참고로 최신 안드로이드 개발에서는 ViewPropertyAnimator(animate() 메서드)나 MotionLayout을 사용하는 방식도 권장되므로, 프로젝트 요구 사항에 맞게 선택하시기 바랍니다.