[j android] 페이지 슬라이딩(page sliding) 구현하기

 왼쪽에서 오른쪽으로 페이지가 슬라이딩하는 것과 슬라이딩 영역에 버튼하나를 추가하여 다른액티비티로 이동하는 것을 구현할 것입니다.

 먼저, xml을 구현하기 전 FrameLayout에 대해 간단히 설명하겠습니다.

 

* FrameLayout이란?

 하나의 프레임 레이아웃에는 여러 View를 겹쳐서 넣는 용도로 사용. 각 View를 레이아웃의 위, 아래, 좌, 우 형태로 배치할 수 있다.

 상단에서 하단으로 View를 읽어들이며 화면을 표현하므로 마지막에 추가된 레이아웃일수록  화면의 가장 앞에 보이게 된다. 특정 상황에 View를 겹쳐 표현할 때 사용한다.

 

1) FrameLayout을 이용하여 xml구현하기

 

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

    <LinearLayout
        android:orientation="vertical"
        android:background="#F7F4DE"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="activity_main"
            android:textSize="30dp"
            android:textColor="#8C2094"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/slidingpage"
        android:orientation="vertical"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:gravity="center"
        android:visibility="gone"
        android:background="#EDD8F7">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:layout_gravity="top|center">
        <Button
            android:id="@+id/main2go"
            android:text="액티비티 이동"
            android:background="#00BCD4"
            android:textColor="#FFFFFF"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        </LinearLayout>
        <TextView
            android:text="sliding page"
            android:textSize="20dp"
            android:layout_gravity="center"
            android:textColor="#E70DCE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>


    </LinearLayout>

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

        <Button
            android:id="@+id/go"
            android:text="open"
            android:background="#673AB7"
            android:textColor="#FFFFFF"
            android:textSize="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>




    </LinearLayout>




</FrameLayout>

 

2) animation xml 구현

  * 왼쪽에서 오른쪽으로 나올때 (이 코드를 사용하면 된다.)

 

 - translate_left.xml

 

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

 - translate_right.xml

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

 

 * 오른쪽에서 왼쪽으로 나올때

 

 - 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="500"
       android:repeatCount="0"
      android:fillAfter="true"/>
</set>

 - 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="500"
        android:repeatCount="0"
      android:fillAfter="true"/>
</set>

 

3) 먼저 간단한 MainActivity2.class 구현부터 하자.  버튼을 누르면 MainActivity.class로 이동하는 소스이다.

public class Main2Activity extends AppCompatActivity {

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

        maingo = (Button) findViewById(R.id.maingo);

        maingo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Main2Activity.this,MainActivity.class);
                startActivity(i);
                overridePendingTransition(0,0);
            }
        });
    }
}

 

4) 애니메이션을 연결해준다. 왼쪽에서 오른쪽으로 나올때 / 사라질때

Animation leftanimation = AnimationUtils.loadAnimation(this,R.anim.translate_left);
Animation rightanimation = AnimationUtils.loadAnimation(this,R.anim.translate_right);

 

5) SlidingPgeAnimationLister 를 만들어준뒤 애니메이션을 연결한다.

 - boolean pageopen : false일때는 페이지가 닫힌상태 true일때는 열린상태 구분.

 - onAnimationEnd : page가 닫힐때 코드를 작성.

boolean pageopen = false;

SlidingPageAnimationListener animationListener = new SlidingPageAnimationListener();
leftanimation.setAnimationListener(animationListener);
rightanimation.setAnimationListener(animationListener);



   private class SlidingPageAnimationListener implements Animation.AnimationListener{

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if(pageopen){
                slidingpage.setVisibility(View.INVISIBLE);

                go.setText("Open");
                pageopen = false;
            }else{
                go.setText("Close");
                pageopen=true;
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }

 

6) 다음은 MainActivity.class 전체소스이다.

public class MainActivity extends AppCompatActivity {
    boolean pageopen = false;

    Animation leftanimation, rightanimation;

    LinearLayout slidingpage;
    Button go,main2go;

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

        slidingpage = (LinearLayout) findViewById(R.id.slidingpage);
        go = (Button) findViewById(R.id.go);
        main2go = (Button)findViewById(R.id.main2go);

        leftanimation = AnimationUtils.loadAnimation(this,R.anim.translate_left);
        rightanimation = AnimationUtils.loadAnimation(this,R.anim.translate_right);

        SlidingPageAnimationListener animationListener = new SlidingPageAnimationListener();
        leftanimation.setAnimationListener(animationListener);
        rightanimation.setAnimationListener(animationListener);

        go.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(pageopen){
                    slidingpage.startAnimation(rightanimation);
                }else{
                    slidingpage.setVisibility(View.VISIBLE);
                    slidingpage.startAnimation(leftanimation);
                }
            }
        });

        main2go.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(MainActivity.this,Main2Activity.class);
                startActivity(i);
                overridePendingTransition(0,0);
            }
        });
    }

    private class SlidingPageAnimationListener implements Animation.AnimationListener{

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if(pageopen){
                slidingpage.setVisibility(View.INVISIBLE);

                go.setText("Open");
                pageopen = false;
            }else{
                go.setText("Close");
                pageopen=true;
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}

 

** 실행화면

 

PageSliding 실행화면