美文网首页UIAndroid知识
Android自定义View_底部弹出Popuwindow

Android自定义View_底部弹出Popuwindow

作者: Yukoyuan | 来源:发表于2017-09-23 11:01 被阅读0次

    从底部弹出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支持)

    相关文章

      网友评论

        本文标题:Android自定义View_底部弹出Popuwindow

        本文链接:https://www.haomeiwen.com/subject/kbqcextx.html