1. 스크롤 상단 이동!
- 스크롤을 최상단으로 이동시키는 플로팅 버튼 기능 추가
- 플로팅 버튼은 스크롤을 아래로 내릴 때 나타나며, 스크롤이 최상단일때 사라집니다.
- 플로팅 버튼을 누르면 스크롤을 최상단으로 이동시킵니다.
- 플로팅 버튼은 나타나고 사라질때 fade 효과가 있습니다.
- 플로팅 버튼을 클릭하면(pressed) 아이콘 색이 변경됩니다.
플로팅버튼
플로팅 작업 버튼 추가 | Android 개발자 | Android Developers
[Android/Kotlin] CoordinatorLayout 사용하기 (1) - 기초
플로팅버튼에 이미지를 넣었는데 안보임
```kotlin
app:fabSize="normal"
app:fabCustomSize="32dp"
app:maxImageSize="12dp"
```
FAB(플로팅액션버튼)의 사이즈와 이미지의 사이즈를 정해줘야함
FAB의 디자인 특성은 기본적으로 wrap_content로 아이콘의 크기에 맞춰 배경이 정해지는데
이 레이아웃의 너비를 바꾸면 배경을 바뀌지만 아이콘의 크기는 그대로가됨
그렇기 땜에 fab의 사이즈와 이미지의 사이즈를 조정해줌
→ 그럼 이미지 사이즈만 조정하고 배경은 레이아웃으로 조정하면안됨?
ㅇㅇ 안됨 열심히 원인을 찾아도 이유를 잘 모르겠지만 FAB의 레이아웃의 크기를 조절해도 처음 wrap_content의 중심을 기준으로 이미지가 생성됨
이미지를 작게한다해도 레이아웃의 크기를 조절하면 이상한 위치에 이미지가 출력되기 때문에 레이아웃이아닌 fab의 CustomSize를 조절해야함
→ 이미지 크기를 왜 줄임? 그냥 scaleType바꾸면 안됨?
ㅇㅇ 안됨 , 스케일타입은 이미지 뷰나 그 하위 클래스만 사용가능한데 FAB은 이미지뷰를 상속하지 않기 때문에 가능하지 않다
- 플로팅버튼의 로직 수행이 안됨(리사이클러뷰 스크롤 리스너가 안됨)
NestedScrollView 로 리사이클러뷰를 감싸고 있으면 리사이클러뷰 스크롤 리스너가 제대로 작동하지 않습니다
스크롤되는건 리사이클러뷰가아니라 nestedScrollView기 때문에 스크롤을 해도 인식하지 않아요
nestedScrollView로 스크롤리스너를 사용해서 해결가능 합니다
- 내가 쓴 코드
private fun setFab() { binding.nvMainScroll.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> if (scrollY == 0) { // 최상단 binding.faMainFab.visibility = View.GONE } else{ // 그 외 binding.faMainFab.visibility = View.VISIBLE } }) onClickFab() } - 플로팅 버튼이 리사이클러뷰를 전부 내려야 보임
혹시 플로팅 버튼도 네스티드 스크롤뷰 안에 있나요
그렇다면 밖으로 꺼내고 ConstraintLayout안에 NestedScrollView 와 FAB을 나눠 넣어보세요
FAB을 화면 하단에 위치시키면 네스티드 스크롤뷰는 스크롤 되지만 FAB은 스크롤 되지않기 떄문에 화면에 고정이 가능합니다
- 리사이클러뷰 스크롤 리스너를 사용하면서 플로팅버튼 수행하기
리사이클러뷰를 NestedScrollView 로 감싸고 있다면
레이아웃을 CoordinatorLayout으로 사용하면 해결이 가능
바꾸면 무슨차인대?
NestedScrollView안에 RecyclerView를 넣는 경우 네스티드 스크롤뷰의 스크롤동작에 리사이클러뷰가 동기화되서 아이템이 한번에 로드됨
그럼 리사이클러뷰의 장점인 대량의 데이터를 효율적으로 처리하는 능력을 잃어버리는것
하지만 CoordinatorLayout 을 사용하면 리사이클러뷰의 장점을 살릴 수 있게된다
코디네이터 레이아웃은 애초에 앱바-리사이클러뷰(or네스티드뷰)-플로팅액션버튼 구성이 기본이라
과제에서 요구하는 앱바처리 플로팅버튼 처리에 가장 적합한 레이아웃이라 생각이 듬
- 코디네이터 레이아웃으로 바꿨는데 앱바랑 리사이클러뷰랑 겹침
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rc_main_post"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />layout_behavior를 사용하자
****CoordinatorLayout의 자식 뷰들이 서로 상호 작용하도록 할 때 유용하게 사용되는대
"@string/appbar_scrolling_view_behavior"를 사용하면, 해당 뷰는 AppBarLayout의 스크롤 동작에 응답하는 방식으로 동작 하게된다
