안드로이드 디자인 서포트 라이브러리

출처 - http://googledevkr.blogspot.kr/

 

 

게시자: Ian Lake, 디벨로퍼 어드보케(Developer Advocate)

 

안드로이드 5.0 Lollipop은 사상 가장 중요한 안드로이드 릴리즈 중 하나로 손꼽힙니다. 가장 큰 이유 중 하나는 머티리얼 디자인의 도입입니다. 이것은 안드로이드 환경 전체를 새로 고친 것이나 다름 없는 새 디자입니다. 머티리얼 디자인을 채택하기 위한 좋은 시작점으로 Google의 상세 사양을 이용하면 좋지만, 저희도 이것이 개발자 여러분에게는 까다로운 과제가 될 수 있다는 점을 잘 알고 있습니다. 특히 이전 버전과의 호환성 문제를 걱정하는 개발자 여러분에게는 더욱 그렇겠죠. 이번에 저희는 새로운 안드로이드 디자인 서포트 라이브러리를 활용해 수많은 중요한 머티리얼 디자인 구성 요소를 모든 개발자 여러분과 안드로이드 2.1 이상의 기기에 사용할 수 있도록 하였습니다. 여기에서는 탐색창 보기, 텍스트 편집용 플로팅 레이블, 플로팅 액션 버튼, 스낵바(snackbar), 탭과 이 모든 것을 함께 묶어줄 동작 및 스크롤 프레임워크를 만나보실 수 있습니다.

 

네비게이션 뷰(Navigation View)

네비게이션 드로어(Navigation Drawer)은 앱 내에서 ID와 탐색에 사용하는 중요한 초점이 될 수 있습니다. 여기에서 디자인의 일관성이 유지되는지 여부에 따라 여러분의 앱이 탐색하기 얼마나 쉬운지(특히 처음 사용하는 사용자의 경우)를 판가름하는 중요한 차이가 생깁니다. NavigationView는 네비게이션 드로어에 필요한 프레임워크를 제공하면서 메뉴 리소스를 통해 네비게이션 항목을 확대시키는 기능까지 제공하여 이 과정을 쉽게 만들어줍니다.

NavigationView는 DrawerLayout의 드로어 콘텐츠 보기로 사용하면 됩니다. 이때 사용하는 레이아웃의 예는 다음과 같습니다.

 

<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>

 

NavigationView: app:headerLayout의 두 가지 특성이 헤더에 쓰이는 (옵션) 레이아웃을 제어하는 것을 알 수 있습니다. app:menu가 네비게이션 항목에 맞춰 확대된 메뉴 리소스입니다(이것은 런타임에 업데이트될 수 있습니다). NavigationView가 개발자 대신 상태 표시줄에 대한 스크림 보호 문제를 자동으로 처리하여 NavigationView가 API21 이상의 기기에서 적절하게 상태 표시줄과 상호 작용하도록 보장합니다.

가장 단순한 형태의 드로어 메뉴는 확인 가능한 메뉴 항목은 다음과 같습니다.

 

<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>

 

확인된 항목은 네비게이션 드로어에 강조 표시되어 나타나고, 이로써 사용자가 현재 선택된 탐색 항목이 무엇인지 확실히 알 수 있습니다.

메뉴에 서브헤더를 사용하여 항목 그룹을 구분할 수도 있습니다.

 

<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>

 

선택한 항목에 대한 콜백을 받으려면 OnNavigationItemSelectedListener를 설정하면 됩니다. 이때 setNavigationItemSelectedListener()를 사용하세요. 이렇게 하면 클릭한 MenuItem이 개발자에게 제공되어 개발자가 선택 이벤트를 처리, 확인된 상태 변경, 새 콘텐츠 로드, 프로그램에 따라 창 닫기, 이외에도 원하는 작업을 모두 수행할 수 있습니다.

 

텍스트 편집을 위한 플로팅 레이블

