Android中与iOS ActionSheet相对应的功能是什么？

Question

在iOS SDK中，UIActionSheet对应的是Android中的什么？我正在开发一个React-Native项目，需要尽可能地使用本地控件。我还没有找到一个npm包或其他可以使用相应平台的“actionsheet”的解决方案。它们似乎都在iOS中使用本地的actionsheet，在Android上使用iOS actionsheet的Javascript模拟（这使得Android上不是本地控件）。如果我知道了Android在哪里显示iOS的actionsheet，那么我就可以利用RN Android组件来实现Android和iOS的actionsheet。希望我的问题很清楚。

- pnizzle

---

在iOS中，actionsheet是什么？ - Abhishek Singh

@AbhishekSingh 它为用户提供了多个选项，例如用户单击“更多”按钮，然后会出现一个操作表，其中包含以下选项（删除、移动、复制、取消）。例如 https://www.appcoda.com/wp-content/uploads/2014/05/t11_1_normal_action_sheet.jpg - pnizzle

好的，请看下面我的答案。 - Abhishek Singh

你其实不需要使用库。你可以简单地使用底部对话框（模态底部对话框）。阅读这篇文章。 - Aswin P Ashok

在Android上提示用户选择多个选项的本地机制是（最简单的方法：使用单选列表警报对话框https://developer.android.com/guide/topics/ui/dialogs#AddingAList）或（更复杂，但更现代和更好的UX原则：底部工作表https://material.io/design/components/sheets-bottom.html#）。 - Marchy

Answer 1

我们在Android中使用BottomSheetDialog来完成相同的工作。虽然不完全相同，可能需要编写更多的代码与iOS进行比较。但最终结果是类似的。

参考文献：

https://developer.android.com/reference/android/support/design/widget/BottomSheetDialog.html https://medium.com/glucosio-project/15fb8d140295

- Yuchen

---

这不是安卓版本的等价物。这只是“在安卓中相同的iOS实现”，但这并不是安卓版本的等价物。 - Broda Noel

@BrodaNoel 如果“在Android中实现相同的iOS实现”不是等价物，那么它的Android等价物是什么？ - Julius

@Julius，“在Android中相同的iOS实现”意味着：“相同的UX和UI。相同的设计”。但是，在Android中，操作表(Action Sheets)是完全不同的。如果你花一些时间阅读一些关于Android UX的UX书籍，你会了解到ActionSheets应该显示在右上角或中心模态中，具体取决于要显示的内容。但它从来不是从底部的选项列表。 也许在过去的Android版本中有所改变，但我不这么认为。 所以，请记住：UI不等于UX。 - Broda Noel

这个答案特别提到了 "BottomSheetDialog"，它是 Android SDK 类的股票实现中自动从屏幕底部呈现的。这里有一个来自 Google Material Design 的参考，用于正确使用该类。BottomSheetDialog 绝对是 iOS ActionSheet 的适当 Android 替代品。在这里没有 UI / UX 误解。还值得提到的是，在 Android SDK 中没有类似于 ActionSheet 的东西。 - Julius

