CoordinatorLayout과 Behavior의 관계


머트리얼 디자인 가이드 라인중 스크롤시 다양한 반응을 위한 테크닉인 Behavior라는 개념이 도입 되었습니다. 기본적으로 액션바를 확장하여 스크롤시 액션바를 줄여들게 하도록 AppBarLayout의 ScrollingViewBehavior와 스크롤시 하단으로 숨기게 하기위해 BottomSheetBehavior를 서포트라이브러리에서 제공하고 있습니다.

  • android.support.design.widget.AppBarLayout$ScrollingViewBehavior
  • android.support.design.widget.BottomSheetBehavior

Behavior를 사용하기 위해서는 CoordinatorLayout을 통해서 사용되는데, CoordinatorLayout은 자식뷰의 스크롤의 변화 상태를 다른 자식뷰들에게 전달 해주는 역할을 합니다. 좀더 쉽게 말해 NestedScrollView나 RecyclerView등에 스크롤의 상태를 판단하여 정의된 반응을 하기위한 View에 Behavior를 등록하면 됩니다.

이해를 돕기위해 안드로이드 서포트 라이브러리에서 제공해주는 Behavior를 한번 보겠습니다. NestedScrollView에 layout_behavior에 AppBarLayout$ScrollingViewBehavior가 정의가 되어있습니다. NestedScrollView의 반응에 따라 AppBarLayout이 반응됩니다.

CoordinatorLayout는 NestedScrollView가 스크롤시 layout_behavior에 정의된 레이아웃으로 스크롤 정보를 전달 하는 역할을 합니다. 그럼 AppBarLayout의 ScrollingViewBehavior가 정보를 받아서 AppBarLayout 자신을 변형하도록 하는 구조입니다.

CoordinatorLayout이 스크롤되는 것은 Behavior에 구현된 NestedScrollingParent를 통해 전달 됩니다. 즉, CoordinatorLayout는 NestedScrollingParent가 구현되어 있으며 스크롤 되는 View들은 NestedScrollingChild가 구현되어 있어야 Behavior가 전달 됩니다. 그렇기 때문에 기존의 ScrollView나 ListView는 NestedScrollingChild가 구현되어 있지 않아 Behavior를 통해 스크롤 정보전달이 되지 않습니다.

이렇게 CoordinatorLayout의 역할과 Behavior의 관계를 알고 있다면 Behavior를 커스텀해서 구현하는데 전혀 문제 없을 것입니다.




Ripple Animation

안드로이드 5.0(API 21)의 머트리얼 디자인에서 물결 터치 효과가 처음 소개 되었습니다. 터치 피드백에 대해 UI요소와 사용자간의 상호작용을 비주얼 하게 머트리얼 디자인에서는 제공합니다. 예를 들어 버튼을 터치하면 즉각 물결 효과가 표시 됩니다. 이것은 안드로이드 5.0에서 기본으로 제공됩니다.

Ripple 애니메이션은 새롭게 생긴 RippleDrawable을 이용합니다. 물결 효과는 뷰 경계에서 끝나거나 경제를 넘어 확장 할 수 있도록 구성 할 수 있습니다. 아래 스크린 샷은 터치한 위치에서 점점 퍼지면서 잔물결 효과가 버튼의 가장자리로 퍼지는 것을 보여 주고 있습니다. 터치를 끝마치게 되면 뷰는 다시 원래 모양으로 돌아갑니다. 이 모든것이 1초 내로 이루어 지지만 애니메이션 시간은 더 길거나 짧게 변경 할 수 있습니다.

 

View 클릭처리

이런 물결 효과는 안드로이드 5.0에서 기본적으로 제공하며, 아래와 같이 정의된 attr를 사용하면 된다.

 

버튼 처리

대부분의 버튼은 Drawable를 사용합니다. 일반적으로 selector에서 몇가지 상태에 맞는 리소스를 설정합니다.

안드로이드 5.0부터는 더 이상 selector를 사용하지 않아도 됩니다. ripple를 사용하면됩니다.

