D.S

kunny.github.io

Android Support Library 23.2 - BottomSheetBehavior (1)

Android Support Library 23.2 - BottomSheetBehavior (1) Home • About Android Support Library 23.2 - BottomSheetBehavior (1) 안드로이드 서포트 라이브러리 23.2 버전에 Bottom Sheets 컴포넌트를 쉽게 구현할 수 있는 BottomSheetsBehavior가 추가되었습니다. Bottom Sheets는 화면의 아래쪽에 표시되며, 최초에는 내용의 일부만 보여지지만 위쪽 방향으로 쓸어 올려 전체 내용을 표시하는 컴포넌트입니다. 대표적인 사용 예는 다음과 같습니다. ButtomSheetsBehavior는 CoordinatorLayout 내 자식 요소들의 동작을 정의할 때 사용하는 Behavior 클래스를 상속한 클래스 이므로 CoordinatorLayout 내에 포함되기만 한다면 뷰의 종류와 상관 없이 사용할 수 있습니다. 프로젝트 생성 및 dependency 설정 서포트 라이브러리를 사용하여, Bottom Sheets 컴포넌트를 포함하는 간단한 예제를 작성해 보겠습니다. 프로젝트를 생성한 후, 애플리케이션 모둘 (일반적으로 app)의 빌드스크립트를 열어 다음과 같이 dependency를 설정합니다. [app/build.gradle] android { ... 생략 ... } dependencies { // 다른 dependency 항목들... // 아래 두 항목을 추가합니다. compile 'com.android.support:appcompat-v7:23.2.0' compile 'com.android.support:design:23.2.0' } 레이아웃 작성 구글맵과 유사한 형태로 레이아웃을 구성해 보았습니다. 크게 Bottom Sheet 부분과 회색 배경으로 구성되며, Bottom Sheet 부분은 제목 및 내용을 표시하기 위한 요소들과 FAB(Floating Action Bar)로 구성되어 있습니다. [activity_main.xml] <?xml version="1.0" encoding="utf-8"?> <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" android:background="#BBBBBB"> <LinearLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="vertical" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" app:behavior_peekHeight="72dp" app:behavior_hideable="false" app:layout_behavior="@string/bottom_sheet_behavior"> <TextView android:layout_width="wrap_content" android:layout_height="72dp" android:ellipsize="end" android:gravity="center_vertical" android:lines="1" android:maxLines="1" android:text="@string/ipsum_short" android:textAppearance="?android:attr/textAppearanceMedium" /> <RatingBar style="?android:attr/ratingBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:rating="3.5" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/ipsum_long" /> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="16dp" android:layout_marginEnd="16dp" android:src="@mipmap/ic_directions" app:layout_anchor="@+id/bottom_sheet" app:layout_anchorGravity="top|right" /> </android.support.design.widget.CoordinatorLayout> Bottom Sheet를 구성하는 뷰(@+id/bottom_sheet)는 app:layout_behavior로 @string/bottom_sheet_behavior를 지정했습니다. 이 문자열 리소스는 서포트 라이브러리에 포함되어 있으므로 별도로 추가할 필요가 없습니다. 만약, 이 리소스를 찾을 수 없다고 표시된다면 프로젝트 dependency 설정이 제대로 되지 않은 것이므로 해당 설정을 다시 한 번 확인해야 합니다. Layout Behavior외에, BottomSheetsBehavior에서 사용하는 값들을 추가로 지정해야 합니다. XML 속성 이름 타입 설명 기본값 app:behavior_peekHeight dimension (dp, px 등) Bottom Sheet이 최초로 화면에 표시될 때, 즉 전체 내용이 표시되지 않는 접힌 상태일 때 뷰의 높이값 0px app:behavior_hideable boolean 화면을 아래로 쓸어 내려서 Bottom Sheet을 완전히 숨길 수 있는지 여부를 설정 false 실행 및 결과 확인 액티비티에 위에서 작성한 레이아웃을 지정한 후 실행하면 다음과 같이 Bottom Sheet 컴포넌트가 화면에 표시됩니다. 최초로 표시될 때 위에서 지정한 수치(72dp) 만큼 뷰가 표시되고, 위로 스크롤 하면 나머지 부분이 모두 표시됩니다. 자바 코드를 통해 조작하기 XML 속성 뿐 아니라 자바 코드에서도 BottomSheetsBehavior의 동작 형태를 조작할 수 있습니다. BottomSheetsBehavior.from(View) 메서드를 사용하여 인자로 받은 뷰에 포함된 BottomSheetsBehavior의 인스턴스를 얻을 수 있으며, 다음 메서드를 사용하여 peekHeight와 hideable 속성을 조절할 수 있습니다. Method 관련 XML 속성 설명 setPeekHeight(int) app:behavior_peekHeight Peek Height을 설정합니다. 단위는 픽셀(px)을 사용합니다. setHideable(boolean) app:behavior_hideable app:behavior_hideable 항목 설명 참고 위의 레이아웃에서 설정한 내용을 그대로 자바 코드로 옮기면 다음과 같습니다. BottomSheetBehavior behavior = BottomSheetBehavior.from(llBottomSheet); behavior.setPeekHeight((int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 72.f, getResources().getDisplayMetrics())); behavior.setHideable(false); 본 포스트에서 사용한 예제 프로젝트의 전체 소스 코드는 아래에서 확인 가능합니다. GitHub: kunny/blog_samples Written by 김태호 (Taeho Kim) 안드로이드와 오픈소스, 코틀린(Kotlin)에 관심이 많습니다. 현재 Google Developer Groups(GDG) Korea Android 운영자와 Google Developer Expert(GDE)로 활동하고 있습니다. kunny Androidhuman Published 28 Feb 2016 Supported by Proudly published with Jekyll and Amplify You should subscribe to my feed. All content copyright 김태호 (Taeho Kim) © 2017 All rights reserved.