[Android] CoordinatorLayout, AppBarLayout, FloatingActionButton에 대해 알아보자.

ToolBar, DrawerLayout, NavigationView를 구현하기 위해 열심히 알아보던 중 CoordinatorLayout, AppBarLayout, FloatingActionButton에 대해 알게되었고, 각각 어떤 기능이 있는지 공부했다.

 

 

 

1. CoordinatorLayout

생동감 있는 애플리케이션을 구성할 수 있도록 도와주는 기본 Activity 템플릿에 포함된 레이아웃이다.

그렇다면 CoordinatorLayout에 대한 여러 사실에 대해 알아보자.

• FrameLayout에 기반을 둔 Layout. FrameLayout을 상속받아 구현한다.
• 애플리케이션 화면의 최상위 뷰로서 사용된다. (상단이 아닌 상위임에 유의! AppBar 또는 FloatingActionButton)
• 자식 뷰들과의 상호작용을 위한 컨테이너로 사용된다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

Corrdinatorlayout은 스크롤 이벤트에 따라 앱바에 변화를 줄 때 활용할 수 있다.

ex) 스크롤시 앱바의 크기가 늘어나거나 줄어드는 화면, 리사이클러뷰 등을 스크롤할 떄 위로 스크롤시 앱바가 사라지고 아래로 스크롤시 앱바가 다시 나타나는 반응형 화면 등

 

안드로이드 공식 개발 문서 : CoordinatorLayout 가이드

https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout

 

---

 

2. AppBarLayout

Android에서 기본으로 제공하는 ActionBar 또는 Toolbar를 이용하여 화면 상단에 AppBar를 구현할 때 사용된다.

단순히 Toolbar만 사용하여도 무관하지만, AppBarLayout을 사용하면 Activity 상단을 더욱 효과적으로 활용할 수 있다.

 

기본적인 구조는 AppBarLayout 태그 아래에 Toolbar 태그를 넣는다. Toolbar를 AppBarLayout으로 감싼 형태이다.

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeName">

        <androidx.appcompat.widget.Toolbar />

    </com.google.android.material.appbar.AppBarLayout>

 

그렇다면  Toolbar만 사용하지 않고 AppBarLayout을 사용했을 때의 장점은 무엇일까?

• Toolbar, Image, TabLayout 등 화면의 상단을 더 넓게 구성할 수 있다!
• CoordinatorLayout과 함께 사용하면 AppBar를 확대하거나 축소하는 이벤트를 작성할 수 있다.

CoordinatorLayout은 자식 뷰와 상호작용하여 여러 이벤트 효과를 보일 수 있다. 여기서 자식으로 AppBarLayout을 사용하면 스크롤시 AppBar가 나타났다가, 사라졌다 하는 등의 이벤트를 넣을 수 있는 것이다.

 

AppBarLayout은 LinearLayout을 상속받아 구현되어 있으며 Vertical 속성만 지원한다. 앱바의 특성상 스크롤 이벤트를 지원해야하며, CoordinatorLayout의 direct child로서 상하 스크롤 이벤트에 반응하기 위함인 것 같다.

 

---

 

3. FloatingActionButton

FloatingActionButton(플로팅 작업 버튼)은 앱 UI의 기본 작업을 트리거하는 원형 버튼이다.

라고 안드로이드 공식 개발 문서에 적혀있는데 말이 너무 어렵다. 나한텐 그냥 화면 가장 위에 떠있는 버튼인걸.

 

줄여서 FAB라고 부르는 FloatingActionButton은 레이아웃 문서(XML)에 추가하여 사용할 수 있다.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginEnd="@dimen/fab_margin"
    android:layout_marginBottom="16dp"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 

 

위치, 마진, ID 등은 사용자가 원하는대로 커스텀하여 사용하면 된다. 버튼을 클릭했을 때의 이벤트를 정의하고 싶다면 Java 코드에서 setOnClickListener 함수를 구현해야 한다.

 

안드로이드 공식 개발 문서 : 플로팅 작업 버튼 추가하기

https://developer.android.com/guide/topics/ui/floating-action-button?hl=ko

플로팅 작업 버튼 추가  |  Android 개발자  |  Android Developers

 

머티리얼 디자인 가이드라인 : 플로팅 작업 버튼 디자인하기

https://material.io/components/buttons-floating-action-button#usage

Material Design