Как создать модальный нижний лист с пользовательским макетом? - PullRequest
Новая
       8

Как создать модальный нижний лист с пользовательским макетом?

0 голосов
/ 20 сентября 2019

Итак, у меня есть Лист материала, который расширяется, чтобы увеличить время на таймере.Я хотел бы создать прозрачный фон и заблокировать фон, пока лист не будет распущен.Я понимаю, что модальный нижний лист будет делать это, но я не могу понять, как установить пользовательский макет.

Вот мой макет для нижнего листа: 

<?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:id="@+id/bottom_sheet_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_sheet_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="23dp"
        android:layout_gravity="end"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/bottom_sheet_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/time_sheet_text"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="60 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="50 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="40 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="30 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn4"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="20 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="10 minutes"
            />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/time_sheet_remaining_text"
            style="@style/TextAppearance.MyTheme.Headline6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:includeFontPadding="false"
            android:text="-- : -- : --"
            android:textAlignment="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn6"
            app:layout_constraintEnd_toStartOf="@id/close_time_sheet_button"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/close_time_sheet_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/time_sheet_remaining_text"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn6"
            style="@style/MyTheme.Button.FloatingActionButton.Close"
            app:srcCompat="@drawable/ic_close_black_24dp"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Это называется внутри моего основного макета активности: 

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <fragment
                android:id="@+id/bottom_sheet_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:name="com.ds.base.fragments.BottomTimeSheet"
                tools:layout="@layout/bottom_sheet"/>

        </FrameLayout>

Это мой класс нижнего листа: 

class BottomTimeSheet: BottomSheetDialogFragment() {

    private lateinit var bottomSheetLayout: ConstraintLayout
    private lateinit var bottomSheetBehavior: BottomSheetBehavior<ConstraintLayout>
    lateinit var bottomSheetCloseBtn: FloatingActionButton
    lateinit var bottomSheetTimeText: MaterialTextView
    private lateinit var main: MainActivity

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        main = activity as MainActivity
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(com.ds.base.R.layout.bottom_sheet, container, false)

        bottomSheetCloseBtn = view.findViewById(com.ds.base.R.id.close_time_sheet_button)
        bottomSheetLayout = view.findViewById(com.ds.base.R.id.bottom_sheet_layout)
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout)
        bottomSheetTimeText = view.findViewById(R.id.time_sheet_remaining_text)
        bottomSheetBehavior.setBottomSheetCallback(object: BottomSheetBehavior.BottomSheetCallback(){
            override fun onSlide(bottomSheet: View, slideOffset: Float) {
            }

            override fun onStateChanged(bottomSheet: View, newState: Int) {
                Log.d(TAG, "newState: $newState")
                when(newState){
                    BottomSheetBehavior.STATE_EXPANDED -> {
                    }
                }
            }

        })

        return view
    }



    fun showBottomTimeSheet(){
        if(bottomSheetBehavior.state == BottomSheetBehavior.STATE_COLLAPSED){
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }
    }

    fun hideBottomTimeSheet(){
        if(bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED){
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }
    }


    companion object {
        val TAG = BottomTimeSheet::class.java.toString()
    }

}

И это вызывается: 

bottomSheet = BottomTimeSheet()
bottomSheet.showBottomTimeSheet()

enter image description here

Выше указано, как я настроил его для моего стандартанижний лист.

Первоначально я пробовал модальный нижний лист, но мой макет не показывался, и ширина заняла ширину экрана.

enter image description here

Как я могу использовать модальный нижний лист с тем же макетом, что и мой стандартный нижний лист?Или как мне установить прозрачность фона окна и заблокировать интерфейс?

Заранее спасибо!

1 Ответ

0 голосов
/ 20 сентября 2019

Я не знаю почему, но я использовал RelativeLayout вместо ConstraintLayout в родительском элементе BottomSheetDialogFragment.

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"...



class PlayerBottomSheetFragment : BottomSheetDialogFragment()

...
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        Log.logI("$TAG:onCreateView")
        return inflater.inflate(R.layout.bottom_sheet_player_fragment, container)
    }
...

Попробуйте использовать вот так.Это работает со мной.Надеюсь, это полезно для вас.

...