최종 팀프로젝트 TIL(7)

🐱 With All My Animal 🐶

💡 [ 7일차 10/18일 ] 💡

📌 circle FAB

• 라이브러리를 사용해서 하는 방법과 위치를 지정해주는 방법이 있었는데 라이브러리를 사용하려고 보니 9년전에 업데이트가 끝난 거라서 구현에 어려움이 있었다.

• 그래서 constraintLayout으로 위치를 하나씩 맞춰서 구현했다.

[fab_layout] =>
floatingActionButton을 ExtendedFloatingActionButton으로 한 이유는
icon과 text를 둘 다 넣을 수 있는 방법이었기 때문이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fabFrameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="80dp"
    >

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab_hospital"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/blue"
        app:icon="@drawable/main_hospital"
        android:text="병원"
        android:textSize="16sp"
        android:textAlignment="center"
        app:iconSize="40dp"
        android:fontFamily="@font/cafe24"
        android:visibility="invisible"
        app:borderWidth="0dp"
        android:layout_marginStart="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab_pet"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/blue"
        app:icon="@drawable/main_pet_toy"
        android:text="용품"
        android:textSize="16sp"
        android:fontFamily="@font/cafe24"
        android:visibility="invisible"
        android:textAlignment="center"
        app:iconSize="40dp"
        app:borderWidth="0dp"
        android:layout_marginStart="75dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="80dp"
        app:layout_constraintEnd_toStartOf="@id/fab_behavior"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab_behavior"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/blue"
        app:icon="@drawable/main_behavior"
        android:text="행동"
        android:textSize="16sp"
        android:fontFamily="@font/cafe24"
        android:visibility="invisible"
        android:textAlignment="center"
        app:iconSize="40dp"
        app:borderWidth="0dp"
        android:layout_marginBottom="80dp"
        android:layout_marginEnd="75dp"
        android:layout_marginStart="5dp"
        app:layout_constraintStart_toEndOf="@id/fab_pet"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab_daily"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/blue"
        app:icon="@drawable/main_daily"
        android:text="일상"
        android:textSize="16sp"
        android:fontFamily="@font/cafe24"
        android:visibility="invisible"
        android:textAlignment="center"
        app:iconSize="40dp"
        app:borderWidth="0dp"
        android:layout_marginEnd="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

[activity_main] =>
< include layout="@layout/fab_layout/>은 activity_main에 특정 layout을 불러온다는 의미이다.

<?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"
    android:background="@color/white"
    tools:context="com.kittyandpuppy.withallmyanimal.MainActivity">

    <FrameLayout
        android:id="@+id/main_framelayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        >
    </FrameLayout>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        >

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/main_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/pink"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="10dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bn_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginEnd="13dp"
                app:backgroundTint="@android:color/transparent"
                app:elevation="0dp"
                app:menu="@menu/main_menu"/>
        </com.google.android.material.bottomappbar.BottomAppBar>

        <!--    아이콘 색 바꾸는 코드 -->
        <!--    app:itemIconTint="#E1B771"-->

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/main_fab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:src="@drawable/pet_like"
            app:backgroundTint="@color/blue"
            app:borderWidth="0dp"
            app:maxImageSize="40dp"
            app:fabCustomSize="80dp"
            app:layout_anchor="@id/main_app_bar"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.NavigationBarView.ActiveIndicator" />

        <include layout="@layout/fab_layout"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

[anim] =>
1) fab_anim (visible이 될 때 나타나는 효과)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0"/>

</set>

2) hide_fab_anim (invisible이 될 때 나타나는 효과)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0"/>

</set>

[MainActivity] => anim 적용

    private fun setupFloatingActionButton() {
        binding.mainFab.setOnClickListener {
            if (fabBinding.fabHospital.visibility == View.INVISIBLE) {
                showFAB(fabBinding.fabHospital)
                showFAB(fabBinding.fabPet)
                showFAB(fabBinding.fabBehavior)
                showFAB(fabBinding.fabDaily)
            } else {
                hideFAB(fabBinding.fabHospital)
                hideFAB(fabBinding.fabPet)
                hideFAB(fabBinding.fabBehavior)
                hideFAB(fabBinding.fabDaily)
            }
        }
    }
    
    
    ...
    
    
 private fun showFAB(fab: ExtendedFloatingActionButton) {
        val showAnim = AnimationUtils.loadAnimation(this, R.anim.fab_anim)
        fab.startAnimation(showAnim)
        fab.visibility = View.VISIBLE
    }

    private fun hideFAB(fab: ExtendedFloatingActionButton) {
        val hideAnim = AnimationUtils.loadAnimation(this, R.anim.hide_fab_anim)
        fab.startAnimation(hideAnim)
        fab.visibility = View.INVISIBLE
    }

---

[참고한 사이트]
https://www.sitepoint.com/animating-android-floating-action-button/ (JAVA 코드)