Android模拟IOS风格的自定义Dialog底部弹窗案例

最新推荐文章于 2021-09-08 14:06:25 发布

原创最新推荐文章于 2021-09-08 14:06:25 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #对话框

本文分享了如何在Android中创建一个模仿iOS风格的自定义Dialog底部弹窗，包括核心代码实现和按钮状态选择器的设置。并提供了源代码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：

底部弹窗核心代码

MainActivity.java代码（包含窗口创建显示）：

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void show(View view) {
        dialog = new Dialog(this, R.style.ActionSheetDialogStyle);
        //填充对话框布局
        inflate = LayoutInflater.from(this).inflate(R.layout.bottom_dialog, null);
        //初始化控件
        one = (TextView) inflate.findViewById(R.id.one);
        two = (TextView) inflate.findViewById(R.id.two);
        cancel = (Button) inflate.findViewById(R.id.btn_cancel);

        one.setOnClickListener(this);
        two.setOnClickListener(this);
        cancel.setOnClickListener(this);
        //将布局设置给Dialog
        dialog.setContentView(inflate);
        //获取当前Activity所在的窗体
        Window dialogWindow = dialog.getWindow();
        //设置Dialog从窗体底部弹出
        dialogWindow.setGravity(Gravity.BOTTOM);

        //获得窗体的属性
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        lp.y = 10;//设置Dialog距离底部的距离

        //获取当前设备
        Display display = getWindowManager().getDefaultDisplay();
        //设置显示的弹窗的宽度
        lp.width=(int) (display.getWidth()*0.975);
        // 将属性设置给窗体
        dialogWindow.setAttributes(lp);
        dialog.show();//显示对话框
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.one:
                Toast.makeText(this, "点击条目一", Toast.LENGTH_SHORT).show();
                break;
            case R.id.two:
                Toast.makeText(this, "点击条目二", Toast.LENGTH_SHORT).show();
                break;
                //其他点击事件没有写
            case R.id.btn_cancel:
                dialog.dismiss();
                break;
            default:
                break;

        }
        //点击单个条目时退出弹出窗
        dialog.dismiss();
    }

弹窗布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/one"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_top_selector"
        android:gravity="center"
        android:text="条目一"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/two"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_middle_selector"
        android:gravity="center"
        android:text="条目二"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/three"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_middle_selector"
        android:gravity="center"
        android:text="条目三"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/four"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_middle_selector"
        android:gravity="center"
        android:text="条目四"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/five"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_middle_selector"
        android:gravity="center"
        android:text="条目五"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/six"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_middle_selector"
        android:gravity="center"
        android:text="条目六"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/seven"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/actionsheet_bottom_selector"
        android:gravity="center"
        android:text="条目七"
        android:textColor="#037BFF"
        android:textSize="13sp" />

    <Button
        android:id="@+id/btn_cancel"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/actionsheet_single_selector"
        android:gravity="center"
        android:text="取消"
        android:textColor="#037BFF"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

弹窗风格样式style.xml代码：

 <style name="ActionSheetDialogStyle" parent="@android:style/Theme.Dialog">
        <!-- 背景透明 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
        <!-- Dialog以外的区域模糊效果 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 无标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 半透明 -->
        <item name="android:windowIsTranslucent">true</item>
        <!-- Dialog进入及退出动画 -->
        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>
    </style>
    <!-- ActionSheet进出动画 -->
    <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/dialog_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_out</item>
    </style>

弹窗进出动画代码：

进入动画：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="100%"
    android:toYDelta="0"
    >
</translate>

退出动画：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:toYDelta="100%"
    >
</translate>

其他代码就是点击控件的状态模式（按钮选择器）。

比如取消按钮的选择器代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/actionsheet_bottom_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/actionsheet_bottom_normal" />

</selector>

源代码下载地址：

点击打开链接