티스토리 뷰

android NavigationDrawer 파헤치기(레이아웃 설명)

안녕하세요. 오늘은 NavigationDrawerLayout 을 수정하면서, 동시에 들어가는 레이아웃을 파헤쳐보도록 하겠습니다.

xml

activity_main2.xml

app_bar_main2.xml

content_main2.xml

nav_header_main2.xml


java

Main2Activity


이런식으로 Activity를 만들때 NavigationDrawer을 선택하시면 만들어지는 화면들입니다.


1. 먼저 activity_main2 부터 확인하시죠

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">


    <!--이곳에서 상단에 헤더를 추가해줍니다! -->
<include
layout="@layout/app_bar_main2"
android:layout_width="match_parent"
android:layout_height="match_parent" />


<!--여기서는 좌측에서 나오는 네비게이션 뷰가 추가됩니다. -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main2"
app:menu="@menu/activity_main2_drawer" />


        <!--headerLayout : 상단 메뉴 -->

<!--menu : 상단아래 메뉴들입니다. -->


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

activity_main 은 전체화면을 다 포함하고있으며, 좌측에 메뉴를 만들어주는 뷰가되겠습니다.


NavigationView 에들어간

app:headerLayout 과 app:menu 를 지우시고 저안에 레이아웃을 직접적으로 설정도 가능합니다.



2. nav_header_main2 를 살펴봅시다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
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:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@android:drawable/sym_def_app_icon" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />

</LinearLayout>

하나의 뷰입니다. 그래서 이곳을 수정하셔두 상관없으며, 위의 app:header 대신에 직접 뷰를 구현하셔두됩니다.



3.app_bar_main2 을 살펴봅시다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<!--이곳이 상단 메뉴들이 보여지는곳이며/ -->
</android.support.design.widget.AppBarLayout>


<!--이곳이 메인컨텐츠 -->
<include layout="@layout/content_main2" />


<!--우측하단에 플로팅버튼입니다. -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />

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

크게설명 드릴것이없네요.. 


4. content_main2 메인화면입니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/app_bar_main2">

</RelativeLayout>

실질적으로 보여지는 메인화면 내용입니다. 이곳에서 레이아웃을 추가하시면 메인에보여질 레이아웃이 보여집니다.


5. Main2Activity 입니다!! 이곳만 이해하신다면 맘대로 커스텀이 가능합니다~


package null;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class Main2Activity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); //툴바를 찾아주고~
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); //툴바에들어간 플로팅버튼을 찾아줍니다.


fab.setOnClickListener(new View.OnClickListener() { //플로팅버튼 클릭시 해당되는 기능
@Override
public void onClick(View view) {
Snackbar.
make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction(
"Action", null).show();
}
})
;


DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); //열리는 레이아웃
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); //drawer 에 포함된 NavigationView

navigationView.setNavigationItemSelectedListener(this);
}

//뒤로가기버튼 클릭시 옵션
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout)
findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.
START);
} else {
super.onBackPressed();
}
}

//우측상단에 옵션메뉴를 생성시킵니다.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main2, menu);
return true;
}

//옵션메뉴에 들어있는 아이템을 선택시
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

//네비게이션뷰에 들어간 메뉴아이템들을 선택시
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {

}
else if (id == R.id.nav_slideshow) {

}
else if (id == R.id.nav_manage) {

}
else if (id == R.id.nav_share) {

}
else if (id == R.id.nav_send) {

}

DrawerLayout drawer = (DrawerLayout)
findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}


위의설명을보시고 차근차근 이해하시면됩니다 !! 

Recent Comments