안드로이드(Android) DrawerLayout 사용하여 멀티윈도우 만들기

안드로이드(Android) DrawerLayout 사용하여 멀티윈도우 만들기

 

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

 

이번 예제는 android.support.v4.widget.DrawerLayout 와 DrawerListener 상속받아

드래그 혹은 이벤트로 멀티윈도우를 사용하는 방법에 관한 내용이다.

예제구성은 바탕화면위에 또 다른 윈도우를 만들어서 왼쪽 구석에

넣어둔다. 그리고 드래그로 그 윈도우를 꺼낼수도 있고 이벤트를

발생시켜 윈도우를 나오게 하고 들어가게도 할수 있다.

 

1. DrawerLayout 에 제어할 View 추가

 

멀티윈도우를 구성하기 위해서는 DrawerLayout 안에 여러 개의 Layout 을

추가해서 사용하면 된다. 소스에서는 바탕에 표시하는 Layout 은 두고

움직이고자 하는 Layout 을 DrawerLayout 에 추가하면 된다.

 

Layout 을 Open 하고자 할 때 : 소스에서 보는 것과 같이 openDrawer() 함수에

움직이고자 하는 Layout 을 추가하였다

 

buttonOpenDrawer.setOnClickListener(new OnClickListener() {

public void onClick(View arg0) {
drawerLayout.openDrawer(drawerView);
}
});

 

Layout 을 Close 하고자 할 때 : closeDrawers() 함수를 호출한다.

buttonCloseDrawer.setOnClickListener(new OnClickListener() {

	public void onClick(View arg0) {
		drawerLayout.closeDrawers();
	}
});

 

2. DrawerListener 구현

 

이제 DrawerLayout 이 동작할 때 이벤트를 받아 그에 맞는 처리를 하기 위해서

DrawerListener 구현해서 추가 해야 한다. 주요 함수는 윈도우를 닫을 때, 열때 ,

그리고 슬라이드시간과 현재 슬라이드의 상태값을 받을수 있다.

 

DrawerListener myDrawerListener = new DrawerListener() {

	public void onDrawerClosed(View drawerView) {
		txtPrompt.setText("onDrawerClosed");
	}

	public void onDrawerOpened(View drawerView) {
		txtPrompt.setText("onDrawerOpened");
	}

	public void onDrawerSlide(View drawerView, float slideOffset) {
		txtPrompt.setText("onDrawerSlide: "
				+ String.format("%.2f", slideOffset));
	}

	public void onDrawerStateChanged(int newState) {
		String state;
		switch (newState) {
		case DrawerLayout.STATE_IDLE:
			state = "STATE_IDLE";
			break;
		case DrawerLayout.STATE_DRAGGING:
			state = "STATE_DRAGGING";
			break;
		case DrawerLayout.STATE_SETTLING:
			state = "STATE_SETTLING";
			break;
		default:
			state = "unknown!";
		}

		txtPrompt2.setText(state);
	}
};

위의 클래스를 사용하기 위해서 DrawerLayout 의 setDrawerListener() 함수를 이용해

추가한다. 물론 터치이벤트도 아래 소스처럼 받을수 있다.

 

drawerLayout.setDrawerListener(myDrawerListener);
drawerView.setOnTouchListener(new OnTouchListener() {

	public boolean onTouch(View v, MotionEvent event) {
		// TODO Auto-generated method stub
		return true;
	}
});

 

3. Main Activity 소스

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

	private DrawerLayout drawerLayout;
	private View drawerView;
	private TextView txtPrompt, txtPrompt2;

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

		txtPrompt = (TextView) findViewById(R.id.prompt);
		txtPrompt2 = (TextView) findViewById(R.id.prompt2);

		drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		drawerView = (View) findViewById(R.id.drawer);

		Button buttonOpenDrawer = (Button) findViewById(R.id.opendrawer);
		buttonOpenDrawer.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				drawerLayout.openDrawer(drawerView);
			}
		});

		Button buttonCloseDrawer = (Button) findViewById(R.id.closedrawer);
		buttonCloseDrawer.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				drawerLayout.closeDrawers();
			}
		});

		drawerLayout.setDrawerListener(myDrawerListener);
		drawerView.setOnTouchListener(new OnTouchListener() {

			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				return true;
			}
		});
	}

	DrawerListener myDrawerListener = new DrawerListener() {

		public void onDrawerClosed(View drawerView) {
			txtPrompt.setText("onDrawerClosed");
		}

		public void onDrawerOpened(View drawerView) {
			txtPrompt.setText("onDrawerOpened");
		}

		public void onDrawerSlide(View drawerView, float slideOffset) {
			txtPrompt.setText("onDrawerSlide: "
					+ String.format("%.2f", slideOffset));
		}

		public void onDrawerStateChanged(int newState) {
			String state;
			switch (newState) {
			case DrawerLayout.STATE_IDLE:
				state = "STATE_IDLE";
				break;
			case DrawerLayout.STATE_DRAGGING:
				state = "STATE_DRAGGING";
				break;
			case DrawerLayout.STATE_SETTLING:
				state = "STATE_SETTLING";
				break;
			default:
				state = "unknown!";
			}

			txtPrompt2.setText(state);
		}
	};

}

 

4. Layout 소스

 

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:background="@android:color/background_light"
        tools:context=".MainActivity" >
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main layout" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:autoLink="web"
            android:text="Test"
            android:textStyle="bold" />
        
        <Button
            android:id="@+id/opendrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open Drawer" />

        <TextView
            android:id="@+id/prompt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
        <TextView
            android:id="@+id/prompt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/background_dark"
        android:orientation="vertical"
        android:padding="5dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Drawer" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <Button
            android:id="@+id/closedrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Close Drawer" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

 

5. 결과 화면과 전체 소스

 

전체 프로젝트 소스 :   SampleMultiWindow.zip

 

결과 화면 :