물결을 적용할 색을 선택하기만 하면됩니다. 안드로이드에 정의된 attr/colorControlHighlight의 기본 값이 마음에 들지 않는 경우 직접 다른색으로 변경하는것 보다 테마 스타일을 통해서 색상을 변경하면 됩니다. 테마 스타일을 변경하게 되면 colorControlHighlight가 사용되는 모든 색상들을 한번에 변경 할 수 있습니다.

처음 설명에서 가장자리로 퍼질때 경계 끝이 아닌 경계를 넘어서 확장 할 수 있다고 설명했다. 경계를 넘도록 물결 효과를 적용 하고 싶다면 attr/selectableItemBackgroundBorderless를 사용하면 된다. 큰뷰 내에 일부분의 View에서 더 잘작동 합니다.

 

레이아웃 비동기로 인플레이트하기

안드로이드 서포트 라이브러리 리비전 24부터 레이아웃을 비동기로 인플레이트 할 수 있는 클래스가 추가되었다.

AsyncLayoutInflater

어싱크 레이아웃 인플레이터를 사용하면 무거운 인플레이션이 수행되는 동안 UI스레드에 대한 응답성을 보장할 수 있다. 기존의 레이아웃 인플레이터를 사용하는 경우 UI스레드에서 인플레이션 작업이 수행되어 무거운 레이아웃의 경우 화면이 끊기거나 심한 경우 ANR이 발생된다. 이러한 문제를 보완하기 위해 AsyncLayoutInflater를 제공한다. 별도의 스레드에서 인플레이션을 수행하고 생성된 뷰를 UI스레드로 콜백 받을 수 있다.

사용방법은 레이아웃 인플레이터와 동일하게 AsyncLayoutInflater로 클래스를 생성 후 inflate() 메서드를 호출하면 된다.

AsyncLayoutInflater(@NonNull Context context)

inflate() 메서드 호출 시 인플레이트 대상의 레이아웃 리소스와 인플레이트 된 뷰를 속하게 하고 싶은 뷰 그룹과 콜백 받기 위한 OnInflateFinishedListener의 파라미터가 필요하다.

inflate(@LayoutRes int resid, @Nullable ViewGroup parent, @NonNull OnInflateFinishedListener callback)

생성이 완료되면 OnInflateFinishedListener의 onInflateFinished()를 통해 뷰를 전달된다.

AsyncLayoutInflater은 UI스레드가 아닌 별도의 스레드를 통해서 레이아웃을 인플레이트 하기 때문에 무거운 레이아웃으로 인해 화면의 응답성이 떨어지는 경우 사용할만하다. 액티비티 시작 시 레이아웃이 너무 큰 경우라도 화면의 전환 속도가 느리다면 로딩화면을 심플하게 구현 후 다음 비동기 처리를 통해 뷰를 생성하는 것도 하나의 방법이 될 수 있을 것이다.

구현 예시

빠르고 유연한 ContraintLayout

ContraintLayout?

ContraintLayout은 2016 구글 I/O를 통해 발표된 안드로이드의 새로운 레이아웃이다. 안드로이드 스튜디오(2.2 Preview2 부터)에 내장된 새로운 레이아웃 에디터(Blue Print)와 연동을 통해 이전의 레이아웃보다 쉽게 구성할 수 있다. 뷰 계층의 깊이와 복잡성을 해결하기 위해 ContraintLayout이 만들어졌으며, 앱의 UI렌더링 속도를 높일 수 있을 뿐만아니라 다양한 기기의 해상도에 최적화된 UI를 쉽게 개발 할 수도 있다. 안드로이드 서포트 라이브러리를 통해 사용가능하며 API 레벨 9부터 사용가능하다.

build.gradle에서 해당 라이브러리를 추가한다.

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'

ContraintLayout 속성

  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintLeft_toTopOf
  • layout_constraintLeft_toBottomOf
  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toTopOf
  • layout_constraintRight_toBottomOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintCenterX_toCenterX
  • layout_constraintCenterY_toCenterY
  • layout_constraintBaseline_toBaselineOf

속성을 보면 알겠지만 많은 속성들로 인해 복잡하고 뷰들 간의 관계에 대한 속성들이 대부분이다. 자식뷰들관의 관계를 연결해주는 것을 보면 RelactiveLayout와 비슷해보이지만 ContraintLayout은 자식들과 부모관의 관계에 대한 정렬및 배치 방식과 좌표가 아닌 비율을 통해 위치가 지정되는등 다양한 기능을 가졌다.

 

레이아웃 에디터

개발자라면 그동안 레이아웃을 XML편집기를 이용하여 텍스트로 작성했을 것이다. 하지만 ContraintLayout은 무수히 많은 속성과 타겟 뷰의 ID를 값으로 주는 만큼 레이아웃구조를 텍스트로 작성하거나 또는 읽을때 예전보다는 확연히 힘들것이다. 이렇게 복잡한 레이아웃을 텍스트가 아닌 새롭게 선보인 디자인 툴(Blue Print)을 이용하면 훨씬 쉽고 간단하게 작성할 수 있다.

레이아웃 에디터는 UI설계를 하는 Design과 뷰들관의 관계를 보여주는 BluePrint 화면 2개가 나타난다. 이 2개 화면을 동시에 보거나 따로보는 방법은 레이아웃 에디터의 상단 아이콘을 이용하면 전환할 수 있다.

be44fb8e685150a5565f19c94e36e954
Design 표시 아이콘: 한번 누르면 디자인 화면으로 전환 되며 또한번 누르면 BluePrint 화면을 동시에 2개가 나타난다.

a72c79e2a3bf45f38413fec30f3dac36
BluePrint 표시 아이콘: 한번 누르면 BluePrint화면으로 전환되며 또한번 누르면 디자인 화면과 동시에 2개가 나타난다.

 

레이아웃 편집시 쓰이는 아이콘

b25f376c52508c900dbab5a8bf5d68bf
BluePrint화면의 뷰들간의 관계에 대한 정보를 숨기고 보일 수 있다.

f6ea28b2afd03030cfeed10d9b3f165a
새로운 뷰를 드래그 하는 경우 다른뷰들간의 관계를 자동으로 연결할 수 있다.

3fd3b60139267dc5bd0e2abce72f6f30
관계를 정보를 모두 삭제 한다.

4d928284744c25094798de88e6cce11d
자동으로 관계에 대한 정보를 연결한다.

7c2b5cfb7453a9614c2e5507998eff27
마진값의 단위를 선택한다. 0, 8, 16dp로 전환이 가능하다.

 

레이아웃 내에서 쓰이는 툴


하나의 뷰를 나타내며 가로/세로 크기와 다른뷰와의 관계에 대해 화살표로 설정할 수 있는데 자세히 알아보자.

99a8ebe4d5ada56e4abacb2dfedc9d50
뷰 크기 변경 컨트롤: 각모서리 가장자리에 있는 네모 모양을 통해 뷰의 크기를 늘리고 줄일 수 있다.

924dedda9eb89c0ab8f6a268c4558e13
관계 설정 컨트롤: 둥글게 생긴 부분으로 다른 뷰들관의 관계를 지정할 수 있다. 가로축의 컨트롤은 다른뷰의 가로축에만 연결되며, 세로축은 다른뷰의 세로축에만 연결된다. 이미 관계가 지정되어 있을때 클릭하면 해제된다.

a6b25ad94ce53ddfedbf2d689a506b78
베이스 라인 컨트롤: 뷰의 기본 라인을 맞춘다. 베이스 라인은 뷰내의 실제 컨텐트가 배치해있는 위치이다. 해당 컨트롤을 선택하기위해서는 커서를 몇초간 위치해있어야 한다.

 

ContraintLayout에서 뷰크기 지정

뷰의 크기는 우리가 알고 있듯이 고정된크기, 뷰의 컨텐츠에 맞게 지정되는 방식, 부모크기를 따라가는 방식이 있다. 이를 UI적으로 표현하여 좀거 쉽게 설정가능하다.