간단한 EditText도 머티리얼 디자인 버전에서는 개선된 모습을 선보입니다. EditText 하나만 사용하면 입력된 첫 글자 다음의 힌트를 숨기게 되지만, 이제 이것을 TextInputLayout에 래핑할 수 있습니다. 그러면 힌트 텍스트가 플로팅 레이블 형태로 EditText 위에 나타나 사용자가 입력하고 있는 내용의 맥락을 놓칠 염려가 전혀 없습니다.

 

힌트를 표시하는 것 외에도 setError()를 호출하여 EditText 아래에 오류 메시지를 표시할 수 있습니다.

 

플로팅 액션 버튼

플로팅 액션 버튼은 인터페이스의 기본 액션을 나타내는 동그란 버튼입니다. 디자인 라이브러리의 FloatingActionButton을 사용하면 개발자 테마에서 가져온 colorAccent를 사용한 기본 색상을 지정하여 한 가지 일관된 구현을 제공합니다.

보통 크기의 플로팅 액션 버튼 외에도 초소형(fabSize="mini") 크기를 지원합니다. 이는 다른 구성 요소들과  시각적으로 어우러지는 것이 중요한 디자인의 경우에 이상적입니다. FloatingActionButton은 ImageView를 확장하기 때문에 android:src 또는 setImageDrawable()과 같은 메서드 중 아무 것이나 사용하면 FloatingActionButton 내에 표시된 아이콘을 제어할 수 있습니다.

 

스낵바(snackbar)

어떤 작업에 관해 가볍고 신속한 피드백을 제공하려 한다면 스낵바를 사용해볼 절호의 기회입니다. 스낵바는 화면 맨 밑에 표시되며, 한 개의 옵션 동작을 수반한 텍스트가 담겨 있는 형태입니다. 주어진 시간이 지나 시간이 초과되면 화면에서 애니메이션 효과가 꺼집니다. 시간 초과가 되기 전에 사용자가 스와이프해서 없앨 수도 있습니다.

 

 

스낵바를 스와이프나 다른 액션 등, 스낵바와 함께 상호 작용할 기능을 추가하면 이것은 알림보다 훨씬 강력한 기능을 발휘합니다. API도 간단합니다.

 

Snackbar

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

 .setAction(R.string.snackbar_action, myOnClickListener)

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

 

보시다시피 View를 make() - Snackbar에 대한 첫 매개변수로 사용하여 이것이 스낵바 뷰에 적절한 상위를 찾으려 시도합니다. 이렇게 해서 스낵바가 화면 하단에 고정되도록 합니다.

 

탭

앱 내에서 여러 가지 뷰를 전환할 때 탭을 사용하는 것은 익숙한 개념입니다. 앱 내에서 콘텐츠를 여러 가지 서로 다른 그룹(예: 여러 가지 음악 장르 등)으로 지정하여 정리하는 최상위 네비게이션 패턴(top level navigation pattern)도 마찬가지입니다.

디자인 라이브러리의 TabLayout은 고정된 탭과 스크롤 가능한 두 가지 탭 모두를 구현합니다. 고정된 탭에서는 모든 탭이 보기의 너비를 골고루 똑같이 나눠 쓰는 반면 스크롤 가능한 탭에서는 탭의 크기가 균일하지 않고 가로 방향으로 스크롤할 수 있습니다. 탭은 다음과 같은 프로그램 방식으로 추가할 수 있습니다.

 

TabLayout tabLayout = ...;

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

 

하지만, 여러 탭 사이에서 가로 방향으로 페이지를 넘기는 데 ViewPager를 사용하는 경우, PagerAdapter의 getPageTitle()에서 직접 탭을 만든 다음 setupWithViewPager()를 사용해 이 둘을 연결하면 됩니다. 이렇게 하면 탭 선택 이벤트가 ViewPager를 업데이트하고 페이지 변경이 선택한 탭을 업데이트하도록 할 수 있습니다.

CoordinatorLayout, 동작 및 스크롤링

