(Android) 애니메이션을 이용한 슬라이딩 페이지

1. 개요

    애니메이션 기을 이용하여 슬라이딩 페이지 만들기

 

2. 구성

     - 프로젝트 생성

     - 화면 UI (Activity_main.xml)  만들기. 여기부터

     - 애니메이션 생성

     - 애니메이션 기능 추가

     - 애니메이션 이벤트 연결

 

3. 구현

     1. Empty Activity 타입으로 프로젝트를 생성한다.

     2. 메인 레아웃을 FrameLayout으로 변경합니다.

          자세한 설명은 (Android) 버튼 아래 고정하고 RecyclerView 화면 채우기를 참고하면 됩니다.

     3. 팔레트에서 버튼 하나를 드래그해서 FrameLayout에 올려놓습니다.

         버튼을 추가 위치를 Top/Left로 설정합니다.

         그리고, LinerLayout을 추가하고 id는 "bottompage"로 합니다. 그리고 안에 TextView 2 개를 추가합니다.

         텍스트 내용이 안 보여서 버튼 오른쪽으로 잠시 옮겼습니다.   텍스트 속성은 아래와 같이 합니다.

android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ffffff66"
android:textColor="#ff000000"
android:textSize="20sp"
android:text="TextView1"

      그러면 아래와 같은 화면이 표시됩니다.

        입력이 다되면 LinerLayout의 visibility 속성을 "gone"으로 변경합니다.

         그럼 최종 아래와 같은 화면이 됩니다.

 

    4. 소스

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <LinearLayout
        android:id="@+id/bottompage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:visibility="gone">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffffff66"
            android:text="TextView1"
            android:textColor="#ff000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffffff66"
            android:text="TextView2"
            android:textColor="#ff000000"
            android:textSize="20sp" />
    </LinearLayout>
</FrameLayout>