본문 바로가기

카테고리 없음

Navigation Drawer Activity

Navigation Drawer

: 요즘은 거의 필수적이다시피 쓰이는 Support API의 종류이다. 비교적 최근의 어플이라면 무조건 반드시 추가해야할 기능이 되어버렸을 정도다.


네비게이션 드로어에 대한 이미지 검색결과

좌측 왼편 Action Bar를 누르거나 현재 Activity를 왼쪽 화면 끝에서 끌어당기면 나오게 할수도 있다.



대충 이런 구조인데, 주로 Actionbar의 좌측에 위치한 메뉴버튼을 누르면 저렇게 팝업메뉴같은 모습으로 왼쪽칸을 모두 차지하며 나오는 모습을 보여준다.

이는 Android에서 제공하는 기본 템플릿에도 있지만 초급은 고사하고 중급입장에서도 이해하기는 꽤 어렵기때문에 구현하는 데 엄청난 애를 먹을것이다. 코드가 짧은편인데도 말이다.

왜냐하면, 늘 딱딱했던 xml을 동적으로 바꿔주어야 하는것은 물론 DrawerLayout이 최상단에 위치해야하기때문에 Include를 통해서 xml의 구조를 복잡하게 만들어주어야 하기도 하고 최대한 자연스러운 화면을 보여줘야하기 때문이다.

하지만 왜 수많은 어플에서 Drawer Activity를 사용할 수 있는것일까?


그 이유는 템플릿을 때려고치기는 어려운 편이지만 그대로 베껴쓰는것은 우리집 개도 할 수 있을정도로 쉽기 때문이다.


Drawer Activity는 안드로이드의 기본 템플릿에도 포함되어있는 기본 UI이기때문이기도 하다.


그러니 글을 조금씩 따라오다보면 자신의 AVD에서 본인이 창조한 Drawer Activity를 구현할 수 있을테니 천천히 읽어내려오길 바란다.




일단 Navigation Drawer Activity는 안드로이드의 기본 API가 아니다.

그러니 안드로이드 스튜디오 환경만 다 갖췄다고 해서 이를 쓸 수 있는건 아니라는 말이다.


구글에서 이후의 업데이트를 통해 제공하는 Support Library에 포함되어 있기때문에

꼭 Gradle에 밑의 내용을 추가해야만 사용이 가능하다.


Dependencies{
    Compile'com.android.support:design:23.1.1'
}


하지만 아무생각없이 저것만 붙여넣기했다가는 나중에 후회할 일이 생길수도 있다.

appcompat(지원 라이브러리)와 버전을 맞춰주어야 하기 때문이다.

appcompat은 Gradle을 읽다보면 Dependencies안에 포함되어있는것을 볼 수 있다.

library는 이 appcompat과 버전이 같아야 한다.

그럴려면 밑에 나오는 코드처럼 껴넣도록 하자.


compile'com.android.support:appcompat-v7:24.2.0'
compile'com.android.support:design:24.2.0'

(굳이 맞추지 않아도 버전이 크게 다르지 않다면 문제가 생길일은 없다. 그래도 그냥 맞춰주도록 하자.)



그리고 ActionBar가 아닌 ToolBar를 사용하는데,

Toolbar란 간단하게 ActionBar의 업그레이드버전이라고 할 수 있다.

Google의 Design Support Library v7버전에서 추가된 친구로,

그냥 굉장히 쉽다.


(요즘들어서는 ActionBar를 대부분 사용하지 않는다. 그 이유인 즉슨, 더 나은 ToolBar가 있어서 굳이 ActionBar를 쓸 이유가 사라졌기 때문이다. ToolBar를 쓰는 데 드는 단점이라고는 Gradle에 Support라이브러리를 추가해야 한다는것과, ActionBar 대신 ToolBar를 쓰도록한다는 코드를 넣어야하는 귀찮음밖에는 없다.)


일단 ActionBar를 사용하지 않는다고 선언을 해야하기때문에 res/value/styles.xml에서 코드를 바꿔주어야 한다.

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>
 
</resources>


저기 위에 NoActionBar라는 parent가 보일텐데, 말 그대로 ActionBar를 쓰지 않는다는 말이다.

(ToolBar와 ActionBar는 엄연히 다르고, ToolBar는 View의 종류이기때문에 엄밀히 따지자면 ActionBar와는 다르다.)