- 스크롤을 최상단으로 이동시키는 플로팅 버튼 기능 추가
- 플로팅 버튼은 스크롤을 아래로 내릴 때 나타나며, 스크롤이 최상단일때 사라집니다.
- 플로팅 버튼을 누르면 스크롤을 최상단으로 이동시킵니다.
- 플로팅 버튼은 나타나고 사라질때 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의 스크롤 동작에 응답하는 방식으로 동작 하게된다