e8124ddde04b2aa76e42f79582123218

7300702340c7018202fbdcf57af5b525
고정된크기: 뷰의 사이즈가 고정되어 있다.

709b28b53490f5fb5f6dcdc5380a6fb3
부모 컨텐츠 크기: MATCH_PARENT방식으로 작동한다.

af2e72fd3b0d4188c61e06da211f9835
뷰 컨텐츠 크기: 뷰의 크기에 따라 크기가 설정된다.

edcfce9f89f19fb900de367212f55c3a
수평및 수직 정렬: 부모 뷰와 자식뷰가 연결되어 있는 경우 정렬을 퍼센테이지로 설정할 수 있다. LinearLayout의 weight와 비슷하다고 생각하면 쉽다.

팁!

처음 ContraintLayout을 접해보면 생각보다 힘든 작업이 될가능성이 높다. 이것저것 버튼을 눌러서 레이아웃을 맞추기에 생각보다 번거롭기 때문이다. 그래서 한가지 팁을 소개해보겠다. 먼저 뷰들간의 관계를 연결하지 말고 배치만으로 작업을 한다. 연결 되어 있다면 모두 끊은 상태에서 배치작업을 한뒤 자동 관계아이콘을 클릭하여 연결을 자동으로 구성 후 보정작업을 하거나 간단한 경우 직접 연결해준다.

 

ContraintLayout은 알파단계로 약간의 버그가존재하며 디자인툴이 생각보다 빨리 움직이지 않고 한번씩 다운되는등의 문제점이 발생된다. 하지만 기존의 너무 깊은 레이아웃을 구조로 앱의 성능에 문제가 생긴점을 해결해줄 속 시원한 레이아웃이 될것 같다. 그리고 BluePrint로 인해 디자이너도 툴을 쉽게 익히고 사용하는데 무리가 없을것 같다. 기존의 계층구조가 복잡한 레이아웃이 있다면 조금씩 바꿔나가는 것에 추천한다.

 

Android VectorDrawables

안드로이드 롤리팝에서 Vector방식의 Drawable을 사용 할 수 있는 VectorDrawable이 추가되었다. 구글의 안드로이드 Support Library 23.2부터 안드로이드 5.0 이하 버전에도 VectorDrawable을 지원한다.

픽셀 마다 색상 정보를 가지는 Bitmap과는 다르게 Vector방식은 Path정보를 통해 그래픽을 나타나게 된다. 이렇게 선과 선의 연결 정보를 가지고 있기때문에 정확한 크기정보를 가지고 있지않아 사이즈를 임의로 늘리거나 원하는 색상으로 변경해도 Bitmap처럼 뭉게지거나 깨지지 않는 장점이 존재하게 된다. 하지만 Bitmap처럼 복잡한 그래픽을 표현 하지는 못한다.

안드로이드 5.0 발표 당시 구글이 머트리얼 디자인을 함께 발표 하였다. 이 머트리얼 디자인 가이드의 주된 요점은 요소를 “단순화” 한다는 점에서 Vector와 정확하게 일치 한다. 머트리얼 디자인 아이콘을 보더라도 Vector방식으로 모두 표현이 가능하다.

기존의 BitmapDrawble을 사용함으로 DPI별로 각각 다른 이미지 리소스를 준비 했다면 VectorDrawable을 활용 한다면 DPI별로 각각 다른 이미지를 준비 할 필요가 전혀 없어진다. 이미지 관리 갯수도 작아질 뿐만아니라 용량도 많이 줄것이다.

android

 

 

 

 

 

 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="max_width__x2F__height" display="none">
