페이지 슬라이딩

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff5555ff"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Base Area"
            android:textColor="#ffffffff" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/page"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#ffffff66"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Area #1"
            android:textColor="#ff000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Area #2"
            android:textColor="#ff000000" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:background="#00000000"
        android:orientation="vertical">

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

    </LinearLayout>

</FrameLayout>

ConstraintLayout-최상위 레이아웃을 FrameLayout으로 변경

FrameLayout-프레임 레이아웃 안에는 세 개의 LinearLayout을 추가하고 충첩시킵니다.

첫번째 레이아웃으로 match_parent를 지정하여 화면 전체를 채우도록 하고

파란색 배경색을 지정하여 화면 전체를 채우는 뷰와 구분되도록 만듭니다.

두 번쨰 레이아웃은 슬라이딩으로 보여줄 뷰를 노란색 배경색을

지정하여 화면전체를 채우는 뷰와 구분되도록 설정합니다.

세 번쨰 뷰는 버튼을 포함하고 있는데 이 뷰의 배경을 투명하게

하여 버튼만  보이도록 설정합니다.

 

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    boolean isPageOpen = false;

    Animation translateLeftAnim;
    Animation translateRightAnim;

    LinearLayout page;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        page = findViewById(R.id.page);

        translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);
        translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);

        SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();
        translateLeftAnim.setAnimationListener(animListener);
        translateRightAnim.setAnimationListener(animListener);

        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isPageOpen) {
                    page.startAnimation(translateRightAnim);
                } else {
                    page.setVisibility(View.VISIBLE);
                    page.startAnimation(translateLeftAnim);
                }
            }
        });
    }

    private class SlidingPageAnimationListener implements Animation.AnimationListener {

        public void onAnimationEnd(Animation animation) {
            if (isPageOpen) {
                page.setVisibility(View.INVISIBLE);

                button.setText("Open");
                isPageOpen = false;
            } else {
                button.setText("Close");
                isPageOpen = true;
            }
        }

        @Override
        public void onAnimationStart(Animation animation) { }

        @Override
        public void onAnimationRepeat(Animation animation) { }
    }

}

<translate>-태그를 사용해서 좌측으로 이동하는 것과 우측으로 이동하는 애니메이션을 정의 합니다 우측으로 이동하는 애니메이션을 translate_left에서 fromXDelta와toXDelta의 값을 바꾸면 됩니다.XML레이크아웃에서 visibility속성이 gone으로 설정되어 있어 화면에서 보지이 않았으므로 좌측으로 슬라이딩되어 나올떄는 visible로 만들어 화면에 보이게 합니다

애니메이션이 끝나는 객체는 AnimationListener 인터페이스를 구현한 객체는 Animation객체의setAnimationListener를 구현하는 SlidingPageAnimationListener클래스를 정의한 후 이 클래스의 인스턴스 객체를 생성하여 Animation 객체에 설정했습니다.AnimationListener에는onAnimation-tionEnd메서드가 정의되어 있으며 애니메이션이 끝날 떄 자동으로 호출됩니다.

페이지 슬라이딩 방식으로 구현한 화면 기능