페이지 슬라이딩은 버튼을 눌렀을 때 보이지 않던 뷰가 슬라이딩 방식으로 나타나는 기능이다.
어러 뷰를 중첩시켜 두었다가 하나씩 전환하면서 보여주는 방식에 애니메이션을 결합한 것이다.
페이지 슬라이딩 만들기
main_activity.xml 파일을 수정한다.
최상위 레이아웃을 FrameLayout으로 바꾸고 한 개의 LinearLayout과 버튼을 하나 추가했다.
레이아웃인 page는 슬라이드 되어 나타나는 레이아웃이다.
배경 색을 노란색으로 바꾸고
layout_width와 height 값을 지정하여 나타날 때 화면 일부만 채우도록 하였으며
gravity를 center|right로 설정하여 화면의 오른쪽 중간에 보이도록 하였고
visibility 속성을 gone으로 설정하여 보이지 않도록 하였다.
버튼은 텍스트를 Open으로 설정하였고
gravity를 center|right로 설정하여 화면의 오른쪽 중간에 보이도록 하였다.
res 폴더안에 anim 폴더를 만들었고
그 안에 레이아웃을 좌/우로 이동시키는 애니메이션인 translate_left와 translate_right 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><?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>MainActivity.java 파일에 코드를 작성하였다.
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 {
@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) {
}
}
}정의한 애니메이션 액션 정보를 AnimationUtils 클래스의 loadAnimation 메소드로 로딩하였다.
translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);
translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);버튼을 눌렀을 때 애니메이션이 실행되도록 하였다.
페이지가 슬라이딩 되어 나올 때는 visibility 속성이 Visible이 되도록 하였다.
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);
}
}
});페이지가 슬라이딩 되어 사라졌을 때는 Visibility를 Invisible로 만들어 화면에 보이지 않게 해야한다.
페이지가 보이지 않게 되는 시점은 애니메이션이 끝나는 시점이어야 하므로 AnimationListener 인터페이스를 구현한 객체를 만들어 onAnimationEnd 메소드에 실행할 코드를 정의한 후,
애니메이션 객체에 setAnimationListener 메소드로 설정한다.
SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();
translateLeftAnim.setAnimationListener(animListener);
translateRightAnim.setAnimationListener(animListener);
...
private class SlidingPageAnimationListener 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) {
}
}
}