<path display="inline" d="M499.001,1v498H1V1H499.001 M500.001,0H0v500h500.001V0L500.001,0z"/>
</g>
<g id="androd">
<path fill="#9FBF3B" d="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199
L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41
c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272
c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298"/>
<path fill="#FFFFFF" d="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08
c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438"/>
<path fill="#FFFFFF" d="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08
c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438"/>
<path fill="#9FBF3B" d="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09
c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z"/>
<path fill="#9FBF3B" d="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744
c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744
c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489
H140.396z"/>
<path fill="#9FBF3B" d="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09
c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z"/>
</g>
</svg>

Vector방식에서 가장 흔히 쓰이는 SVG 형식으로 아이콘을 제작하면 된다. 하지만 안드로이드에서는 SVG형식의 확장자를 바로 사용 할 수 없으며 VectorDrawable로 변환 해야한다. 최근 안드로이드 스튜디오에서는 SVG를 Import하면 자동으로 VectorDrawable 변경해주는 기능이 추가되어 쉽게 사용 할 수 있다. 위의 안드로이드 아이콘은 Path를 통해 SVG로 제작된 아이콘이다. 안드로이드에서 사용하기위해 아래와 같이 만들 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500"
android:viewportHeight="500"
android:width="500px"
android:height="500px">
<group android:name="android">
<path
android:name="head"
android:fillColor="#9FBF3B"
android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
<path
android:name="left_eye"
android:fillColor="#FFFFFF"
android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
<path
android:name="right_eye"
android:fillColor="#FFFFFF"
android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
<path
android:name="left_arm"
android:fillColor="#9FBF3B"
android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
<path
android:name="body"
android:fillColor="#9FBF3B"
android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
<path
android:name="right_arm"
android:fillColor="#9FBF3B"
android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
</group>
</vector>

변형되는 xml은 SVG와 비슷한 구조로 부모 vector내에 path들이 존재하며 group을 통해서 path들을 묶어서 관리 할 수 있다. 이 SVG파일은 약 4kByte로 500×500의 Bitmap형식일때 25kByte 보다 약 6배이상 작은 공간을 차지한다. 사용법은 기존의 Drawable사용법과 동일하며 전혀 이질감 없이 VectorDrawable을 사용 할 수 있다.

<ImageView
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"/>

이렇게 VectorDrawable은 구글의 최신 디자인인 머트리얼 디자인을 표현하기에 가장 적합한 그래픽요소이며, 기존의 BitmapDrawable방식을 사용함으로 DPI별로 리소스를 준비해야하는 문제점은 한번에 해결 해 줄 수 있다. 안드로이드 스튜디오를 통해 자동 Import도 지원하고 있어 한결 편하게 사용 할 수 있기때문에 이제 선택 아닌 필수로 사용해볼만 하다.

 

 

Support Library “BottomSheet Behavior”

AppCompat V23.2에서 머트리얼 디자인 가이드 중 BottomSheet를 구현한  위젯이 추가 되었다. 기존의 CoordinatorLayout에 하나의 행동 방법으로 BottomSheet가 구현되었다. 또한 독립적으로 사용하기 위해 BottomSheetFragmentDialog를 이용하여 다이얼로그형태로도 사용가능하다. CoordinatorLayout의 Bottom Sheet Behavior를 어떻게 사용하는지 알아보자.

어디에 사용되는가?

BottomSheet는 이미 구글 앱을 보면 많이 적용되어 있다. 구글 맵, 플러그, 뮤직등 다양한 디자인과 형태로 사용중이다. 이는 컨텐츠를 화면 전환 없이 더 많이 빠르게 보여주는데 사용된다. 또한 특정 액션을 했을때 사용할 여러가지 액션들을 선택할때도 사용된다.

스크린샷 2016-03-16 오후 1.35.27.png

스크린샷 2016-03-16 오후 1.35.44.png

 

어떻게 사용하는가?

BottomSheet는 별도의 위젯으로 존재 하지는 않는다. CoordinatorLayout을 이용하여 자식뷰들의 행동을 구현한것으로 속성변경만으로 간단하게 BottomSheet를 사용 할 수 있다.

  • appbar_scrolling_view_behavior
    – android.support.design.widget.AppBarLayout$ScrollingViewBehavior
  • bottom_sheet_behavior
    – android.support.design.widget.BottomSheetBehavior

