向上滑动底部 Sheet

Question

我正在尝试制作底部滑动 Sheet，如下图所示（首先显示我正在尝试制作的内容，其次显示我现在拥有的内容）。我尝试了不同的方法并环顾了 SO 和网络，看看是否有任何关于此的文档，但似乎并不多。我在下面的代码是我能使它相似的最接近的代码，但有些地方似乎不正确。任何有关创建此代码或任何有用的代码的帮助 material 将不胜感激。

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
            val sheet = DemoBottomSheetFragment()
            sheet.show(supportFragmentManager, "DemoBottomSheetFragment")
    }
}

class DemoBottomSheetFragment : SuperBottomSheetFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        return inflater.inflate(R.layout.fragment_demo_sheet, container, false)
    }

    override fun getCornerRadius() = context!!.resources.getDimension(R.dimen.demo_sheet_rounded_corner)

}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_demo_sheet

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/show_sheet"
        android:layout_width="wrap_content"
        android:layout_height="1000dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

使用您想要的任何约束自定义布局并传递布局行为

   app:layout_behavior="app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior""

在 class 文件中使用

使用全局变量

   private var mBottomSheetBehavior: BottomSheetBehavior<*>? = null

在视图中创建

    mBottomSheetBehavior = BottomSheetBehavior.from(view);
     mBottomSheetBehavior?.peekHeight = 0
    setBottomSheetAndCallBackBottomSheetBehaviour();
    bottomSheetCollapsed();
    bottomSheet?.visibility = View.VISIBLE

并且在创建名为方法的视图并传递布局 ID 时，窥视高度用于第一次隐藏视图。

/**
 * set bottom sheet behavior and state
 */
private fun setBottomSheetAndCallBackBottomSheetBehaviour() {


    mBottomSheetBehavior?.state = BottomSheetBehavior.STATE_HIDDEN

    //callback
    mBottomSheetBehavior?.setBottomSheetCallback(object :
        BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                bottomSheetCollapsed()
            }
        }

        override fun onSlide(bottomSheet: View, slideOffset: Float) {}
    })
}

并使用以下方法进行展开和折叠。

 private fun bottomSheetExpand() {
    mBottomSheetBehavior?.state = BottomSheetBehavior.STATE_EXPANDED
}

private fun bottomSheetCollapsed() {
    mBottomSheetBehavior?.state = BottomSheetBehavior.STATE_COLLAPSED
}

点击查看使用

  fun isExpendCollapse(){
     if (mBottomSheetBehavior?.state == BottomSheetBehavior.STATE_COLLAPSED) {
                bottomSheetExpand()
            } else {
                bottomSheetCollapsed()
            }
}

检查 xml 文件 CoordinatorLayout 是 bottomsheet 行为所必需的

 <android.support.design.widget.CoordinatorLayout
    android:id="@+id/bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:clipToPadding="true"
    android:visibility="gone"
    app:behavior_hideable="true"
    app:behavior_peekHeight="0dp"
    android:layout_alignParentBottom="true"

    >



<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@color/colorAccent"
    app:layout_behavior="app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
   />
</android.support.design.widget.CoordinatorLayout>

您可以约束布局、线性或任何视图而不是视图。并且我已经使用相对布局（父布局）设置坐标布局，您可以根据需要使用。

Answer 2

你应该这样做：

activity_main.xml

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

    <include layout="@layout/content_main" />

    <include layout="@layout/bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnFeedback"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:paddingHorizontal="30dp"
        android:text="Feedback" />

</RelativeLayout>

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="444dp"
    android:background="#F0F0F1"
    android:descendantFocusability="beforeDescendants"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    android:padding="10dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="120dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <ImageView
    android:id="@+id/imageClose"
    android:layout_width="34dp"
    android:layout_height="34dp"
    android:layout_gravity="right"
    android:src="@drawable/btn_close" />

    //Whatever controls you want to show in bottomsheet should be put here

</LinearLayout>

MainActivity.kt

class MainActivity : AppCompatActivity(), View.OnClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        init()
    }

    private fun init() {

        btnFeedback.setOnClickListener(this)

        val bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet)
        bottomSheetBehavior.setBottomSheetCallback(object :
            BottomSheetBehavior.BottomSheetCallback() {
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                if (newState == BottomSheetBehavior.STATE_DRAGGING) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED)
                }
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {
            }
        })
    }

    override fun onClick(v: View?) {

        when (v!!.id) {
            R.id.btnFeedback -> {
                val bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet)
                if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED)

                } else {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)
                }
            }

            R.id.imageClose -> {
                val bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet)
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)
            }
        }
    }
}

向上滑动底部 Sheet

Slide Up Bottom Sheet

android

android-fragments

kotlin

bottom-sheet