개성이 뚜렷한 비주얼만이 머티리얼 디자인의 전부는 아닙니다. 머티리얼 디자인으로 만든 앱을 훌륭한 앱으로 만드는 또 다른 중요한 부분으로 액션도 빼놓을 수 없죠. 머티리얼 디자인은 터치 시 일어나는 잔물결과 여러가지 시각적 요소를 고려한 동작 전환 등 여러 액션들이 있습니다. 디자인 라이브러리에서는 CoordinatorLayout을 소개합니다. 이것은 여러 개의 하위 보기 사이에서 터치 이벤트에 한 차원 높은 통제력을 부여하는 레이아웃으로, 디자인 라이브러리에는 이것을 유용하게 활용할 수 있는 구성 요소가 아주 많습니다.

 

CoordinatorLayout과 플로팅 액션 버튼

이에 대한 아주 좋은 예를 들어볼까요? FloatingActionButton을 CoordinatorLayout의 하위로 추가한 다음 그 CoordinatorLayout을 Snackbar.make()에 전달하는 경우를 생각해 봅시다. FloatingActionButton은 이 스낵바를 플로팅 액션 버튼 위에 표시하는 대신 CoordinatorLayout이 제공한 추가 콜백을 활용하여, 스낵바가 안드로이드 3.0 이상의 기기에서 애니메이션으로 표시될 때에는 자동으로 위쪽으로 이동하고 애니메이션 효과가 사라질 때에는 원래 위치로 되돌아가게 합니다. 추가 코드도 필요하지 않습니다.

 

CoordinatorLayout은 이외에도 layout_anchor 특성을 제공합니다. 이것은 layout_anchorGravity와 마찬가지로 플로팅 뷰를 배치하는 데 사용할 수 있습니다.

 

CoordinatorLayout과 앱 바

CoordinatorLayout의 또 다른 주요한 사용 사례에는 앱 바(이전 이름은 '작업 모음')와 스크롤링 기법이 있습니다. 여러분은 이미 레이아웃에서 도구 모음(Tool bar)을 사용하고 있을 수도 있습니다만 이것을 사용하면 앱의 대표적인 부분이 레이아웃의 나머지 부분과 어울리도록 외관을 사용자 지정하고 통합하는 것이 훨씬 간단해 집니다. 디자인 라이브러리는 이 기능을 한 단계 더 발전시켰습니다. AppBarLayout을 사용하면 도구 모음와 기타 보기(예를 들면 TabLayout이 제공한 탭)가 ScrollingViewBehavior로 표시된 형제 보기에서 일어난 스크롤 이벤트에 반응하도록 할 수 있습니다. 따라서 다음과 같은 레이아웃을 만들 수 있습니다.

 

<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>

 

이제 사용자가 RecyclerView를 스크롤하면 AppBarLayout이 그러한 이벤트에 응답할 수 있습니다. 이때 하위의 스크롤 플래그를 사용해 진입(화면 안으로 스크롤)과 종료(화면 밖으로 스크롤) 방식을 제어하는 방법을 사용합니다. 플래그의 예는 다음과 같습니다.

• scroll: 이 플래그를 화면 밖으로 스크롤해 내보내고자 하는 모든 보기에 설정해야 합니다. 이 플래그를 사용하지 않는 보기는 화면 맨 위에 고정된 상태로 유지되기 때문입니다.
• enterAlways: 이 플래그를 사용하면 아래쪽 방향으로 스크롤할 때마다 이 보기가 표시되며 '빠른 반환' 패턴을 활성화하게 됩니다.
• enterAlwaysCollapsed: 보기가 minHeight를 선언한 경우 개발자가 이 플래그를 사용하면, 보기가 최소 높이에서만 진입하게 되고(즉, '축소됨' 상태로만) 스크롤링 보기가 맨 위에 도달했을 때만 전체 높이로 다시 확장됩니다.
• exitUntilCollapsed: 이 플래그를 사용하면 보기가 '축소됨'(minHeight) 크기에 이를 때까지 밖으로 스크롤되다가 종료됩니다.

 

한 가지 참고 사항: scroll 플래그를 사용하는 모든 보기는 이 플래그를 사용하지 않는 보기보다 먼저 선언해야 합니다. 이렇게 해야 모든 보기가 맨 위쪽부터 종료되고 고정된 요소를 남겨두도록 보장할 수 있습니다.

 

