代码之家 › 专栏 › 技术社区 › pnizzle

iOS操作表的Android等效性

uiactionsheet native react-native ios android

pnizzle · 技术社区 · 7 年前

iOS SDK中UIActionSheet的Android等价物是什么?我正在从事React原生项目,需要尽可能保持原生控件的使用。我没有遇到过一个npm包或其他使用相应plartform“actionsheet”的包。他们似乎都在iOS中使用本机actionsheet,并在Android中使用了iOS actionsheet的javascript模拟(这使得它在Android上不是本机的)。如果我能知道android显示了什么,iOS在哪里显示了一个操作表,那么我就可以使用RN android组件来显示android,并使用iOS的操作表。我希望这是一个明确的问题。

5 回复 | 直到 7 年前

Yuchen 7 年前

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

参考文献:

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

Nayan Dabhi 6 年前

我已经使用实现了类似的功能 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();
    }
}

dialog\u bottom\u notification\u操作。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>

Abhishek Singh 7 年前

对于类似IOS的ActionSheet,您可以使用 This Library

用法

将此依赖项添加到应用程序级Grsadel

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 回来 行动表 Objectcall dismiss() 关闭操作表的方法。

JipZipJib 4 年前

Simliar与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\u sheet\u布局。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>

底部_sheet_rounded_角。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>

okhobb 4 年前

还有 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)
        }
    }


}