[코틀린] 안드로이드 플로팅버튼 이미지 조절, 버튼 클릭시 최상단, 스크롤이벤트

 

우리가 대게 floatingactionbutton을 띄우게 되면 이러한 형식이 나오게 되어 매우 당황하게 된다.

이럴때 어떻게 해결해야할까?

가본적으로 fab에서 크기 변경을 지원하지 않기 때문에 크기를 수정할 수가 없는 현상이 발생하는 것이다.

따라서 res → value에 dimens.xml을 만들어 아래와 가티 추가를 진행해주었다

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_normal" tools:override="true">37dp</dimen>
    <dimen name="design_fab_image_size" tools:override="true">40dp</dimen>
</resources>

전체 버튼의 크기와 그 안의 사진의 크기를 설정을 진행해줍니다.

그리고 사용하려는 floatingbutton에서 app:fabSize=”normal”을 추가해주면 해결이 된다.

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:layout_marginBottom="30dp"
            android:clickable="true"
            android:src="@drawable/ic_Home_FloatingUp"
            **app:fabSize="normal"**
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/nestedScrollView"
            tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />

private fun ScrollUp(){
        binding.fabScrollUp.setOnClickListener{
            binding.nestedScrollView.fullScroll(ScrollView.FOCUS_UP
        }
    }

간단하게 이제 버튼을 클릭하게 된다면 맨위로 올리게 되는구조로 진행하였다.

버튼을 클릭하게 된다 → 올라간다 → 버튼이 사라진다.

여기까지가 기본적인 동작구조 이고 이제 우리는 스크롤뷰를 아래로 스크롤할때는 띄워지고 위로 스크롤할때는 다시 사라지는 것을 진행해보려한다.

//스크롤 리스너 구현
    private val onScrollListener = object :NestedScrollView.OnScrollChangeListener{
        var tmp :Int = 0

        override fun onScrollChange(
            v: NestedScrollView,
            scrollX: Int,
            scrollY: Int,
            oldScrollX: Int,
            oldScrollY: Int
        ) {
            binding.fabScrollUp.alpha = getAlphaForFloatingButton(scrollY)
        }
        private fun getAlphaForFloatingButton(scrollY : Int) : Float {

            val Dist = 500
            return if(scrollY > Dist){
                1f
            } else{
                0f
            }
        }
    }

이제 스크롤을 할때 특정 위치 아래로 내려가면 스크롤이 생기게 진행하였다.

하지만 스크롤을 할때 어느 특정위치에서 스크롤 버튼이 점점 커지게 나오면 좋지 않을까?

그래서 그것을 보완해서 추가를 진행하였다.

//스크롤 리스너 구현
    private val onScrollListener = object :NestedScrollView.OnScrollChangeListener{
        var tmp :Int = 0

        override fun onScrollChange(
            v: NestedScrollView,
            scrollX: Int,
            scrollY: Int,
            oldScrollX: Int,
            oldScrollY: Int
        ) {
            //binding.fabScrollUp.visibility = View.VISIBLE
            binding.fabScrollUp.alpha = getAlphaForFloatingButton(scrollY)
        }
        private fun getAlphaForFloatingButton(scrollY : Int) : Float {
            val minDist = 500
            val maxDist = 5000
            return if(scrollY < minDist){
                0f
            }else if(scrollY in minDist..maxDist){
                val fabAlpha: Float = (scrollY/5000.0).toFloat()
                fabAlpha
            }
            else{
                1f
            }
        }
    }

이제 구현한 함수들을 적어두면 끝!

//스크롤 할때 FAB 띄워지게 처리
        ScrollUp()
        binding.fabScrollUp.alpha = 0f
        binding.nestedScrollView.setOnScrollChangeListener(onScrollListener)

scrollup() → 버튼 클릭시 최상단 이동

binding.fabscrollup.alpha = 0f → 초기값 설정

binding.nestedscrollview.setonscrollchangelistener(onscrollListener) → 앞서 구현한 위치를 바탕으로한 플로팅 버튼 안보임(상단 특정위치들) / 점점 선명하게(특정위치 구간) / 완정보이게 (특정위치 아래)

 

 

스크롤을 특정위치에서 내리면 점점 선명해지면서 이제 하단부에서는 계속 선명하게 구성 완료