20230828 스크롤 상단 이동

- 스크롤을 최상단으로 이동시키는 플로팅 버튼 기능 추가
- 플로팅 버튼은 스크롤을 아래로 내릴 때 나타나며, 스크롤이 최상단일때 사라집니다.
- 플로팅 버튼을 누르면 스크롤을 최상단으로 이동시킵니다.
- 플로팅 버튼은 나타나고 사라질때 fade 효과가 있습니다.
- 플로팅 버튼을 클릭하면(pressed) 아이콘 색이 변경됩니다.

1. 스크롤을 최상단으로 이동시키는 플로팅 버튼 기능 추가

@activity_main.xml

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="48dp"
        android:clickable="true"
        android:backgroundTint="@color/floating_button_color_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/baseline_keyboard_double_arrow_up_24"/>

2. 플로팅 버튼은 스크롤을 아래로 내릴 때 나타나며, 스크롤이 최상단일때 사라집니다.

@MainActivity.kt

val floatingbtn = binding.floatingbtn

binding.recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener() {
                override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                    super.onScrollStateChanged(recyclerView, newState)
                    if(!binding.recyclerView.canScrollVertically(-1) && newState == RecyclerView.SCROLL_STATE_IDLE) {
                     		binding.floatingbtn.visibility = View.GONE
                        isTop = true
                        } else if(isTop) {
                            floatingbtn.visibility = View.VISIBLE
                        isTop = false
                    }
                }
            })

canScrollVertically(-1) : 수직 리스트, 최상단일 경우 false 값 return
canScrollVertically(1) : 수직 리스트, 최하단일 경우 false 값 return
SCROLL_STATE_IDLE : 현재 스크롤을 하지 않는 상태
onScrolled 는 스크롤이 되는 중일 때 호출된다.
onScrollStateChanged 는 스크롤이 끝났을 때, 호출된다.
new state : 새상태 

3. 플로팅 버튼은 나타나고 사라질때 fade 효과가 있습니다.

val floatingbtn = binding.floatingbtn
            val fadeIn = AlphaAnimation(0f, 1f).apply { duration = 300 }
            val fadeOut = AlphaAnimation(1f, 0f).apply { duration = 300 }
            var isTop = true

            // fadeIn, fadeOut
            binding.recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener() {
                override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                    super.onScrollStateChanged(recyclerView, newState)
                    if(!binding.recyclerView.canScrollVertically(-1) && newState == RecyclerView.SCROLL_STATE_IDLE) {
                        binding.floatingbtn.startAnimation(fadeOut)
                            binding.floatingbtn.visibility = View.GONE
                        isTop = true
                        } else if(isTop) {
                            floatingbtn.visibility = View.VISIBLE
                        floatingbtn.startAnimation(fadeIn)
                        isTop = false
                    }
                }
            })

AlphaAnimation : 투명도를 조절하는 함수 
duration : 딜레이 
startAnimatiion : 원하는 애니메이션을 지정해주면 애니메이션이 시작
visibilty : floatingButton이 사라지고 나타나게 함 

4. 플로팅 버튼을 누르면 스크롤을 최상단으로 이동시킵니다.

// 클릭 시 최상단 이동
            floatingbtn.setOnClickListener {
                binding.recyclerView.smoothScrollToPosition(0)
            }

5. 플로팅 버튼을 클릭하면(pressed) 아이콘 색이 변경됩니다.

	res 하위폴더에 color 폴더를 만들어준 후 xml(seletor) 이란 파일을 만들어준다. 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
		// 눌렸을 때 주황색으로 
    <item android:color="@color/orange" android:state_pressed="true" />
    	// 기본 상태는 하얀색 
    <item android:color="@color/white" android:state_enabled="true" />

</selector>

activity_main.xml 로 뛰어가서 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="48dp"
        android:clickable="true"
        
 		//backgroundTint로 컬러색 지정	       
        android:backgroundTint="@color/floating_button_color_selector" 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/baseline_keyboard_double_arrow_up_24"
        />