안규 공부방

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를 참조 후 닫는 기능만을 추가하였습니다.
 
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.