한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
안드로이드 디자인 서포트 라이브러리
2015년 6월 30일 화요일
게시자:
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와 안드로이드 서포트 라이브러리 모두 모던하고 근사한 안드로이드 앱을 구축하는 데 필요한 기본 구성 요소를 제공해 주는 중요한 도구입니다. 이로써 모든 것을 맨 처음부터 구축할 필요가 없습니다.
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed