[Kotlin][Android] Floating Action Menu 만들기

안녕하세요~

 

오늘은 FloatingActionButton을 사용한 메뉴 기능을 만들어 보겠습니다.

 

---

Floating Action Button(fab)

 

앱을 사용하다 보면 위와 같은 버튼을 보신적이 있으실 텐데요, 위 버튼을 FloatingActionButton(fab)이라고 합니다. 화면이 움직이더라도 fab 버튼은 화면의 최상위에 고정되어 떠있는 것을 보실 수 있습니다.

그럼 fab 버튼을 이용하여 메뉴를 구현하는 예제를 스틱코드를 이용해서 만들어 보도록 하겠습니다.

 

 

---

 

 레이아웃 작성

▶ activity_main.xml

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stick Code"
        android:textStyle="bold"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabCamera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_photo_camera_24"
        app:fabSize="mini"
        app:layout_constraintTop_toTopOf="@id/fabMain"
        app:layout_constraintBottom_toBottomOf="@id/fabMain"
        app:layout_constraintStart_toStartOf="@id/fabMain"
        app:layout_constraintEnd_toEndOf="@id/fabMain"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_create_24"
        app:fabSize="mini"
        app:layout_constraintTop_toTopOf="@id/fabMain"
        app:layout_constraintBottom_toBottomOf="@id/fabMain"
        app:layout_constraintStart_toStartOf="@id/fabMain"
        app:layout_constraintEnd_toEndOf="@id/fabMain"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="24dp"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

우측 하단에 fab 버튼을 배치하고 버튼을 눌렀을때, 나올 서브 fab 버튼을 위쪽으로 배치했습니다. 

다음은 fab 버튼을 사용할때 많이 사용하는 옵션입니다.

 

 

• src : fab 버튼의 아이콘을 지정할 수 있습니다.

 

• backgroundTint : fab 버튼의 색상을 변경 할 수 있습니다.

    - 기본적으로 fab 버튼의 색상은 colors.xml에 정의된 colorAccent의 색상으로 지정되어있습니다. 

 

 

• fabSize : fab버튼의 사이즈를 선택할 수 있습니다.

    - "mini", "nomal", "auto"의 옵션이 있습니다

 

 

• borderWidth : fab 버튼의 테두리 두께를 지정합니다.

 

 

애니메이션 구현

▶ MainActivity.kt

스틱코드를 사용하여 fab 에니메션 기능 세팅

 

스틱코드를 사용하여, fab 버튼에 애니메이션 기능을 세팅하는 코드를 불러와 줍니다.

 

 

 

클릭 이벤트 구현

▶ MainActivity.kt

fab 버튼 클릭 이벤트

fab 버튼을 클릭했을때, 정상적으로 동작하는지 확인하기 위해 토스트 메시지를 띄워주는 기능을 추가했습니다.

 

아래는 MainActivity.kt 의 전체 코드입니다.

 

package com.example.floatingactionbutton

import android.animation.ObjectAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    private var isFabOpen = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 플로팅 버튼 클릭시 에니메이션 동작 기능
        fabMain.setOnClickListener {
            toggleFab()
        }

        // 플로팅 버튼 클릭 이벤트 - 카메라
        fabCamera.setOnClickListener {
            Toast.makeText(this, "카메라 버튼 클릭!", Toast.LENGTH_SHORT).show()
        }

        // 플로팅 버튼 클릭 이벤트 - 수정
        fabEdit.setOnClickListener {
            Toast.makeText(this, "수정 버튼 클릭!", Toast.LENGTH_SHORT).show()
        }
    }


    /***
     *  플로팅 액션 버튼 클릭시 동작하는 애니메이션 효과 세팅
     */
    private fun toggleFab() {
        Toast.makeText(this, "메인 플로팅 버튼 클릭 : $isFabOpen", Toast.LENGTH_SHORT).show()

        // 플로팅 액션 버튼 닫기 - 열려있는 플로팅 버튼 집어넣는 애니메이션 세팅
        if (isFabOpen) {
            ObjectAnimator.ofFloat(fabCamera, "translationY", 0f).apply { start() }
            ObjectAnimator.ofFloat(fabEdit, "translationY", 0f).apply { start() }
            fabMain.setImageResource(R.drawable.ic_baseline_add_24)

        // 플로팅 액션 버튼 열기 - 닫혀있는 플로팅 버튼 꺼내는 애니메이션 세팅
        } else {
            ObjectAnimator.ofFloat(fabCamera, "translationY", -200f).apply { start() }
            ObjectAnimator.ofFloat(fabEdit, "translationY", -400f).apply { start() }
            fabMain.setImageResource(R.drawable.ic_baseline_clear_24)
        }

        isFabOpen = !isFabOpen

    }
}

 

 

테스트

 

동작 테스트

 

fab 버튼을 클릭시 서브 fab 버튼이 잘 나오고 정상적으로 클릭 이벤트가 동작하는 것을 확인할 수 있었습니다.

이것으로 fab 버튼을 이용하여 메뉴를 보여주는 기능을 만들고 테스트해 보았습니다.

---

스틱코드에서 이 포스팅에 쓰인 코드를 확인해 보시려면 아래 링크를 확인해 보세요.

stickode.com/detail.html?no=2030

스틱코드