도구 모음 축소하기

도구 모음을 AppBarLayout에 직접 추가하면 enterAlwaysCollapsed 및 exitUntilCollapsed 스크롤 플래그에 액세스할 수 있지만, 여러 가지 요소가 축소 작업에 대해 어떻게 반응할지에 대한 상세한 제어 능력은 갖출 수 없습니다. 그렇게 하려면 CollapsingToolbarLayout을 사용하면 됩니다.

<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>

 

이 설정에서는 CollapsingToolbarLayout의 app:layout_collapseMode="pin"을 사용하여 보기가 축소되는 동안 도구 모음 자체는 화면 맨 위에 고정된 상태로 유지되도록 합니다. 이보다 더 좋은 점은, CollapsingToolbarLayout과 도구 모음을 함께 사용하는 경우 레이아웃이 완전히 표시되면 제목이 자동으로 더 크게 나타났다가 레이아웃이 축소되면서 제목도 기본 크기로 전환된다는 것입니다. 이와 같은 경우 도구 모음 자체에서보다는 CollapsingToolbarLayout에서 setTitle()을 호출하는 것이 좋다는 점을 알아두세요.

 

 

뷰를 고정하는 것 외에도 app:layout_collapseMode="parallax"(및, 선택 사항으로 시차 승수 설정에 app:layout_collapseParallaxMultiplier="0.7")를 사용하여 시차 스크롤링을 구현할 수도 있습니다(예: CollapsingToolbarLayout 내에 형제 ImageView). 이 사용 사례는 CollapsingToolbarLayout에 대해 app:contentScrim="?attr/colorPrimary" 특성을 사용하는 방안과 근사하게 짝을 이루어, 보기가 축소될 때 완벽한 화상 물림 재단 스크림을 추가합니다.

 

CoordinatorLayout과 사용자 지정 보기

한 가지 유의해야 할 점은 CoordinatorLayout에는 FloatingActionButton 또는 AppBarLayout 작업에 대한 타고난 이해도 따위는 없다는 것입니다. 이것은 그저 추가 API를 Coordinator.Behavior 형태로 제공할 뿐입니다. 이 때문에 하위 보기가 터치 이벤트와 동작(gesture)를 좀 더 잘 제어할 수 있고, 서로 간의 종속성을 선언하고 onDependentViewChanged()를 통해 콜백을 받을 수 있도록 합니다.

뷰가 기본 동작을 선언하려면 CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) 주석을 사용하거나 이를 app:layout_behavior="com.example.app.YourView$Behavior" 특성으로 레이아웃 파일에 설정하면 됩니다. 이 프레임워크를 사용하면 어느 보기라도 CoordinatorLayout과 통합할 수 있습니다.

 

지금 바로 이용할 수 있습니다!

디자인 라이브러리는 지금 바로 이용할 수 있습니다. SDK Manager에서 안드로이드 서포트 리포지토리를 꼭 업데이트하세요. 그리고 이제 단 한 가지 디펜던시(dependency)로 디자인 라이브러리를 사용하기 시작하면 됩니다.

 

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

 

디자인 라이브러리는 Support v4 및 AppCompat 서포트 라이브러리에 의존하므로 디자인 라이브러리 종속성을 추가하면 이들도 자동으로 포함된다는 점을 유의하세요. 이와 같은 새 위젯을 안드로이드 Studio 레이아웃 편집기의 디자인 보기에서도 사용할 수 있도록 설정(CustomView 아래에서 찾을 수 있음)하여 이런 새 구성 요소 몇 가지를 미리 보는 데 좀 더 쉬운 방법을 제공해 드리고자 합니다.

디자인 라이브러리, AppCompat와 안드로이드 서포트 라이브러리 모두 모던하고 근사한 안드로이드 앱을 구축하는 데 필요한 기본 구성 요소를 제공해 주는 중요한 도구입니다. 이로써 모든 것을 맨 처음부터 구축할 필요가 없습니다