Android > SlidingDrawer - 만들기
등록일 : 2017-07-05 18:41
조회수 : 94,233
SlidingDrawer 란, 위 그림과 같이 서랍과 같이 숨겨 있다가 드래그 및 클릭하여 열어서 사용할 수 있는 위젯을 말합니다.
FrameLayout / RelativeLayout 이 SlidingDrawer를 사용하기에 적합한 레이아웃입니다.
LiearLayout이나 TableLayout에는 사용할 수 없습니다.
여기서는 RelativeLayout를 바탕으로 만들어 보도록 하겠습니다.
SlidingDrawer 의 속성은 아래와 같습니다.
| android:allowSingleTap="true" |
SlidingDrawer의 handle을 클릭 시 열 수 있도록 할 것인지에 대한 속성이며, 디폴트는 true 입니다. false설정 시 드래그를 통해서만 열 수 있습니다. |
| android:animateOnClick="true" |
클릭하여 서랍을 열 때 미끄러지는듯한 애니매이션을 사용 할것인지 설정하는 속성이며, 디폴트는 true입니다. 그런데 test결과 true/false의 차이점이 없었습니다.ㅡㅡ;; |
| android:bottomOffset="5dp" |
서랍을 닫았을때 handle과 부모 아래쪽과의 간격입니다. 값이 커질수록 handle이 아래로 내려가고 작아질수록 handle이 위로 올라갑니다. |
| android:content="@+id/content |
content. 즉, SlidingDrawer를 열었을 때의 내용물의 레이아웃을 설정해주는 속성이며, 여기서는 내부에 만든 LinearLayout을 설정하였습니다. |
| android:handle="@+id/handle" |
handle을 설정하는 속성이며, 여기서는 하나의 이미지뷰로 설정하였습니다. |
| android:orientation="vertical" |
SlidingDrawer의 방향이며, horizontal인 경우 우측에서 열리는 SlidingDrawer를, vertical인 경우 아래에서 열리는 속성을 설정합니다. 디폴트는 vertical입니다. |
| android:topOffset="60dp" |
SlidingDrawer를 열었을 경우 부모 레이아웃과의 간격입니다. 만약 0으로 설정 시 부모 레이아웃을 완전히 덮게 됩니다. |
1. activity_main.xml 파일을 작성합니다.
layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="아래쪽의 아이콘을 클릭/드래그하세요." />
<SlidingDrawer
android:id="@+id/slide"
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="60dp"
>
<ImageView
android:id="@+id/handle"
android:src="@drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SlidingDrawer의 content 부분입니다."
/>
<Button
android:id="@+id/btnclose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="닫기"
/>
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>
SlidingDrawer를 하나 작성하였으며, 그 안에 이미지뷰를 handle로 리니어레이아웃을 content로 등록하였습니다.
2. MainActivity.java 파일을 작성합니다.
public class MainActivity extends Activity {
Button btnClose;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnClose = (Button)findViewById(R.id.btnclose);
btnClose.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
SlidingDrawer drawer = (SlidingDrawer)findViewById(R.id.slide);
drawer.animateClose();
}
});
}
}
activity 파일은 생각보다 간단합니다.
content 부분의 버튼만을 참조한 후 이벤트를 등록하고, onClick()메소드에서 SlidingDrawer를 참조 후 닫는 기능만을 추가하였습니다.