페이지 슬라이딩 기법은 매뉴를 구성할때 주로 많이 사용된다. FrameLayout과 Animation을 사용해서 페이지 슬라이드 효과를 낼 수 있다. 버튼을 클릭하면 오른쪽에 숨어있는 Frame Layout이 나타난다. 아래의 사진은 소스를 구동했을때 보여지는 화면이다.

 

 

 

 

 

app/res/anim 디렉터리의 translate_left.xml, translate_right.xml 파일은 각각 페이지가 왼쪽, 오른쪽으로 이동하는 애니메이션 정보를 담고있다. 애니메이션에 관련한 기초 정보는 아래의 링크에 있다.

 

URL: http://wookoa.tistory.com/211

 

 

 

# MainActivity.java

package com.example.wookoa.wookoa_17;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
LinearLayout page = null;
Button button = null;

Animation translateLeft = null;
Animation translateRight = null;

boolean isPageState = false; // Page의 상태값을 저장

@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);

SlidingAnimaionListener listener = new SlidingAnimaionListener(); // 아래서 정의한 클래스를 선언
translateLeft.setAnimationListener(listener); // 선언한 클래스를 input 값으로 지정
translateRight.setAnimationListener(listener); // 선언한 클래스를 input 값으로 지정

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

// 애니메이션 리스너를 상속받은뒤, 메소드 오버라이딩
class SlidingAnimaionListener implements Animation.AnimationListener {
@Override
public void onAnimationStart(Animation animation) {

}
@Override
public void onAnimationEnd(Animation animation) {
if(isPageState){
page.setVisibility(View.INVISIBLE);
button.setText("Open Page");
isPageState = false;
}
else{
button.setText("Close Page");
isPageState = true;
}
}
@Override
public void onAnimationRepeat(Animation animation) {

}
}
}

 

 

# 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:background="@android:color/holo_blue_dark"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Base Area"
android:textSize="30dp"
android:textColor="@android:color/white"/>
</LinearLayout>

<LinearLayout
android:id="@+id/page"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="right"
android:background="@android:color/holo_green_dark"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sliding Area"
android:textSize="30dp"
android:textColor="#ffffffff"/>
</LinearLayout>

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

 

 

# app/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>

 

 

# app/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>

 

 

Private comment