[Kotlin] Bottom Sheet 만들기

Kakao Map을 이용해서 카카오지도 어플을 조금 모방해서 만들어보기 위해 이것저것 알아보다

Bottom Sheet를 알게 되어서 적용해 보았다.

​

Bottom Sheet를 사용하기 위해서는 coordinatorLayout을 사용해야한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

 <!--  BottomSheet  -->
    <LinearLayout
        android:id="@+id/ll_main_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#66A9EC"
        app:behavior_hideable="true"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
       <!--여기에 리사이클러 뷰 등 레이아웃을 채우면 된다.-->

    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

레이아웃은 이렇게 자면 되고 아주 간단하다.

​

사실 찾아보니 쉬운방법을 찾아서 넣었을 뿐 다른 방법들도 아주 많았다.

​

이렇게만 하면 기본적으로 터치로 위 아래로 올렸다 내렸다가 가능한대 코드로도 확장과 숨기기가 가능하다.

​

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initViews()
    }
 
    private fun initViews() {
        rv_main_bottom_sheet.adapter = TodoRecyclerAdapter {
            Toast.makeText(this, "$it clicked", Toast.LENGTH_SHORT).show()
            hideBottomSheet()
        }.apply {
            updateDataSet(sample)
        }
        tv_main_bottom_sheet_title.setOnClickListener {
            showBottomSheet()
        }
    }
 
    private fun showBottomSheet() {
        BottomSheetBehavior.from(ll_main_bottom_sheet).let {
            if (it.state != BottomSheetBehavior.STATE_EXPANDED) {
                it.state = BottomSheetBehavior.STATE_EXPANDED
            }
        }
    }
 
    private fun hideBottomSheet() {
        BottomSheetBehavior.from(ll_main_bottom_sheet).let {
            if (it.state != BottomSheetBehavior.STATE_COLLAPSED) {
                it.state = BottomSheetBehavior.STATE_COLLAPSED
            }
        }
    }
    private val sample = IntRange(0, 20).map { "Job $it" }.toList()
}

참고

https://jhpop.tistory.com/150

BottomSheet

 

---

또 다른 예제

https://thdev.tech/androiddev/2016/12/11/Android-BottomSheet-Intro/

Android BottomSheet 사용하기 |

 

​