기존에 Android에서 제공하는 DrawerLayout은 아래와 같이 기존 화면 위에 올라오는 방식이다.
(출처: http://frogermcs.github.io/InstaMaterial-concept-part-7-navigation-drawer/)
(출처: http://www.journaldev.com/12648/navigationview-android)
하지만 오늘 소개하고자 하는 Library는 DrawerLayout과는 반대로 기존 화면이 움직이는 방식이다.
일단 말로만 들으면 무슨소리인지 모르니 아래 그림을 보자.
(출처: https://github.com/yarolegovich/SlidingRootNav)
어떤가요? 너무 신기하지 않나요?
저는 매우 신기해서 제 앱에도 넣었습니다.
자 이제 SlidingRootNav가 어떤건지 알았으니 사용해봅시다.
app Module build.gradle파일에 dependency를 추가해줍니다.
dependencies {
compile 'com.yarolegovich:sliding-root-nav:1.0.2'
}
샘플을 위헤 Activity에 들어갈 layout과 SlidingRootNav로 사용할 layout을 준비합니다.
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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:background="@color/colorAccent"
android:orientation="vertical"
tools:context="com.googry.googryslidingrootnav.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World!"
android:textColor="@android:color/white"
android:textSize="30dp"/>
</FrameLayout>
sliding_root_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:gravity="center"
android:text="Sliding\nRoot\nNav"
android:textColor="@android:color/black"
android:textSize="30dp"/>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new SlidingRootNavBuilder(this)
.withMenuLayout(R.layout.sliding_root_nav)
.inject();
}
}
이렇게 하면 기본적인것은 끝이 납니다.
아주아주 기본예제인 것이죠.
하지만 지금은 햄버거 버튼도 없고 우리가 위에서 봤던 Toolbar가 같이 움직이는 그림은 아닙니다.
(뭐야 그럼 어떻게 해야하는거야?)
그럼 이제 툴바도 같이 움직이게 해봅시다.
일단 기본 테마에서 ActionBar를 제거하고 Title도 제거해줍시다.
parent를 Theme.AppCompat.Light.NoActionBar로 변경해도 상관없습니다.
(액션바만 없어져라!)
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
그 다음에는 main_activity.xml에 Toolbar를 추가해줍시다.
<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/colorAccent"
android:orientation="vertical"
tools:context="com.googry.googryslidingrootnav.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World!"
android:textColor="@android:color/white"
android:textSize="30dp"/>
</FrameLayout>
</LinearLayout>
MainActivity.java에서 Toolbar를 연결해줍시다.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
new SlidingRootNavBuilder(this)
.withMenuLayout(R.layout.sliding_root_nav)
.inject();
}
}
이제는 Toolbar도 같이 움직입니다!
(아직 햄버거 버튼이 없잖아...)
이제 햄버거 버튼도 넣어봅시다.
햄버거 버튼은 SlidingRootNavBuilder에서 withToolbarMenuToggle()을 추가해주면 됩니다.
참 쉽죠?
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(toolbar);
new SlidingRootNavBuilder(this)
.withMenuLayout(R.layout.sliding_root_nav)
.withToolbarMenuToggle(toolbar)
.inject();
}
}
Toolbar에 title과 햄버거 버튼 색깔은 아래코드를 추가하면 바꿀수 있습니다.
툴바 타이틀 색변경
toolbar.setTitleTextColor(Color.WHITE);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(toolbar);
툴바 햄버거 색 변경
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowNoTitle">true</item>
<item name="colorButtonNormal">@android:color/white</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
제가 만들고 있는 코인원헬퍼에는 이런식으로 적용했습니다.
위에서 작성한 코드들은 아래 깃허브에서 다운받아보실 수 있습니다.
https://github.com/sjjeong/GoogrySlidingRootNav
SlidingRootNav에 대한 더 많은 정보는 아래 깃허브 페이지에서 확인 할 수 있습니다.
https://github.com/yarolegovich/SlidingRootNav
스타도 꼭 눌러줍시다!
