안드로이드 - 뷰 펼치고 닫기(ObjectAnim)

0.

안드로이드 앱을 개발하던중 리스트뷰가 있는 리니어레이아웃을 숨겨놨다가 버튼을 누르면 위로 들어나고 다시 버튼을 누르면 원래상태로 들어가도록 하는 디자인을 필요로 하였습니다. 근데 생각보다 순탄치가 않았어요.

구글링을 많이 해본결과 드로어레이아웃과 네비게이션뷰 등을 활용하여 레이아웃을 펼치고 닫을 수 있긴 하지만 저는 

IDLE상태일 때 레이아웃이 화면에 어느 정도 드러나 있도록 디자인 하여서 드로어레이아웃은 동작할 타겟 레이아웃이 초기에 완전히 화면에 드러나지 않게 밖에 못하기 때문에 제가 원하는 구현을 할 수 없었습니다.

그리고 방법도 꽤나 복잡하기도 하였구요.

그러다가 아주 간편하고 쉬운 방법을 찾은게 ObjectAnimator클래스를 사용하는 것입니다. 이를 사용하면 팝업창이 생성되거나 레이아웃이 드러나거나 할 때 커스텀 애니메이션을 적용할 수 있습니다.

한 때 유니티로 안드로이드 앱을 많이 개발하다가 안드로이드 스튜디오를 시작하려니 이러한 레이아웃의 배치나 이동이 굉장히 번거로웠는데 ObjectAnimator클래스를 사용하니 아주 편하였습니다.

서론이 길었네요. 이제 아주 간단한 예제와 함께 사용법을 보겠습니다.

 

1. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF">

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        android:layout_marginTop="550dp"
        android:background="#777777"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/drawer"
            android:layout_width="120dp"
            android:layout_height="8dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="12dp"
            android:background="#FFFFFF">

        </Button>


    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 먼저 메인액티비티 xml입니다. 기본적으로 화면을 가득 채우는 흰색의 리니어레이아웃이 있고 이 위에 애니메이션을 적용시킬 새로운 리니어 레이아웃을 배치하였습니다. 그리고 타겟 리니어 레이아웃에는 해당 레이아웃을 펼치고 닫기 위해 버튼을 배치시켰습니다.

 

2. 메인액티비티

버튼을 누를 때마다 drawToggle값이 변하게 되고 번갈아면서 펼쳤다 닫혔다를 반복합니다.

package c.guitar.animexample;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    View targetView;
    Button drawerButton;
    boolean drawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        targetView = findViewById(R.id.content);
        drawerButton = findViewById(R.id.drawer);

        class DrawButtonClickListener implements View.OnClickListener{
            @Override
            public void onClick(View v){
                if(drawerToggle == false){
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(targetView, "translationY", -1200);
                    objectAnimator.setDuration(500); //0.5초에 걸쳐 진행.
                    objectAnimator.start();
                }
                else{
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(targetView, "translationY", 0);
                    objectAnimator.setDuration(500); //0.5초에 걸쳐 진행.
                    objectAnimator.start();
                }
                drawerToggle = !drawerToggle;
            }
        }

        drawerButton.setOnClickListener(new DrawButtonClickListener());
    }
}

 

3. 결과

흰색 부분이 버튼이고 약간 서랍같은 느낌의 디자인을 생각하여 적용해보았습니다.