[Android/안드로이드] 슬라이딩드로어/SlidingDrawer 로 숨겨진 레이아웃을 보여주기

앱을 사용하시다 보면 밑에 숨겨져있는 레이아웃을 끌어서 보여주는 부분이 있습니다.

 

SlidingDrawer를 사용하시면 다음과 같이 레이아웃을 위로 끌어서 올리거나 클릭을 해서 레이아웃을 보여줄 수 도 있고, 끌어서 내리거나 클릭을 해서 다시 내릴 수 도 있습니다.

 

보통 FrameLayout이나 RelativeLayout을 사용하고, LinearLayoutdlsk TableLayout에는 사용할 수 없습니다.

 

 

activity_main.xml

    
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    
        <SlidingDrawer
            android:id="@+id/sliding_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:allowSingleTap="true"
            android:animateOnClick="true"
            android:bottomOffset="5dp"
            android:content="@+id/content"
            android:handle="@+id/handle"
            android:orientation="vertical"
            android:topOffset="240dp">
    
            <Button
                android:id="@+id/handle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#dddddd"
                android:src="@drawable/ic_launcher_background"
                android:text="끌어올려주세요" />
    
            <LinearLayout
                android:id="@+id/ll_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#000000"
                android:gravity="center"
                android:orientation="vertical">
    
                <Button
                    android:id="@+id/btn_close"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="SlidingDrawer 입니다.\n클릭하면 내려갑니다."
                    android:textSize="32dp" />
            </LinearLayout>
        </SlidingDrawer>
    
    </RelativeLayout>
    

 

XML 속성

 

android:allowSingleTap  - 핸들을 한 번 탭하여 서랍을 열거 나 닫을 수 있는지 여부를 나타냅니다. 

android:animateOnClick - 사용자가 핸들을 클릭 할 때 애니메이션으로 서랍을 열거 나 닫을 지 여부를 나타냅니다. 

android:bottomOffset - SlidingDrawer 하단의 핸들에 대한 추가 오프셋. 

android:content - 서랍의 내용을 나타내는 아이의 식별자입니다. 

android:handle - 서랍의 핸들을 나타내는 아이의 식별자입니다. 

android:orientation - SlidingDrawer의 방향. 

android:topOffset - SlidingDrawer 상단의 핸들에 대한 추가 오프셋. 

 

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Button btnClose;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnClose = (Button)findViewById(R.id.btn_close);
        btnClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                SlidingDrawer drawer = (SlidingDrawer)findViewById(R.id.sliding_drawer);
                drawer.animateClose();
            }
        });
    }
}

btn_close버튼을 누르면 내려가도록 하기 위해서 다음과 같이 설정해줍니다. 굳이 필요한기능이 아니다 싶으면 skip해주셔도 됩니다~

 

 

 

SlidingDrawer 위젯을 사용하여 앱을 좀 더 이쁘게 꾸밀 수 있습니다.