iOS等效的iOS ActionSheet

pni*_*zle 10 android native uiactionsheet ios react-native

iOS SDK中UIActionSheet的Android等价是什么?我正在研究React-Native项目,并且需要尽可能保持本机控件的使用.我没有遇到使用相应的plartform'动作表'的npm包或其他包.他们似乎都使用iOS中的原生动作表,以及Android的iOS动作表的javascript模拟(这使得它在Android上非原生).如果我能知道android显示哪个iOS显示动作表,那么我可以使用适用于Android的RN Android组件和iOS的动作表.我希望这是一个明确的问题.

Yuc*_*ong 9

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

参考文献:

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

  • @BrodaNoel这个答案特别提到了**BottomSheetDialog**,即使在Android SDK类的库存实现中也会自动从屏幕底部显示.以下是来自Google [Material Design](https://material.io/design/components/sheets-bottom.html#)的参考资料,以正确使用该课程.BottomSheetDialog绝对是适用于iOS ActionSheet的Android替代品.这里没有UI/UX的误解.另外值得一提的是Android SDK中没有ActionSheet这样的东西. (4认同)
  • 这不是 Android 的等效项。这只是“Android 中相同的 iOS 实现”,但它不是 Android 的等效项。 (3认同)
  • @BrodaNoel您的答案完全无关紧要,既不会回答手头的问题,也不会显示出对基本UX问题的任何理解。他正在寻找一种解决方法,该方法可以解决如何以阻止UI的方式提示用户动态选择的数量。在Android上,这可能是(1:传统且最简单:使用单选列表警报对话框developer.android.com/guide/topics/ui/dialogs#AddingAList)或(2:更现代,更好的UX,但不幸的是付出了更多努力:底部表格material.io/design/components/sheets-bottom.html#) (3认同)
  • @BrodaNoel如果"在Android中使用相同的iOS实现"不是Android的等价物是什么? (2认同)
  • @Julius“Android 中相同的 iOS 实现”意味着:“相同的 UX 和 UI。相同的设计”。但 Android 中的操作表完全不同。如果您花一些时间阅读一些有关 Android UX 的 UX 书籍,您将了解到 ActionSheets 应显示在右上角或中心模式中,具体取决于要显示的内容。但它从来都不是一个从底部开始的选项列表。也许它在过去的 Android 版本中发生了变化,但我不这么认为。所以,请记住:UI 不是 UX。 (2认同)

Nay*_*bhi 7

我已经BottomSheetDialog在Android中实现了类似的功能。

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();
    }
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

  • 要删除 AndroidX 的背景,请使用“com.google.android.material.R.id.design_bottom_sheet” (8认同)