我想创建一个从 phone(Android Studio) 屏幕底部打开的对话框，但我不知道它的名称。描述中的图片

Question

我想自学但是网上找不到，不知道叫什么.. screen？对话？菜单？就是不知道所以上网搜也没有找到

Answer 1

按我的理解，你说的是底部sheet 以下是在 android

中创建底部 sheet 的五个简单步骤

第一步在应用级 build.gradle 文件

中添加 material 支持设计依赖

implementation "com.android.support:design:27.0.2"

第 2 步设计要显示为底部的布局文件sheet。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:paddingBottom="8dp">


    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/txt_download"
        style="@style/BottomSheetItem"
        android:drawableStart="@drawable/ic_baseline_save_alt_24"
        android:drawableLeft="@drawable/ic_baseline_save_alt_24"
        android:text="Download"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/txt_copy"
        style="@style/BottomSheetItem"
        android:drawableStart="@drawable/copy_iocn"
        android:drawableLeft="@drawable/copy_iocn"
        android:text="Copy"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_download" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/txt_share"
        style="@style/BottomSheetItem"
        android:layout_marginTop="8dp"
        android:drawableStart="@drawable/share_iocn"
        android:drawableLeft="@drawable/share_iocn"
        android:text="Share"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_copy" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/txt_whats_app"
        style="@style/BottomSheetItem"
        android:drawableStart="@drawable/ic_whatsapp_new"
        android:drawableLeft="@drawable/ic_whatsapp_new"
        android:text="Whats App"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_share" />
</androidx.constraintlayout.widget.ConstraintLayout>

您可以在styles.xml

中添加项目样式

<style name="BottomSheetItem">
    <item name="android:textSize">20sp</item>
    <item name="android:drawablePadding">20dp</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:padding">15dp</item>
    <item name="fontFamily">@font/mono_bold</item>
</style>

步骤 3 现在使用 BottomSheetDialogFragment 扩展 class 并覆盖 onCreateView 方法以提供布局。

package com.sample
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.sample.R
import kotlinx.android.synthetic.main.bottom_sheet_options.*
import java.lang.ref.WeakReference

class OptionsBottomSheetFragment : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        setUpViews()
    }

    private fun setUpViews() {
        // We can have cross button on the top right corner for providing elemnet to dismiss the bottom sheet
        //iv_close.setOnClickListener { dismissAllowingStateLoss() }
        txt_download.setOnClickListener {
            dismissAllowingStateLoss()
           Toast.makeText(application, "Download option clicked", Toast.LENGTH_LONG)
                    .show()
        }
       
       txt_share.setOnClickListener {
            dismissAllowingStateLoss()
            Toast.makeText(application, "Share option clicked", Toast.LENGTH_LONG)
                    .show()
      }
    }

    companion object {
        @JvmStatic
        fun newInstance(bundle: Bundle): OptionsBottomSheetFragment {
            val fragment = OptionsBottomSheetFragment()
            fragment.arguments = bundle
            return fragment
        }
    }
}

注意：我们可以设置一个接口并将回调发送给父级 activity 以相应地处理操作。有接口回调，修改如下

package com.sample
import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.sample.R
import kotlinx.android.synthetic.main.bottom_sheet_layiut.*


class OptionsBottomSheetFragment : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        setUpViews()
    }

    private fun setUpViews() {
        // We can have cross button on the top right corner for providing elemnet to dismiss the bottom sheet
        //iv_close.setOnClickListener { dismissAllowingStateLoss() }
        txt_download.setOnClickListener {
            dismissAllowingStateLoss()
            mListener?.onItemClick("Download")

        }

        txt_share.setOnClickListener {
            dismissAllowingStateLoss()
            mListener?.onItemClick("Share")
        }
    }

    private var mListener: ItemClickListener? = null

    override fun onAttach(context: Context) {
        super.onAttach(context)
        if (context is ItemClickListener) {
            mListener = context as ItemClickListener
        } else {
            throw RuntimeException(
                context.toString()
                    .toString() + " must implement ItemClickListener"
            )
        }
    }

    override fun onDetach() {
        super.onDetach()
        mListener = null
    }
    interface ItemClickListener {
        fun onItemClick(item: String)
    }

    companion object {
        @JvmStatic
        fun newInstance(bundle: Bundle): OptionsBottomSheetFragment {
            val fragment = OptionsBottomSheetFragment()
            fragment.arguments = bundle
            return fragment
        }
    }
}

步骤 4 设计一个带有按钮的布局，以在单击时显示对话框。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">
   
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_click_me"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:padding="@dimen/spacing_20"
        android:background="@color/grey3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Click Me"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

第5步最后一步是在 activity

中显示对话框

package com.sample
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.main.*

class SampleActivity :AppCompatActivity(),OptionsBottomSheetFragment.ItemClickListener  {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.amin)
        tv_click_me?.setOnClickListener {
            supportFragmentManager.let {
                OptionsBottomSheetFragment.newInstance(Bundle()).apply {
                    show(it, tag)
                }
            }
        }
    }

    override fun onItemClick(param:String) {
        when(param){
            "share"->{
                //Handle data
            }
            "Download"->{
                //Handle data
            }
            else->{
                //Handle data
            }
        }
    }

}

我想创建一个从 phone(Android Studio) 屏幕底部打开的对话框，但我不知道它的名称。描述中的图片

I to create like a dialog that opens from the bottom of the screen on phone(Android Studio) but I don't know the name of it.. Image in description

filenames

android