[ Android ] 페이지 슬라이딩

 

이 글은 부스트코스 강의를 공부하며 요약한 글입니다.

 

  CatServant  

 Page Sliding

 

페이지 슬라이딩은 버튼 등을 눌렀을 때 보이지 않던 뷰가 슬라이딩 방식으로 보이는 것으로 여러 뷰를 하나씩 전환하면서 보여주는 방식에 애니메이션을 결합한 것입니다. 겹쳐져 있는 여러 뷰를 하나씩 전환하면서 보여주기 위한 방법으로는 Frame Layout을 사용합니다.

 

 참고 : ViewPager로 프래그먼트 간 슬라이드 

 

 Code

• res / anim / translate_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="1500"/>
</set>

<translate> tag는 View가 위, 아래 또는 좌, 우로 이동하도록 만듭니다. 여기서는 fromXDelta 속성과 toXDelta 속성이 사용되었으므로 X 방향 ( = 좌/우 ) 로 이동하게 됩니다.

만약 Y 방향 ( = 위 / 아래 )로 이동하도록 만들고 싶다면 fromYDelta 속성과 toYDelta 속성을 사용하면 됩니다. 

 

duration 속성은 Animation이 얼마나 지속될지 시간을 지정하는 속성입니다. ( 1000ms = 1초 )

 

이외에도 repeatCount 속성과 filter 속성이 있습니다. 

repeatCount 속성은 Animation 반복 횟수입니다. 여러 번 반복하도록 하고 싶다면 이 속성을 사용할 수 있습니다.

filter 속성은 Animation 동작이 끝난 후에 원래의 모양대로 화면에 보여줄 것인지를 지정합니다. 

 

• res / anim / translate_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        android:duration="1500"/>
</set>

• res / layout / activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
        android:background="#ff5555ff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Base Area"
            android:textSize="30dp"
            android:textColor="#ffffff"/>
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sliding Area"
            android:textSize="30dp"
            android:textColor="#000000"/>
    </LinearLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open"
        android:layout_gravity="center_vertical|right"/>
</FrameLayout>

visibility 속성의 값을 gone 또는 invisible로 하면 보이지 않는다.

 

• MainActivity.java

public class MainActivity extends AppCompatActivity {
    LinearLayout page;
    Animation translateLeft;
    Animation translateRight;

    Button button;
    boolean isPageOpen = false;

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

        page = (LinearLayout) findViewById(R.id.page);

        translateLeft = AnimationUtils.loadAnimation(this, R.anim.translate_left);
        translateRight = AnimationUtils.loadAnimation(this, R.anim.translate_right);

        SlidingAnimationListener listener = new SlidingAnimationListener();
        translateLeft.setAnimationListener(listener);
        translateRight.setAnimationListener(listener);

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

    class SlidingAnimationListener implements Animation.AnimationListener {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        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 onAnimationRepeat(Animation animation) {

        }
    }
}

 

 실행화면

 

출처

 https://www.edwith.org/boostcourse-android/lecture/17113/

[LECTURE] 1) 페이지 슬라이딩 : edwith