페이지 슬라이딩 애니메이션 아래에서 위로 구현하기

아래 사이트들을 참고해서 페이지 슬라이딩 기능을 구현했다.

https://mainia.tistory.com/708

안드로이드(Android) FrameLayout 이용해서 페이지 슬라이딩 구현하기

https://one-delay.tistory.com/48

[Android] 페이지 슬라이딩

https://www.it-swarm.asia/ko/android/%ec%8a%ac%eb%9d%bc%ec%9d%b4%eb%93%9c-%ec%9c%84%ec%95%84%eb%9e%98-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ec%9c%bc%eb%a1%9c%eb%b3%b4%ea%b8%b0-%ed%91%9c%ec%8b%9c-%eb%b0%8f-%ec%88%a8%ea%b8%b0%ea%b8%b0/1043482554/

android — 슬라이드 위/아래 애니메이션으로보기 표시 및 숨기기

2번째 예제 사이트를 전체적으로 따라하고 1번째 예제 사이트에서 위/아래 애니메이션을 어떻게 구현할지 영감을 얻었다. 3번째 예제는 참고용.

 

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="vertical">


    <ScrollView

        android:layout_gravity="top"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="0dp"
        android:fillViewport="true"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ListView

                android:id="@+id/LLL"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:choiceMode="singleChoice">


            </ListView>

            <Button
                android:id="@+id/map_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview" />

            <Button
                android:id="@+id/gpstest_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:text="gpstest" />

            <Button
                android:id="@+id/go_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="go"

                android:text="goweb" />

            <TextView
                android:id="@+id/map_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="asdasd" />
        </LinearLayout>
    </ScrollView>

<TableLayout
    android:stretchColumns="*"
    android:background="#ffffff66"
    android:id="@+id/page"
    android:visibility="invisible"
    android:layout_gravity="bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <TableRow>
    <Button
        android:text="채팅 새로 만들기"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Button>
        <Button
            android:text="오픈채팅 참여"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></Button>
    </TableRow>
</TableLayout>

</FrameLayout>

res/anim/translate_up.xml

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

2번째 예제에서 위에서 아래로 짜는 코드가 이상해서 이렇게 바꿨더니 정상적으로 동작했다.

Activity

if(isUp){
	// 페이지 올라왔을 때 처리 부분
}
else{
    page.setVisibility(View.VISIBLE);
    page.startAnimation(translateup);
    isUp = true;
}

isUp과 translateup은 변수라서 따로 생성해줘야한다.

boolean isUp = false;
final Animation translateup = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_up); 

 

실제 실행화면