[android] design support library

[android] design support library

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

-

android design support library 를 통해서 navigation drawer view, floating labels for editing text, floating action button, snackbar, tabs, motion & scroll framework 등을 2.1 이상 버전에서 사용 가능하다.

-

gradle 에 아래를 추가하자!

 compile 'com.android.support:design:22.2.0'

이 녀석은 Support v4 와 AppCompat Support Libraries 에 dependency 가 있어 그것들은 자동으로 추가된다.

Navigation View

https://developer.android.com/reference/android/support/design/widget/NavigationView.html

-

Navigation View 는 navigation drawer 와 함께 쓰이며, menu resource 를 inflate 하는 것을 도와주는 녀석

-

<android.support.v4.widget.DrawerLayout

        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="match_parent"

        android:fitsSystemWindows="true">

    <!-- your content layout -->

    <android.support.design.widget.NavigationView

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            app:headerLayout="@layout/drawer_header"

            app:menu="@menu/drawer"/>

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

-

app:headerLayout 은 header part 를 구성하는 layout

app:menu 는 menu 를 구성하는 xml

-

drawer menu 는 다음과 같은 형태로 구성된다.

<group android:checkableBehavior="single">

    <item

        android:id="@+id/navigation_item_1"

        android:checked="true"

        android:icon="@drawable/ic_android"

        android:title="@string/navigation_item_1"/>

    <item

        android:id="@+id/navigation_item_2"

        android:icon="@drawable/ic_android"

        android:title="@string/navigation_item_2"/>

</group>

android:checked=“true” 로 마킹되면 highlight 되어 나온다.

-

subheader 를 두려면 아래와 같이 메뉴를 구성한다.

<item

    android:id="@+id/navigation_subheader"

    android:title="@string/navigation_subheader">

    <menu>

        <item

            android:id="@+id/navigation_sub_item_1"

            android:icon="@drawable/ic_android"

            android:title="@string/navigation_sub_item_1"/>

        <item

            android:id="@+id/navigation_sub_item_2"

            android:icon="@drawable/ic_android"

            android:title="@string/navigation_sub_item_2"/>

    </menu>

</item>

-

item 이 선택되었을 때는 OnNavigationItemSelectedListener 를 통해 callback 을 받을 수 있다.

이 callback 은 MenuItem 이 인자로 전달된다.

setNavigationItemSelectedListener() 를 통해 Listener 를 설정한다.

Floating labels for editing text

https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

-

TextInputLayout 을 통해서 hint text 를 floating label 로 만들 수 있다.

-

아래와 같이 wrap 을 하기만 하면 자동으로 hint 적용된다.

<android.support.design.widget.TextInputLayout

        android:id="@+id/fNameLayout"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/imageView"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="10dp">

        <EditText

            android:id="@+id/fName"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:ems="10"

            android:hint="First Name"/>

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

Floating Action Button

-

floating action button 은 theme 에 설정된 colorAccent 값을 색상으로 해서 일관된 design 을 적용할 수 있도록 해준다.

-

fabSize=“mini” 를 통해서 작은 FAB 를 제공할 수도 있다.

-

FAB 는 ImageView 를 상속한 녀석으로 android:src 나 setImageDrawable() 등을 통해서 이미지를 설정할 수도 있다.

Snackbar

https://www.google.com/design/spec/components/snackbars-toasts.html

-

가벼운 피드백을 주는 목적이라면 snackbar 를 쓰기에 좋다.

snackbar 는 바닥부분에서 나오는 녀석으로 text 와 optional single action 을 갖는다.

-

이 녀석은 toast 처럼 약간의 시간이 지나면 자동적으로 사라진다.

덧붙여 유저가 swipe 로 제거할 수도 있다.

-

single action 을 줄 수도 있고, swipe 에 대한 처리도 할 필요가 있다면,

snackbar 가 역시나 최적의 선택이다.

사용법도 toast 와 매우 비슷하다.

Snackbar

  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)

  .setAction(R.string.snackbar_action, myOnClickListener)

  .show(); // Don’t forget to show!

Tabs

https://material.io/guidelines/components/tabs.html

-

TabLayout 을 사용하여 쉽게 구현할 수 있다.

같은 넓이를 가진 fixed width tab 을 만들 수 있고, tab 부분이  scroll 되도록도 할 수 있다.

-

아래 코드처럼 코드로 넣을 수 있다.

TabLayout tabLayout = …;

tabLayout.addTab(tabLayout.newTab().setText(“Tab 1”));

-

만약 ViewPager 와 함께 사용된다면, PagerAdapter 의 getPageTitle 과 setupWithViewPager 함수들을 이용하여 둘을 쉽게 연동시킬 수 있다.

CoordinatorLayout, motion, and scrolling

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

-

CoordinatorLayout 은 기존의 단순 touch event 를 넘어서는 추가적인 control 을 제공한다.

어떤 녀석인지 감을 잡고 싶다면 https://material.io/guidelines/patterns/scrolling-techniques.html 를 참조

-

이 녀석은 FrameLayout 을 상속한 녀석으로, ref doc 에 따라면 “super-powered” 란다.

-

Behaviors 를 설정함으로서 single parent 와 child 들에 대한 interaction 들을 쉽게 정의할 수 있다.

-

FloatingActionButton 을 CoordinatorLayout 의 child 로 설정해 놓고,

CoordinatorLayout 을 Snackbar.make() 에 전달하면

snackbar 가 FAB 를 위로 자동으로 밀어주며 등장한다.

다른 코드는 필요 없다. android 3.0 이상이라면

