Android自定义底部弹窗(仿小米)

1.首先准备一些东西

·anim文件下的dialog_animation_enter.xml和dialog_animation_out.xml文件
dialog_animation_enter.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300" />

</set>
dialog_animation_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

<translate
    android:fromYDelta="0"
    android:toYDelta="100%p"
    android:duration="300" />
</set>
·在styles文件中添加如下代码来设置Dialog的相关属性以及动画
<!--Dialog动画-->
<style name="dialog_animation">
    <item name="android:windowEnterAnimation">@anim/dialog_animation_enter</item>
    <item name="android:windowExitAnimation">@anim/dialog_animation_out</item>
</style>

<style name="style_dialog" parent="android:style/Theme.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:scrollHorizontally">true</item>
</style>
·Dialog的背景drawable文件(dialog_bg.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="3dp" />

    <solid android:color="@color/white" />

</shape>

2.对自定义的Dialog进行了简单的封装

import android.app.Dialog;
import android.content.Context;
import android.content.res.Resources;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

/**
 * Created by NiYang on 2017/4/16.
 */

public class CustomBottomDialog extends Dialog {
    private Context mContext = null;

    public CustomBottomDialog(View contentView, Context context) {
        super(context);
        this.mContext = context;
        init(contentView);
    }

    public CustomBottomDialog(View contentView, Context context, int themeResId) {
        super(context, themeResId);
        this.mContext = context;
        init(contentView);
    }

    protected CustomBottomDialog(View contentView, Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
        this.mContext = context;
        init(contentView);
    }

    private void init(View contentView) {
        setContentView(contentView);
        Window window = getWindow();//获取Dialog的Window对象
        window.setGravity(Gravity.BOTTOM);//把Dialog的窗体设置在屏幕的底部
        window.setWindowAnimations(R.style.dialog_animation);//给窗体设置动画

        //获取的是Dialog窗体的布局参数,注意这里不是Dialog中的View的布局参数
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.y = 15;//设置Dialog的窗体距离屏幕底部的距离
        //获取Activity的Window管理器
        WindowManager windowManager = (WindowManager) this.mContext.getSystemService(Context.WINDOW_SERVICE);
        //设置Dialog的窗体的宽度,屏幕的宽度-15
        lp.width = windowManager.getDefaultDisplay().getWidth()-dp2px(15);
        window.setAttributes(lp);
    }

    /**
     * dp转px
     * @param dp dp值
     * @return 转换后的px的值
     */
    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
    }

    /**
     * sp转px
     * @param sp sp值
     * @return 转换后的px值
     */
    private int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, Resources.getSystem().getDisplayMetrics());
    }
}

3.在MainActivity中调用

import android.databinding.DataBindingUtil;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import com.yang.custombottomdialog.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ActivityMainBinding binding = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.binding = DataBindingUtil.inflate(LayoutInflater.from(this), R.layout.activity_main, null, false);
        setContentView(this.binding.getRoot());
        this.binding.btnClick.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        CustomBottomDialog customBottomDialog = new CustomBottomDialog(LayoutInflater.from(this).inflate(R.layout.dialog_layout, null), this, R.style.style_dialog);
        customBottomDialog.show();
    }
}

4.Dialog和Activity的布局文件

dialog_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_bg">

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:text="删除"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_title"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="15dp"
            android:text="确定要删除所选的1个会话吗?" />

        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@id/txt_content"
            android:layout_marginTop="10dp"
            android:background="@color/gray_light" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_below="@id/line"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="取消"
                android:textSize="16sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/gray_light" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="删除" />
        </LinearLayout>

    </RelativeLayout>

</layout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_click"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="点我" />
    </RelativeLayout>
</layout>

5.效果图

这里写图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值