@BrodaNoel的回答完全无关，既没有回答手头问题也没有展现出对底层UX问题的理解。他正在寻找一种解决办法，以UI阻塞的方式提示用户选择动态数量的选项。在Android上，可以采用以下两种方法：(1：传统且最简单的方法：使用单选列表警报对话框developer.android.com/guide/topics/ui/dialogs#AddingAList)，或者(2：更现代化和更好的UX，但不幸的是需要更高的工作量：底部表material.io/design/components/sheets-bottom.html#) - Marchy

Answer 2

我曾在Android中使用BottomSheetDialog实现类似的功能。

BottomSheetDialog mBottomDialogNotificationAction;

private void showDialogNotificationAction() {
    try {
        View sheetView = mActivity.getLayoutInflater().inflate(R.layout.dialog_bottom_notification_action, null);
        mBottomDialogNotificationAction = new BottomSheetDialog(mActivity);
        mBottomDialogNotificationAction.setContentView(sheetView);
        mBottomDialogNotificationAction.show();

        // Remove default white color background
        FrameLayout bottomSheet = (FrameLayout) mBottomDialogNotificationAction.findViewById(android.support.design.R.id.design_bottom_sheet);
        bottomSheet.setBackground(null);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

dialog_bottom_notification_action.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corner"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Apply Leave"
                android:textColor="#1E82FF"
                android:textSize="16sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#E5E5E5" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Regularisation"
                android:textColor="#1E82FF"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="@drawable/rounded_corner"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Close"
            android:textColor="#1E82FF"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

圆角边.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />

    <corners android:radius="@dimen/size_10dp" />
</shape>

- Nayan Dabhi

---

为了移除AndroidX的背景，请使用com.google.android.material.R.id.design_bottom_sheet。 - Skoua

平稳且简单的实现。谢谢。 - ashishdhiman2007

你不应该这样做。这是使用iOS设计风格，你可能需要Android设计风格，例如：https://m3.material.io/components/bottom-sheets/overview - Michael

Answer 3

要想使用类似于IOS中的ActionSheet，您可以使用这个库。 用法： 将此依赖项添加到您的应用级别grsadle中。

dependencies {
    compile 'com.baoyz.actionsheet:library:1.1.7'
}

创建操作表并显示

ActionSheet.createBuilder(this, getSupportFragmentManager())
            .setCancelButtonTitle("Cancel")
            .setOtherButtonTitles("Item1", "Item2", "Item3", "Item4")
            .setCancelableOnTouchOutside(true)
            .setListener(this).show();

方法

• setCancelButtonTitle() 取消按钮标题，(字符串)
• setOtherButtonTitles() 项目按钮标题，(字符串数组)
• setCancelableOnTouchOutside() 触摸外部关闭，(布尔值)
• setListener() 设置监听器以侦听事件
• show() 显示 ActionSheet，返回 ActionSheet 对象，调用 ActionSheet 的 dismiss() 方法关闭。

- Abhishek Singh

---

这正是我在帖子中提到要避免的。我想在iOS和Android上都使用本地控件。如果您查看链接中的截图，您会发现对于Android，该库不使用本机Android SDK控件，而是使用模拟/模仿iOS操作表。无论它是本机实现还是JavaScript实现，我都希望在Android上使用标准的东西。 - pnizzle

我在我的帖子中已经提到过我遇到了这些类型的库。 - pnizzle

@pnizzle 它使用的是Java而不是JavaScript。使用库如何使项目非本地化？ - Abhishek Singh

如果您可以定制足够的 Dialog，使用自定义视图和动画，那么您就能够实现相同的效果。顺便提一句，您还需要自定义对话框的位置。 - Abhishek Singh

请查看此问题。 - Abhishek Singh

Answer 4

与iOS的操作表等效的Kotlin代码示例：

类似于iOS的操作表，在Kotlin中实现的代码示例如下：

import com.google.android.material.bottomsheet.BottomSheetDialog


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

    val bottomSheetDialog = BottomSheetDialog(this)
    val bottomSheetView = this.layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
    bottomSheetDialog.setContentView(bottomSheetView)

    actionSheetButton.setOnClickListener {
        showDialogNotificationAction(bottomSheetDialog)
    }

    bottomSheetView.button1.setOnClickListener {
        Toast.makeText(this, "Button 1 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button2.setOnClickListener {
        Toast.makeText(this, "Button 2 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button3.setOnClickListener {
        Toast.makeText(this, "Button 3 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.button4.setOnClickListener {
        Toast.makeText(this, "Button 4 Clicked", Toast.LENGTH_LONG).show()
    }
    bottomSheetView.cancelAttachment.setOnClickListener {
        bottomSheetDialog.dismiss()
    }
}

private fun showDialogNotificationAction(bottomSheetDialog: BottomSheetDialog) {
    bottomSheetDialog.show()

    val bottomSheetDialogFrameLayout =
        bottomSheetDialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
    bottomSheetDialogFrameLayout?.background = null
}

bottom_sheet_layout.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_sheet_rounded_corner"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="41dp"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="14dp"
                android:text="Android Action Sheet"
                android:textColor="#909090"
                android:textSize="12sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 1"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 2"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 3"
                android:textColor="#007CFE"
                android:textSize="18sp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#D1D1CF" />

        <LinearLayout
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Button 4"
                android:textColor="#007CFE"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/cancelAttachment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="@drawable/bottom_sheet_rounded_corner"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Cancel"
            android:textColor="#FFFFFF"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>

bottom_sheet_rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />

    <corners android:radius="10dp" />
</shape>

- JipZipJib

Answer 5

还有一个ModalBottomSheetLayout，例如：

@Composable
fun appView(viewModel: AppViewModel) {
    ModalBottomSheetLayout(
            sheetContent = { modalSheetView(viewModel) },
            sheetState = viewModel.bottomModalState
    ) {
        // Rest of the app goes here.
    }
}

@Composable
fun modalSheetView(viewModel: AppViewModel) {

    val buttonModifier = Modifier.padding(all = 20.dp).fillMaxWidth()
    val buttonTextStyle = TextStyle(fontSize = 20.sp)

    Column(horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth())
    {
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Do something", style = buttonTextStyle)
        }
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Something else", style = buttonTextStyle)
        }
        Spacer(modifier = Modifier.height(20.dp))
        TextButton(onClick = { /* Handle click */ },
                modifier = buttonModifier)
        {
            Text("Cancel", style = buttonTextStyle)
        }
    }


}

- okhobb