-

layout_anchor 나 layout_anchorGravity 를 이용하여 floating 되어 있는 view 들에 대해 다른 view 들과 상대성을 갖게 할 수 있다.

-

AppBarLayout, Toolbar 등을 이용하면 손쉽게 scroll 에 동기화하여 tab, toolbar 등을 control 할 수 있다.

( https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html )

<android.support.design.widget.CoordinatorLayout

        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="match_parent">

     <! -- Your Scrollable View -->

    <android.support.v7.widget.RecyclerView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content">

   <android.support.v7.widget.Toolbar

                  ...

                  app:layout_scrollFlags="scroll|enterAlways">

        <android.support.design.widget.TabLayout

                  ...

                  app:layout_scrollFlags="scroll|enterAlways">

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

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

위와 같이 layout 을 구성하면, RecyclerView 가 scroll 이 되면 AppBarLayout 이 respond 를 하며 children 으로 들어간 녀석들의 scroll flag 들을 참조하여 action 을 한다.

-

AppBarLayout의 child 에 들어갈 수 있는 flag 속성은..

app:layout_scrollFlags 를 통해 설정하며, 아래 값들이 | operation 되어 assign 될 수 있다.

scroll : scroll 되어 off screen 될 수 있다. 이 flag 를 사용하지 않으면 top 에 pin 된다.

enterAlways : downward scroll 이 visible 하게 만들어준다. quick return pattern 이 사용된다.

enterAlwaysCollapsed : minHeight 가 view 에 설정되어 있다면 minimum height 로 등장을 한다. 그리고 scroll 이 top 에 달했을 때에만 full height 로 작동한다.

exitUntilCollapsed : view 가 exit 하기 전에 collapsed ( minHeight ) 상태로 존재하게 한다.

scroll 을 사용하는 모든 view 들은 이를 사용하지 않는 view 들보다 먼저 선언되어야 한다.

그래야 fixed element 들 뒤로 자연스럽게 사라진다.

-

AppBarLayout 에 Toolbar 를 바로 추가해주면 enterAlwaysCollapsed | exitUntilCollapsed scroll flag 가 setting 된다.

그래서 detail control 이 어려울 수 있는데 이 때는 CollapsingToolBarLayout 을 사용해주면 된다.

https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html

<android.support.design.widget.AppBarLayout

        android:layout_height="192dp"

        android:layout_width="match_parent">

    <android.support.design.widget.CollapsingToolbarLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar

                android:layout_height="?attr/actionBarSize"

                android:layout_width="match_parent"

                app:layout_collapseMode="pin"/>

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

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

app:layout_collapseMode=“pin” 을 주어 Toolbar 가 top 에 pin 되도록 할 수 있다.

CollapsingToolbarLayout 을 사용하면 tollbar 가 fully visible  한 상황에서 자연스럽게 글씨도 커진다.

반대로 collapse 할 때 작아진다.

-

app:layout_collapseMode=“parallax” 로도 사용 가능하고,

app:layout_collapseParallaxMultiplier=“0.7” 등으로 parallax multiplier 값을 설정할 수도 있다.

이 값들은 app:contentScrim=“?attr/colorPrimary” 값을 CollapsingToolbarLayout 에 넣었을 때 아주 훌륭하게 작동한다.

collapse 될 때 알아서 잘 scrim 시켜준다. ( scrim 은 빛을 연하게 만드는 작업 )

-

CoordinatorLayout 은 Coordinator.Behavior 와 연동하여 child view 에 대한 더 많은 touch control, gesture control 들을 할 수 있다.

이에 대한 callback 은 onDependentViewChanged() 를 통해 전달된다.

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior.html

CoodinatorLayout.DefaultBehavior(YourView.Behavior.class) annotation 을 통해 정의할 수 있고,

app:layout_behavior=“com.example.app.YourView$Behavior” 를 통해서도 설정할 수 있다.

addtab, Android, android.support.design.widget.CoordinatorLayout, android.support.design.widget.NavigationView, android.support.design.widget.TextInputLayout, android.support.v4.widget.DrawerLayout, android.support.v7.widget.RecyclerView, android.support.v7.widget.Toolbar, annotation, AppBarLayout, appcompat, behaviors, Callback, checkablebehavior, Checked, child, coloraccent, contentScrim, control, Coordinator.Behavior, CoordinatorLayout, DefaultBehavior, design support library, downwardscroll, drawerlayout, enterAlways, enteralwayscollapsed, exitUntilCollapsed, fabsize, fitsSystemWindows, fixed width tab, Floating, floating action button, floating label, floating labels for editing text, FloatingActionButton, frameLayout, Gesture Control, getPageTitle, gradle, Group, headerlayout, highlit, hint text, Icon, ImageView, inflate, Interaction, ITEM, layout_anchor, layout_anchorGravity, layout_behavior, layout_collapseMode, layout_collapseParallaxMultiplier, layout_scrollFlags, make, Menu, menu resource, menuitem, minheight, MINI, minimumheight, motion, navigation drawer, navigation drawer view, navigation view, navigationview, newtab, onDependentViewChanged, OnNavigationItemSelectedListener, or operation, parallax, PIN, quick return pattern, scroll, scroll framework, setaction, setimagedrawable, setNavigationItemSelectedListener, setupwithviewpager, Show, Single, single action, single parent, snackbar, snackbar.length_long, src, super-powered, support v4, swipe, TabLayout, tabs, TextInputLayout, Title, Toast, Toolbar, touch control, touch event, ViewPager, [android] design support library, 가벼운 피드백, 상대성