woong's

Android Support Design NavigationView 사용하기[4] 본문

Develop/Android

Android Support Design NavigationView 사용하기[4]

dlsdnd345 2016. 2. 14. 18:42

Android Support Design NavigationView 사용하기[4]




안녕하세요. 이번에는 support design NavigationView 에 대해 소개해 보려 합니다.

NavigationView 기존의 MenuDrawer 대체제라 생각하시면 쉬울거라 생각합니다 .


위와 같은 화면을 만들기 위해서는 기존에는 

DrawerLayout 과 ListView , RecyclerView 를 이용해서 구성 하였습니다. 


위 방법은

DrawerLayout + NavigationView 를 사용해서 구현해 보았습니다.


1.사용준비


사용전에 준비해야 할 한가지가 있습니다 .

support design 라이브러리를 추가해야 합니다.


1
compile 'com.android.support:design:22.2.1'
cs



2.사용예제


2.1 drawer.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="Dashboard" />
    <item
        android:id="@+id/nav_explore"
        android:icon="@drawable/ic_explore_black_24dp"
        android:title="Explore" />
</group>
 
<item android:title="Sub menu">
    <menu>
        <item
            android:icon="@drawable/ic_event_black_24dp"
            android:title="Event" />
        <item
            android:icon="@drawable/ic_home_black_24dp"
            android:title="Home" />
    </menu>
</item>
<item android:title="Sub menu">
    <menu>
        <item
            android:icon="@drawable/ic_event_black_24dp"
            android:title="Event" />
        <item
            android:icon="@drawable/ic_home_black_24dp"
            android:title="Home" />
    </menu>
</item>
</menu>
cs



2.2 activity_main.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
 
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            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="wrap_content"
                android:minHeight="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways"/>
 
        </android.support.design.widget.AppBarLayout>
 
    </android.support.design.widget.CoordinatorLayout>
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/layout_header"
        app:menu="@menu/drawer"/>
 
</android.support.v4.widget.DrawerLayout>
 
 cs



2.3 MainActivity.java


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
package com.android.iris.navigationview;
 
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;
 
 
public class MainActivity extends AppCompatActivity {
 
    private Toolbar toolbar;
    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initLayout();
        init();
 
    }
 
    /**
     * 데이터 초기화
     */
    private void init(){
 
        setSupportActionBar(toolbar);
    }
 
    /**
     * 레이아웃 초기화
     */
    private void initLayout(){
 
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        navigationView = (NavigationView) findViewById(R.id.navigationView);
 
        navigationView.setNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
 
        switch (id) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
 
    /**
     * 네비게이션 뷰 선택시 호출 되는 메서드
     */
    private NavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new NavigationView.OnNavigationItemSelectedListener(){
 
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
 
            if (menuItem.isCheckable()) {
                menuItem.setChecked(true);
            }
            Toast.makeText(getApplicationContext(),menuItem.getTitle(), Toast.LENGTH_SHORT).show();
            drawerLayout.closeDrawers();
 
            return false;
        }
    };
}
 
 cs



3.사용 방법 설명 


준비가 완료 되었으니 사용법에 대해 알아 보겠습니다.

위 예제를 참고 하시면 될것 같구요 . 핵심코드부분만 말씀 드리겠습니다.


DrawerLayout에 구성되는 화면은 NavigationView 입니다.


NavigationView 의 구성은 xml 에서 작성 됩니다.

drawer.xml 파일이 화면 구성 파일입니다.

기존에는 xml구성이 아닌 아마 ListView , RecyclerView 로 구성 해왔을 것입니다.

이부분이 대체가 된것입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<?xml version="1.0" encoding="utf-8"?>
<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="Dashboard" />
    <item
        android:id="@+id/nav_explore"
        android:icon="@drawable/ic_explore_black_24dp"
        android:title="Explore" />
</group>
 
<item android:title="Sub menu">
    <menu>
        <item
            android:icon="@drawable/ic_event_black_24dp"
            android:title="Event" />
        <item
            android:icon="@drawable/ic_home_black_24dp"
            android:title="Home" />
    </menu>
</item>
<item android:title="Sub menu">
    <menu>
        <item
            android:icon="@drawable/ic_event_black_24dp"
            android:title="Event" />
        <item
            android:icon="@drawable/ic_home_black_24dp"
            android:title="Home" />
    </menu>
</item>
</menu>
cs



xml 을 보시면 굉장히 명확합니다. 

 Group , item , menu 이 있습니다. Group은 셀렉트 기능이 있으면 , single , all 속성이 있습니다.

item은 기본 row를 사용 할때 구성이 됩니다.

Group > imte > menu 하위구조를 가지고 있습니다.

여기서 이름과 아이콘을 지정 할 수 있습니다.


다음으로는 activity_main 코드를 보겠습니다.


1
2
3
4
5
6
7
8
<android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/layout_header"
        app:menu="@menu/drawer"/>
cs

 


navigationView 를 보면 headerLayout 을 지정할수 있습니다.

또한 아이콘 색깔 , 글자색 등을 속성으로 변경 할수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
     * 네비게이션 뷰 선택시 호출 되는 메서드
     */
    private NavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new NavigationView.OnNavigationItemSelectedListener(){
 
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
 
            if (menuItem.isCheckable()) {
                menuItem.setChecked(true);
            }
            Toast.makeText(getApplicationContext(),menuItem.getTitle(), Toast.LENGTH_SHORT).show();
            drawerLayout.closeDrawers();
 
            return false;
        }
    };
 cs


마지막으로는 navigationView 를 선택 시 액션을 위 이벤트를 받아서 정의 하면 될것 같습니다.

화면을 xml 로 정의하면 기존의 개발보다 시간 단축 및 정규화가 가능할것 같습니다.


저작자표시

'Develop > Android' 카테고리의 다른 글

Android Activity Transition ImageView 이동하기 [2]  (0) 2016.02.14
Android Activity Transition 샘플 & 소개하기 [1]  (0) 2016.02.14
Android PercentLayout 사용하기  (0) 2016.02.14
Android Support Design CollapsingToolbarLayout 사용하기[3]  (3) 2016.02.14
Android Support Design Snackbar 사용하기[2]  (0) 2016.02.14
공유하기 링크
'Develop/Android' Related Articles more
Comments