底部滑出的Dialog

推荐:

日常工作中,自己定义了 Dialog 的工具类,以便使用,下面从底部滑出的 Dialog,效果图如下:

下面主要讲的是:

  • 自定义 Dialog 工具类
  • 自定义布局文件
  • 自定义 Dialog 显示风格
  • 显示/关闭 Dialog(使用自定义 dialog)

1.自定义 Dialog 工具类

定义一个名字为 DialogUtil 的工具类,代码如下:

import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

/**
 * author: wu
 * date: on 2018/7/5.
 * describe:dialog工具类
 */

public class DialogUtil {
    private Dialog dialog;
    private View inflate;

    public void showBottomDialog(Context context) {
        //自定义dialog显示布局
        inflate = LayoutInflater.from(context).inflate(R.layout.dialog_bottom, null);
        //自定义dialog显示风格
        dialog = new Dialog(context, R.style.DialogBottom);
        //弹窗点击周围空白处弹出层自动消失弹窗消失(false时为点击周围空白处弹出层不自动消失)
        dialog.setCanceledOnTouchOutside(true);
        //将布局设置给Dialog
        dialog.setContentView(inflate);
        //获取当前Activity所在的窗体
        Window window = dialog.getWindow();
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        window.setAttributes(wlp);
        dialog.show();
    }

    //关闭dialog时调用
    public void close() {
        if (dialog != null) {
            dialog.dismiss();
            dialog = null;
        }
    }
}

2.自定义布局文件

定义一个名字为 dialog_bottom 的布局文件,代码如下:

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

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="分享到"
        android:textColor="#FF999999"
        android:textSize="12sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/ll_weixin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="微信好友"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_friend"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="朋友圈"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_qq"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="QQ好友"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="20dp"
        android:background="#FFEEEEEE" />

    <TextView
        android:id="@+id/tv_cancel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingBottom="13dp"
        android:paddingTop="13dp"
        android:text="取消分享"
        android:textColor="#000000"
        android:textSize="16sp" />
</LinearLayout>

3.自定义 Dialog 显示风格

在 styles 文件中自定义一个名字为 DialogBottom 的风格,代码如下:

<!--位于底部dialog的风格-->
    <style name="DialogBottom" 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:windowCloseOnTouchOutside">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/action_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/action_dialog_out</item>
    </style>

在 anim 文件包下面自定义名字为 action_dialog_in 的底部滑入动画和名字为 action_dialog_out 的底部滑出动画,代码分别为:

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="100%"
    android:toYDelta="0" />
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:toYDelta="100%" />

4.显示/关闭 Dialog

在 Activity 中添加如下代码即可:

public class MainActivity extends AppCompatActivity {

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

        final DialogUtil dialogUtil = new DialogUtil();
        //延迟一秒显示位于底部的dialog
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                dialogUtil.showBottomDialog(MainActivity.this);
            }
        }, 1000);

        //关闭dialog时调用
//        dialogUtil.close();
    }
}

推荐:

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值