Bottom Sheet Behavior include BottomNavigationView (BottomNavigationView always visible on screen)

[siliconprime-thanhduc]

Bottom Sheet Behavior là 1 thành phần được thiết kế theo phong cách material design, được thêm vào thư viện design support library trong phiên bản 23.2. Bottom sheet là 1 cửa sổ đơn giản hiển thị từ dưới đáy của màn hình và có thể được sử dụng để hiện ra nhiều thông tin hơn cho người dùng. Trong tài liệu design thì đây được gọi là Back Drop

Trong các til trước mình đã note về việc sử dụng full expended và half expended

VD: Full Expended ta set height = 800 ta cho tỷ lệ halfExpandedRatio là : 0.7 vậy khi ở trạng thái half expended sẽ là: 560

Phần view còn lại sẽ ẩn đi và ko thấy được. Chính lúc này ta có 1 problem: design của chúng ta nhận được có 1 BottomNavigationView nằm ở bottom, và design muốn rằng cho dù khi ở full expended hay half expended thì cái BottomNavigationView này luôn show, trong khi trong vd trên ta đã biết cái phần view nằm ở phía bottom sẽ được hide đi.

Sau khi đọc nát cái doc biết rằng Bottom Sheet Behavior nó không support được chuyện này. Thì ta giải quyết nó theo 1 cách không thể đơn giản hơn: cho BottomNavigationView nằm ngoài Bottom Sheet Behavior. Ta có thể thấy cách làm này trong ứng dụng Google Map, BottomNavigationView luôn luôn appear, Bottom Sheet Behavior nằm phía trên.

Nhưng ....

Tôi muốn khi Bottom Sheet Behavior collapse thì cái bottom kia hide đi, khi nào expand thì hiện ra. Rất may Bottom Sheet Behavior support cái callback sẽ hỗ trợ 2 interface khi Bottom Sheet Behavior thay đổi trạng thái hoặc khi đang slide. Ta xử lý logic cho việc ẩn hiện thế là xong :D

bottomSheetBehavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
            override fun onSlide(bottomSheet: View, slideOffset: Float) {
                setVisibilityNavigation(getVisibilityNavigationView(slideOffset, navigation.visibility, isDetail))
            }

            override fun onStateChanged(@NonNull bottomSheet: View, newState: Int) {

            }
        })