Android自定义View_底部弹出Popuwindow

从底部弹出PopuWindow在开发中是一个经常用到的问题,代码枯燥,又没有什么技术含量,我就把它封装了一下,以最简单的方式实现它.

看下效果图

实现方式

基础类

package cn.yuan.xiaoyu.testmodule.view.picker;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.os.Build;
import android.support.annotation.LayoutRes;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.PopupWindow;

import cn.yuan.xiaoyu.R;

/**
 * Created by yukuoyuan on 2017/9/23.
 * 这是一个底部的最基础的弹窗
 */
public abstract class BasePopupWindow extends PopupWindow implements View.OnClickListener {
    /**
     * 上下文
     */
    private Context context;
    /**
     * 最上边的背景视图
     */
    private View vBgBasePicker;
    /**
     * 内容viewgroup
     */
    private LinearLayout llBaseContentPicker;

    public BasePopupWindow(Context context) {
        super(context);
        this.context = context;
        View view = View.inflate(context, R.layout.picker_base, null);
        vBgBasePicker = view.findViewById(R.id.v_bg_base_picker);
        llBaseContentPicker = (LinearLayout) view.findViewById(R.id.ll_base_content_picker);
        /***
         * 添加布局到界面中
         */
        llBaseContentPicker.addView(View.inflate(context, getContentViews(), null));
        setContentView(view);
        //设置PopupWindow弹出窗体的宽
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        //设置PopupWindow弹出窗体的高
        this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        setFocusable(true);//设置获取焦点
        setTouchable(true);//设置可以触摸
        setOutsideTouchable(true);//设置外边可以点击
        ColorDrawable dw = new ColorDrawable(0xffffff);
        setBackgroundDrawable(dw);
        //设置SelectPicPopupWindow弹出窗体动画效果
        this.setAnimationStyle(R.style.BottomDialogWindowAnim);
        initView(view);
        initListener();
        initData();
        vBgBasePicker.setOnClickListener(this);
    }

    /**
     * 初始化数据
     */
    protected abstract void initData();

    /**
     * 初始化监听
     */
    protected abstract void initListener();

    /**
     * 初始化view
     *
     * @param view
     */
    protected abstract void initView(View view);

    /**
     * 初始化布局
     *
     * @return
     */
    protected abstract int getContentViews();

    /**
     * 为了适配7.0系统以上显示问题(显示在控件的底部)
     *
     * @param anchor
     */
    @Override
    public void showAsDropDown(View anchor) {
        if (Build.VERSION.SDK_INT >= 24) {
            Rect rect = new Rect();
            anchor.getGlobalVisibleRect(rect);
            int h = anchor.getResources().getDisplayMetrics().heightPixels - rect.bottom;
            setHeight(h);
        }
        super.showAsDropDown(anchor);
    }

    /**
     * 展示在屏幕的底部
     *
     * @param layoutid rootview
     */
    public void showAtLocation(@LayoutRes int layoutid) {
        showAtLocation(LayoutInflater.from(context).inflate(layoutid, null),
                Gravity.TOP | Gravity.CENTER_HORIZONTAL, 0, 0);
    }

    /**
     * 最上边视图的点击事件的监听
     *
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.v_bg_base_picker:
                dismiss();
                break;
        }
    }
}

用到的布局

<?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="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/v_bg_base_picker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:id="@+id/ll_base_content_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" />
</LinearLayout>

用到的动画样式

  <!-- 底部的dialog弹出的动画样式-->
    <style name="BottomDialogWindowAnim" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_enter_anim</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit_anim</item>
    </style>

展示的时候的动画

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

    <translate
        android:duration="400"
        android:fromYDelta="1080"
        android:toYDelta="0" />
</set>

退出时的动画

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

    <translate
        android:fromYDelta="0"   
        android:toYDelta="1080"   
        android:duration="400" />

</set>

---

通过以上的步骤,我们最基础的从底部弹出的popuwindow就算封装好了

如何使用?

我们以ios的选择弹窗为例

package cn.yuan.xiaoyu.testmodule.view.picker;

import android.content.Context;
import android.view.View;

import cn.yuan.xiaoyu.R;

/**
 * Created by yukuoyuan on 2017/9/23.
 */

public class IOsCheckView extends BasePopupWindow {
    public IOsCheckView(Context context) {
        super(context);
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void initListener() {

    }

    @Override
    protected void initView(View view) {

    }

    @Override
    protected int getContentViews() {
        return R.layout.picker_time;
    }
}

布局代码

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


    <TextView
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:background="@android:color/black"
        android:gravity="center"
        android:text="测试1"
        android:textColor="@android:color/white" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:background="@android:color/black"
        android:gravity="center"
        android:text="测试2"
        android:textColor="@android:color/white" />
</LinearLayout>

展示调用

 IOsCheckView timePickerView = new IOsCheckView(this);
                if (timePickerView != null && !timePickerView.isShowing()) {
                    /**
                     * 参数为你当前Activity或者Fragment的布局
                     */
                    timePickerView.showAtLocation(R.layout.activity_test);
                }

ok就可以看到最开始我们的那个效果图了.有什么问题,欢迎留言给我,谢谢

---

联系方式

本人技术有限,还有很多不完美的地方,欢迎指出.(写作不易,谢谢您的star支持)

• QQ:152046273
• Email:yukuoyuan@hotmail.com
• CSDN博客地址
• Github博客地址
• Github地址