안드로이드 페이지 슬라이딩(Page Sliding) (210421)
(210518 수정)
보통 상하좌우 어디서든 나타나게 할 수 있는 바로가기 메뉴처럼
데이터들을 화면에 좀 더 효율적이고 동적으로 UI를 보여줘야 할 때가 있다.
이번에 알아볼 페이지 슬라이딩(Page Sliding)은
버튼을 눌렀을 때 보이지 않던 뷰가 슬라이딩 방식으로 미끄러지면서 나타나는 기능으로써
여러 뷰를 전환하면서 보여주는 프레임 레이아웃(Frame Layout) 방식에
애니메이션(Animation) 기능을 합친 것이다.
간단하기 때문에 쉽게 기능을 구현할 수 있다.
----------------------------------------------------------------------------------------------------
먼저 메인 레이아웃과 슬라이딩 레이아웃을 보여줄 activity_main.xml 파일부터 보겠다.
activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<?xml version="1.0" encoding="utf-8"?>
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="#ff11ff11" >
<!-- 첫 번째 레이아웃은 메인 레이아웃,
background 색상은 본인 자유 -->
<TextView
android:layout_width="184dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="메인"
android:textColor="#000000"
android:textSize="60sp" />
<!-- 메인 레이아웃에서 "메인"이라는
텍스트를 표시해줌-->
</LinearLayout>
<LinearLayout
android:id="@+id/sliding"
android:layout_width="200dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="right"
android:background="#ffffff99"
android:visibility="invisible">
<!-- 두 번째 레이아웃은 슬라이딩으로 보여질 레이아웃,
여기서 visibility가 가장 중요한데 평소에 안보였다가(invisible)
오픈 버튼을 누르면 보이게(visible)할것임 -->
<TextView
android:layout_width="172dp"
android:layout_height="match_parent"
android:text="슬라이딩"
android:textColor="#000000"
android:textSize="40sp"
android:gravity="center"/>
<!-- 슬라이딩 레이아웃에서 "슬라이딩" 이라는
텍스트를 표시함 -->
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="right|bottom" >
<!-- 마지막 레이아웃은 버튼이 들어있는 레이아웃,
버튼 위치는 layout_gravityfh로 설정할 수 있는데,
본인 자유이고 여기서는 오른쪽과 아래를 둘 다 사용함 -->
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="열기"
android:textSize="50dp"
android:layout_margin="20dp"/>
<!-- 열기라는 버튼을 만들어서 누르면 슬라이딩
레이아웃이 보이게함-->
</LinearLayout>
</FrameLayout>
|
cs |
이렇게 레이아웃들을 만들었고
다음으로는 슬라이딩 레이아웃이 움직이는 애니메이션 동작 정의를 할 것이다.
app밑에 res폴더 안에 anim 폴더를 만들고
그 안에 sliding_left.xml과 sliding_right.xml 파일을 생성한다.
sliding_left.xml
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0" encoding="utf-8"?>
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="500" />
</set>
|
cs |
sliding_right.xml
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0" encoding="utf-8"?>
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="500" />
</set>
|
cs |
여기서 <translate> 태그는 슬라이딩 레이아웃이
왼쪽이나 오른쪽으로 이동하는 애니메이션을 정의한다.
fromXDelta 는 어디로부터 이동하냐 라는 말이라서
left파일 같은 경우에는 끝인 100%p 이고,
right파일 같은 경우에는 처음인 0%p 이다.
toXDelta 는 어디까지 이동하냐 라는 말이라서
left파일 같은 경우에는 처음인 0%p 이고,
right파일 같은 경우에는 끝인 100%p 이다.
duration은 동작하는 시간을 말하는데 1/1000초 단위이다. (500이면 0.5초)
UI를 했다면 이제는 마지막으로 동작시킬 코드가 필요하다.
MainActivity.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
public class MainActivity extends AppCompatActivity {
LinearLayout sliding; // 애니메이션을 동작시킬 객체
Animation slidingLeft; // 슬라이딩이 왼쪽으로 펼쳐지는 애니메이션 객체
Animation slidingRight; // 슬라이딩이 오른쪽으로 접어지는 애니메이션 객체
Button btn;
boolean isOpen = false; // 페이지가 처음에는 오픈이 안 된 상태
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sliding = (LinearLayout) findViewById(R.id.sliding);
slidingLeft= AnimationUtils.loadAnimation(this, R.anim.sliding_left);
slidingRight= AnimationUtils.loadAnimation(this, R.anim.sliding_right);
SlidingAnimationListener listener = new SlidingAnimationListener();
slidingLeft.setAnimationListener(listener);
slidingRight.setAnimationListener(listener);
btn = (Button)findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() { // 열기 버튼을 누르면
@Override
public void onClick(View v) {
if (isOpen){ // 슬라이딩 레이아웃이 열려져 있으면
sliding.startAnimation(slidingRight); // 슬라이딩 레이아웃 닫기
} else { // 슬라이딩 레이아웃이 닫혀져 있으면
sliding.setVisibility(View.VISIBLE); // 슬라이딩 레이아웃을 보이게하기
sliding.startAnimation(slidingLeft); // 슬라이딩 레이아웃 열기
}
}
});
}
class SlidingAnimationListener implements Animation.AnimationListener {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) { // 애니메이션이 끝날 때 자동 호출됨
if(isOpen) { // 슬라이딩 레이아웃의 열린 상태가 끝나면
sliding.setVisibility(View.INVISIBLE); // 슬라이딩 레이아웃 안보이게 하고
btn.setText("열기"); // 버튼에 있는 텍스트를 열기로 하기
isOpen = false; // 닫기 상태가 됨
} else { // 슬라이딩 레이아웃의 닫힌 상태가 끝나면
btn.setText("닫기"); // 버튼에 있는 텍스트를 닫기로 하기
isOpen = true; // 열기 상태가됨
}
}
@Override
public void onAnimationRepeat(Animation animation) {
}
}
}
|
cs |
이렇게 페이지 슬라이딩(Page Sliding) 기능을 간단하게 알아보았다.
피드백은 언제나 환영입니다.