woong's

Android 머티리얼 네비게이션 드로어 사용하기 본문

Develop/Android

Android 머티리얼 네비게이션 드로어 사용하기

dlsdnd345 2016. 2. 14. 18:25
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Android 머티리얼 네비게이션 드로어 사용하기


현재 구글 플레이 스토어에서 사용되는 네비게이션 드로어가 

롤리팝과 머티리얼 디자인이 나오면서 적용이 되었습니다.


처음에 저도 보고 이거 진짜 잘만들었다. 섬세하다 라고 말했던 기억이나네요 .

쓰기도 편하게 정말 잘 되어있어 이렇게 포스트를 쓰고 있습니다.



 


1. 준비


머티리얼 네비게이션 드로어를 사용하기 위해서는 머티리얼 셋팅이 되어 있어야 합니다. 

셋팅에 관해서는 기존 포스트 및 android studio 기본 셋팅이여서 생략하겠습니다.

위 링크를 참조하시면 되겠습니다.


2. 작성 방법


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
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="60dp"
        >
 
    </android.support.v7.widget.Toolbar>
 
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
 
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#303F9F"/>
         
        <View
            android:id="@+id/drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#ffffff" />
 
 
    </android.support.v4.widget.DrawerLayout>
 
 
</LinearLayout>
 
 cs

 

xml 을 보시면 ToolBar 라는 처음보는 위젯이 있습니다.

ToolBar는 액션바 5.0 버전에서 대체할수 있도록 구성이 되었습니다.

액션바는 커스텀하기 불편한부분을 ToolBar 를 이용하여 레이아웃을 구성하고

액션바화 시킬수 있습니다.


하단은 기존의 네비게이션 드로어 사용 하는 방법과 동일 합니다. 


액션바 대신 툴바를 이용했기때문에 스타일에서 액션바를 제거해 주셔야 합니다.


 

1
2
3
4
5
6
7
8
9
10
 
<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
 
</resources>
 
 cs



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
 
package com.example.woong.navigationdrawer;
 
import android.content.res.Configuration;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
 
 
public class MainActivity extends ActionBarActivity {
 
    Toolbar toolbar;
    DrawerLayout dlDrawer;
    ActionBarDrawerToggle dtToggle;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        dlDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        setSupportActionBar(toolbar);
        dtToggle = new ActionBarDrawerToggle(this, dlDrawer, R.string.app_name, R.string.app_name);
        dlDrawer.setDrawerListener(dtToggle);
    }
 
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        dtToggle.syncState();
    }
 
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        dtToggle.onConfigurationChanged(newConfig);
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (dtToggle.onOptionsItemSelected(item)) {
            return true;
            }
        return super.onOptionsItemSelected(item);
    }
}
 
 cs


기존의 네비게이션 드로어에서 바뀐 점은 ActionBarDrawerToggle 입니다. 


3.샘플


저작자표시

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

Android CardView 사용하기  (0) 2016.02.14
Android support v7 widget RecyclerView 사용하기  (6) 2016.02.14
Android VideoView Window , Service 이용 사용하기  (0) 2016.02.14
Android EditText Focus 뒤로 보내기  (0) 2016.02.14
Android Fragment 사용자가 봤을시 이벤트 사용하기  (0) 2016.02.14
공유하기 링크
'Develop/Android' Related Articles more
Comments