[Android] SlidingUpPanel Layout 적용 , 안드로이드 아래에서 위로 올라오는 Layout 사용하기

대부분의 어플에서 특정 버튼을 클릭하거나 아래에서 위로 슬라이스 할 경우

메뉴 레이아웃이 올라오는 방식을 사용하고 있다.

현재 개발중인 프로젝트에 적용하기 위해서 사용 방법을 공부했다.

 

hannesa2/AndroidSlidingUpPanel: It provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) (github.com)

GitHub - hannesa2/AndroidSlidingUpPanel: It provides a simple way to add a draggable sliding up panel (popularized by Google Mus

 

우선 gradle : app 파일에 라이브러리 경로를 추가시켜 준다.

 

implementation 'com.sothree.slidinguppanel:library:3.4.0'

 

[ Layout 설정하기]

 

slide up panel을 사용하기 위해서는 해당  Layout 을 view 의 최상단 레이아웃으로 변경해 주어야 한다.

예로 Fragment에 적용할 경우 해당 Fragment의 내부 뷰들은 Slide Up Panel Layout 내부에 위치해야 한다.

또한 이 레이아웃은 반드시 두 개의 자녀 뷰를 가지고 있어야한다.

첫 번째 뷰는 배경으로 사용될 뷰, 두 번째 뷰는 슬라이드 할 뷰가 오도록 한다.

 

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:gravity="bottom"
    app:umanoDragView="@id/slide_layout"
    app:umanoOverlay="true"
    app:umanoPanelHeight="0dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/main_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="@dimen/main_margin">
        </LinearLayout>
        
        <LinearLayout
            android:id="@+id/slide_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </LinearLayout>
        
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

 

이러한 구조가 된다. Slide Up Panel Layout 내부에는  기존에 보여질 뷰를 담당하는 main_layout 과

슬라이드 동작 시 나타나게 될 slide_layout 으로 구성되어져 있다.

 

여러 옵션을 지정해 주었는데,  gravity는 반드시 설정해 주어야 한다.

 

1. slide 의 gravity : 어느 방샹에서 드래그 할 지 결정 한다 *필수

2. slide 의 umanoDragView : 드래그 할 때 사용할 뷰를 선택 , 서브 뷰를 뜻한다.

3. slide 의 umanoOverlay : 슬라이드 패널을 오버레이로 만들지 여부이며 기본 값은 false로 되어있는 것 같다.

   - true 일 경우 슬라이드 된 패녈을 제외한 부분이 투명해지고, 레이아웃 높이가 자체 화면 높이로 설정

   - false 일 경우 Back Layout의 높이가 PanelHeght로 설정한 크기 만큼 줄어들게 된다.

4. slide 의 umanoPanelHeight : 닫혀 있을 때 얼마나 보일지 높이를 설정 할 수 있다.

 

 

[ 코드에 적용하기 ]

 

코드에 적용하는 방법은 간단했다. 우선 슬라이드 패널 리스너를 선언한다.

아래 코드에서 slidePanel은 slide up panel Layout을 바인딩 한 것이다.

 

//슬라이드 패널 리스너
val state = slidePanel.panelState

 

menuButton 이라는 ImageView를 클릭 했을 때 해당 슬라이드가 올라오도록 설정해 주었다.

 

menuButton.setOnClickListener {
    if (state == SlidingUpPanelLayout.PanelState.COLLAPSED) {
        slidePanel.panelState = SlidingUpPanelLayout.PanelState.ANCHORED
    }
    // 열린 상태일 경우 닫기
    else if (state == SlidingUpPanelLayout.PanelState.EXPANDED) {
        slidePanel.panelState = SlidingUpPanelLayout.PanelState.COLLAPSED
    }
}

 

따라서 menuButton을 클릭하게 되면 슬라이너 패널 리스너로 설정한 state 변수의 상태를 변환 해준다.

 - 뷰가 열려 있을 경우 -> 닫기 

 - 뷰가 닫혀 있을 경우 -> 열기

 

 

꿑