Android实现一个底部弹框

嗯，这里，我必须要先承认一点，关于本文的标题，我词穷了，虽然我用过那种效果很多次，但是怎么去表述那种UI，一直没有深究，所以，直接一个简洁明了的底部弹框了事。不过，那都无所谓，先来张照片看看效果：

嗯，就是这个了，我觉得这种效果倒很常见，包括日常用的支付宝，在付款是也有类似的界面，不过要比这个复杂的多，但是其实本质上实现都是大差不差的，如果能够把这最简单的实现，那么实现更复杂的界面也不过是“体力活”。

还是要事先声明，写这篇博客，也是从网上借鉴了很多的代码，所以，首先要感谢那些前辈的宝贵馈赠。好的，那么接下来就直接讲解了。

首先来讲，这个东西的本质还是对话框，只不过它和安卓自带的Dialog有很大的不同，所以，要实现，必然还是要自定义Dialog的，那么我就直接把自己的代码贴出来了：

public abstract class Dialogchoosephoto extends Dialog implements View.OnClickListener{

    private Activity activity;
    private RelativeLayout btnPickBySelect, btnPickByTake;

    public Dialogchoosephoto(Activity activity) {
        super(activity, R.style.ActionSheetDialogStyle);
        this.activity = activity;
    }

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

        btnPickBySelect = (RelativeLayout) findViewById(R.id.btnPickBySelect);
        btnPickByTake = (RelativeLayout) findViewById(R.id.btnPickByTake);

        btnPickBySelect.setOnClickListener(this);
        btnPickByTake.setOnClickListener(this);

        setViewLocation();
        setCanceledOnTouchOutside(true);//外部点击取消
    }

    /**
     * 设置dialog位于屏幕底部
     */
    private void setViewLocation(){
        DisplayMetrics dm = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
        int height = dm.heightPixels;

        Window window = this.getWindow();
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.x = 0;
        lp.y = height;
        lp.width = ViewGroup.LayoutParams.MATCH_PARENT;
        lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        // 设置显示位置
        onWindowAttributesChanged(lp);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btnPickBySelect:
                btnPickBySelect();
                this.cancel();
                break;
            case R.id.btnPickByTake:
                btnPickByTake();
                this.cancel();
                break;
        }
    }

    public abstract void btnPickBySelect();
    public abstract void btnPickByTake();

}

对应的style文件：

<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>

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/balance_background">

    <RelativeLayout
        android:id="@+id/btnPickByTake"
        android:layout_width="match_parent"
        android:clickable="true"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="拍照"
            android:textSize="20sp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:textColor="#1685ff"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dadade"
            android:layout_marginTop="15dp"
            android:layout_below="@+id/text3"/>

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/btnPickBySelect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_below="@+id/btnPickByTake">

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="相册"
            android:textSize="20sp"
            android:layout_marginTop="20dp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:textColor="#1685ff"/>

        <View
            android:id="@+id/view3"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dadade"
            android:layout_marginTop="15dp"
            android:layout_below="@+id/text4"/>

    </RelativeLayout>


</RelativeLayout>

background.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>

上面就是具体相关的几个文件了，代码的话，参考了在网上找的代码，所以，对于实现UI的效果这方面，没什么好讲的，但是这里还是要把关键的代码，就是怎样实现功能要说一下的。

我在代码中定义了两个抽象方法：

扫描二维码关注公众号，回复： 3111906 查看本文章

public abstract void btnPickByTake();

public abstract void btnPickBySelect();

分别是用户选择拍照和相册选择图片时需要实现的方法，用户需要重写这两个方法，然后在点击时会调用这两个方法，然后就会对用的去执行相关的逻辑，这个是实现的原理，那么具体的使用怎么使用呢？

new Dialogchoosephoto(RegisterActivity.this){
    @Override
    public void btnPickByTake(){
        ChooseImage = true;
        //拍照
        //点击拍照时做的事
    }
    @Override
    public void btnPickBySelect() {
        ChooseImage = true;
        //相册
        //点击相册时做的事
    }

}.show();

如图所示，这是我在Activity中的一个控件的点击事件中执行的调用我自定义Dialog的方法，可见，里面传入了Context，同时，重写了btnPickByTake（）和btnPickByselect（）这两个方法，然后当用户点击相应的“拍照”和“相册”时，就会触发Dialog的点击事件：

去执行相对应的方法，也就因此实现了相关的点击事件。

Android实现一个底部弹框

猜你喜欢