[Android] 안드로이드 커스텀 네비게이션 드로어 만들기(Custom Navigation Drawer)

안드로이드 앱 개발을 하다보면 필수적으로 사용하는 것이 네비게이션 드로어 일것이다.

머티리얼 디자인으로 넘어오면서 기본으로 제공해주는 네비게이션 드로워가 사용하기 쉽게 되어 있기 때문에 네비게이션 드로어를 생성하는데 큰 문제는 없을것이라 생각한다.

하지만, 나만에 드로어를 만들기 위해서는 조금에 수고가 필요한것은 사실ㅠㅠ

내가 하는 방법이 맞는 방법인지는 모르겠지만 일단 기록을 위해 남겨두기!!

1. 네비게이션레이아웃 만들기!! (MainActivity)

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.design.widget.CoordinatorLayout>



    <fragment
        android:id="@+id/drawer"
        android:name="Custom NavigationFragment!!!!!!!!!!!"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start" />


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

뭐... 코드 보면 쉽게 이해할 수 있으리라 생각된다. 여기서 중요한점은 1. fragment 부분을 CoordinatorLayout 밖에 위치 시켜야 한다는 점!!! CoordinatorLayout 말고 LinearLayout 사용해도 상관 없습니다. 또, 2. fragment name부분은 조금있다 만들 커스텀 프라그먼트를 적어주어야 한다는 점!!!

이유는 내가 그린 드로어의 클릭이벤트나 리스트 등을 위해서!!

2. 드로워 그리기 (위 fragment의 실체!!!)

<android.support.design.widget.NavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sl="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/linear_search"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:background="?attr/selectableItemBackground"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="11"
                    android:textSize="12dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear_my_list"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:background="?attr/selectableItemBackground"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="22"
                    android:textSize="12dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear_new_contents"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:background="?attr/selectableItemBackground"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="33"
                    android:textSize="12dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear_department"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:background="?attr/selectableItemBackground"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="44"
                    android:textSize="12dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear_my_info"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:background="?attr/selectableItemBackground"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="55"
                    android:textSize="12dp" />
            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="6">

            <android.support.v7.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>
</android.support.design.widget.NavigationView>

이건 필요한데로 그려넣으면 된다. 나는 5개의 LinearLayout과 1개의 RecyclerView로 구성해 놨다.

3. 커스텀 프라그먼트 클래스 만들기

public class NavigationFragment extends Fragment {

    private FrameLayout navigationDrawer;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        navigationDrawer = (FrameLayout) inflater.inflate(R.layout.drawer_activity, container, false);
        return navigationDrawer;

    }

}

이 부분은 프라그먼트 생성만 해 두었지 클릭 이벤트나 리사이클러 뷰 생성은 안한 상태! 추후 구현하면 될 것

4. MainActivty 툴바 설정

public class MainActivity extends AppCompatActivity {

    private NavigationFragment navigationDrawer;
    private ActionBarDrawerToggle dtToggle;

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

        setToolbar();
    }

    public void setToolbar() {

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout dlDrawer = (DrawerLayout) findViewById(R.id. drawer_layout);

        setSupportActionBar(toolbar);

        dtToggle = new ActionBarDrawerToggle(this, dlDrawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

        dlDrawer.setDrawerListener(dtToggle);
        dtToggle.syncState();

        navigationDrawer = (NavigationFragment) getSupportFragmentManager().findFragmentById(R.id.drawer);

    }
}

끝!! 화면 캡쳐는 패스....