CoordinatorLayout을 사용해본 적이 있다면 레이아웃에 layout_behavior속성을 사용해본 적이 있을 것이다. 속성의 값으로 appbar_scrolling_view_behavior를 사용한적이 있을 것이다. 이는 툴바와 스크롤 되는 뷰간의 상호 작용을 위해 구현된 behavior이다. BottomSheet또한 CoordinatorLayout의 하나의 behavior이며, bottom_sheet_behavior를 사용하면 된다. bottom_sheet_behavior는 스트링 이름이며 값은 클래스명으로 지정되어 있으며 해당 클래스가 로드되어 수행되는 구조이다.

CoordinatorLayout 자식뷰에서 BottomSheet를 사용하고 싶은 레이아웃에 behavior속성을 주면된다.  값에는 이미 정의된 @string/bottom_sheet_behavior값을 주면된다. 정의된 값은 라이브러리에 기본적으로 포함되어 있으며, 나타나지 않는 다면 AppCompat V23.2인지 확인해봐야 한다.

BottomSheet높이는 자식뷰의 크기에 따라 변하게 되며 기본적으로 보여지게 될 높이는 behavior_peekHeight 속성을 통해 지정 할 수 있다. behavior_peekHeight[dpi] 값은 반드시 필요하며 값을 주지 않는 경우 자식뷰의 크기계산을 하지 못하기 때문에 뷰가 나타나지 않을 수 있다. 그리고 behavior_peekHeight 속성을 준 높이보다 더 최소한으로 사용자가 감출 수 있도록  behavior_hideable[true/false] 속성을 지원한다.

  • behavior_peekHeight: 기본적으로 보여질 높이
  • behavior_hideable: 사용자의 액션에 의해 완전지 감춰질지 여부

 

Listener

BottomSheet의 상태가 확장된 상태인지 완전히 숨겨져있는지등에 대한 상태를 알 수 있도록 Listener를 지원한다.

상태 값은 아래와 같이 5가지로 정의되어 있다.

  • STATE_COLLAPSED: 기본적인 상태이며, 일부분의 레이아웃만 보여지고 있는 상태. 이 높이는 behavior_peekHeight속성을 통해 변경 가능
  • STATE_DRAGGING: 드래그중인 상태
  • STATE_SETTLING: 드래그후 완전히 고정된 상태
  • STATE_EXPANDED: 확장된 상태
  • STATE_HIDDEN: 기본적으로 비활성화 상태이며, app:behavior_hideable을 사용하는 경우 완전히 숨겨져 있는 상태

상태 값을 통해 좀 더 확장된 기능을 구현할 수 있다.

이 BottomSheet는 이미 잘알려진 AndroidSlidingUpPanel과 동일하며, 좀 더 정리된 형태라고 보면된다. 머트리얼 디자인을 구현함에 있어서 CoordinatorLayout는 흔히 쓰이고 있으며 BottomSheet 또한 구현에 있어서 필수 요소가 될것이다. 특히 컨텍스트 메뉴를 BottomSheet를 통한 메뉴로 대체 되고 있는 느낌이 들며 사용성또한 좋기때문이다.

StatusBar의 아이콘 색상 변경

안드로이드 마시멜로에서 windowLightStatusBar속성이 생겼다. 상태바의 백그라운드를 임의로 조절 할 수 있기때문에 아이콘의 색상이 문제가 제기되어 왔다. 흰색배경인 경우 아이콘의 색과 동일해지기 때문에 아이콘이 보이지 않게 된다. 이를 위해 상태바의 아이콘색을 흰색배경에 맞도록 검은색으로 바꿔주는 속성이 생기게 된것이다.

기본 속성

속성적용

설정방법은 style.xml에 속성을 지정하거나 코드를 통해 가능하다.

style.xml

<item name="android:windowLightStatusBar">true</item>

Code

View view = findViewById(R.id.your_view);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
  if (view != null) {
    view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
  }
}