iOS ActionSheet 的 Android 等价物答案

【问题标题】：Android equivalence of iOS ActionSheetiOS ActionSheet 的 Android 等价物
【发布时间】：2018-05-18 15:34:21
【问题描述】：

iOS SDK 中 UIActionSheet 的 Android 等效性是什么？我正在开发一个 React-Native 项目，并且需要在可能的情况下保持对本机控件的使用。我没有遇到过使用相应平台“操作表”的 npm 包或其他包。他们似乎都在 iOS 中使用本机操作表，以及适用于 Android 的 iOS 操作表的 javascript 模拟（这使得它在 Android 上非本机）。如果我能知道 android 在哪里显示 iOS 显示操作表，那么我可以为 android 使用 RN Android 组件，为 iOS 使用操作表。我希望这是一个明确的问题。

【问题讨论】：

actionsheet 在 ios 中的作用是什么？
@AbhishekSingh 它为用户提供了多个选项，例如用户单击更多按钮并出现带有以下选项（删除、移动、应对、取消）的操作表。例如appcoda.com/wp-content/uploads/2014/05/…
好的，请看下面我的回答
你真的不必去图书馆。您可以简单地使用底部工作表对话框 (modal bottom sheet)。阅读此article
在 Android 上使用多个选项提示用户的原生机制是（最简单的：使用单选列表警报对话框 developer.android.com/guide/topics/ui/dialogs#AddingAList）或（更多工作，但更现代和更好的 UX 原则: 底部床单material.io/design/components/sheets-bottom.html#)

标签： android ios react-native native uiactionsheet

【解决方案1】：

我在 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>

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="@dimen/size_10dp" />
</shape>

【讨论】：

要删除AndroidX的背景，请使用com.google.android.material.R.id.design_bottom_sheet
顺利和简单的实施。谢谢

【解决方案2】：

我们使用BottomSheetDialog 在 Android 中做同样的工作。不完全相同，与 iOS 相比，可能需要编写更多代码。但最终结果是相似的。

参考文献：

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

【讨论】：

这不是 Android 的等价物。这只是“Android 中的相同 iOS 实现”，但它不是 Android Equivalent。
@BrodaNoel 如果“Android 中的相同 iOS 实现”不是，那么 Android 等价物是什么？
@Julius “Android 中相同的 iOS 实现”的意思是：“相同的 UX 和 UI。相同的设计”。但在 Android 中，Action Sheets 是完全不同的。如果您花一些时间阅读一些有关 Android UX 的 UX 书籍，您将了解到 ActionSheets 应该显示在右上角或居中模式，具体取决于要显示的内容。但它绝不是底部的选项列表。也许它在过去的 Android 版本中发生了变化，但我不这么认为。所以，请记住：UI 不是 UX。
@BrodaNoel 这个答案特别提到了 BottomSheetDialog，即使在 Android SDK 类的普通实现中，它也会从屏幕底部自动呈现。这是来自 Google 的 Material Design 的参考，用于正确使用该类。 BottomSheetDialog 绝对是 iOS ActionSheet 的合适 Android 替代品。这里没有 UI / UX 误解。另外值得一提的是，Android SDK 中没有 ActionSheet 之类的东西。
@BrodaNoel 您的回答完全无关紧要，既没有回答手头的问题，也没有表现出对潜在用户体验问题的任何理解。他正在寻找一种方法来解决如何以阻止 UI 的方式以动态数量的选择提示用户。在 Android 上，这是（1：传统和最简单：使用单选列表警报对话框 developer.android.com/guide/topics/ui/dialogs#AddingAList）或（2：更现代和更好的 UX，但不幸的是需要付出更多努力: 底片 material.io/design/components/sheets-bottom.html#)

【解决方案3】：

对于像 IOS 中这样的 ActionSheet，您可以使用 This Library

用法

将此依赖项添加到您的应用级别 grsadle

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

创建 ActionSheet 并显示

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

方法

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

【讨论】：

正如我在帖子中提到的，这正是我要避免的。我想为 iOS 和 Android 使用本机控件。如果您查看链接中的屏幕截图，您将看到对于 Android，该库不使用本机 Android SDK 控件。它使用 iOS 操作表的模拟/模仿。无论是本机实现还是 javascript 实现。我想为 Android 使用一些标准的东西。
我已经在帖子中提到我遇到过这类库。
@pnizzle 它使用 java 而不是 javascript。使用库如何使项目成为非本地项目？
如果您可以自定义足够的使用Dialog 使用自定义视图和动画，您将能够实现相同的目标。附言您还需要自定义对话框位置
这就是我说对话框的原因，您可以自定义 android 对话框。完全等效的控制不可用

【解决方案4】：

类似于在 Kotlin 中等效的 iOS 操作表

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>

【讨论】：

【解决方案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)
        }
    }


}

【讨论】：