自定义弹窗尖角(上下左右)

弹窗自定义尖角,先看下效果图。


图1.png
图2.jpg
图3.jpg

删除按钮的位置不确定,还要根据按钮位置来确定弹窗实在按钮上方还是下方展示,尖角有可能在左边,也可能在右边或者中间。(为什么自定义呢?UI不会切点9。。。。)代码

public class CornerPopupWindow extends PopupWindow {

    private CornerRelativeLayout cornerView;

    private Context context;

    public CornerPopupWindow(Context context) {
        this.context = context;
        setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

        setFocusable(true);
        setOutsideTouchable(false);
        setClippingEnabled(false);

    }

    public void setCornerView(View view) {//弹窗内布局
        cornerView = new CornerRelativeLayout(context);
        cornerView.setBackgroundColor(Color.TRANSPARENT);
        cornerView.addView(view);
        setContentView(cornerView);
    }

    /**
     * 显示弹窗
     */
    public void show(View view) {//view为删除点击的按钮
        CornerRelativeLayout.CornerLegOrientation orientation = null;
        final int anchorLoc[] = new int[2];
        final int windowPos[] = new int[2];
        // 获取锚点View在屏幕上的左上角坐标位置
        view.getLocationOnScreen(anchorLoc);
        final int anchorHeight = view.getHeight();
        // 获取屏幕的高宽
        final int screenHeight = PublicViewUtils.getDisplayHeight(view.getContext());
        final int screenWidth = PublicViewUtils.getDisplayWidth(view.getContext());
        // 测量contentView
        cornerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        // 计算contentView的高宽
        final int windowHeight = cornerView.getMeasuredHeight();
        final int windowWidth = cornerView.getMeasuredWidth();
        // 判断需要向上弹出还是向下弹出显示
        final boolean isNeedShowUp = (screenHeight - anchorLoc[1] - anchorHeight < windowHeight);
        if (isNeedShowUp) {
            windowPos[0] = screenWidth - windowWidth;
            windowPos[1] = anchorLoc[1] - windowHeight;
            orientation = CornerRelativeLayout.CornerLegOrientation.BOTTOM;
        } else {
            windowPos[0] = screenWidth - windowWidth;
            windowPos[1] = anchorLoc[1] + anchorHeight;
            orientation = CornerRelativeLayout.CornerLegOrientation.TOP;
        }

        if (!this.isShowing()) {
            cornerView.setCornerParams(anchorLoc[0] + view.getWidth()/2, orientation, 0.75f); // 设置气泡布局方向及尖角偏移
            showAtLocation(view, Gravity.TOP | Gravity.START, 0, windowPos[1]);
        } else {
            this.dismiss();
        }
    }
}

尖角(只添加了上下,左右可以在renderCornerLegMatrix添加)

public class CornerRelativeLayout extends RelativeLayout {

    public enum CornerLegOrientation {
        TOP, BOTTOM
    }

    public  int PADDING = 30;
    public  float STROKE_WIDTH = 2.0f;

    public  float CORNER_RADIUS = 8.0f;

    public  int SHADOW_COLOR = Color.argb(100, 0, 0, 0);

    private Paint mFillPaint = null;
    private final Path mPath = new Path();
    private final Path mCornerPath = new Path();
    private final Paint mPaint = new Paint(Paint.DITHER_FLAG);

    private float mCornerLegOffset = 0.75f;

    private CornerLegOrientation mCornerLegOrientation = CornerLegOrientation.TOP;

    private int xLocation;

    public CornerRelativeLayout(Context context) {
        this(context, null);
    }

    public CornerRelativeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CornerRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    private void init(final Context context, final AttributeSet attrs) {

        //setGravity(Gravity.CENTER);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        setLayoutParams(params);
        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.corner);

            try {
                PADDING = a.getDimensionPixelSize(R.styleable.corner_padding, PADDING);
                SHADOW_COLOR = a.getInt(R.styleable.corner_shadowColor, SHADOW_COLOR);
                STROKE_WIDTH = a.getFloat(R.styleable.corner_buStrokeWidth, STROKE_WIDTH);
                CORNER_RADIUS = a.getFloat(R.styleable.corner_buCornerRadius, CORNER_RADIUS);
            } finally {
                if (a != null) {
                    a.recycle();
                }
            }
        }
        mPaint.setColor(SHADOW_COLOR);
        mPaint.setStyle(Style.FILL);
        mPaint.setStrokeCap(Cap.BUTT);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(STROKE_WIDTH);
        mPaint.setStrokeJoin(Paint.Join.MITER);
        mPaint.setPathEffect(new CornerPathEffect(CORNER_RADIUS));
        if (Build.VERSION.SDK_INT >= 11) {
            setLayerType(LAYER_TYPE_SOFTWARE, mPaint);
        }
        mFillPaint = new Paint(mPaint);
        mFillPaint.setColor(Color.WHITE);
        mFillPaint.setShader(new LinearGradient(100f, 0f, 100f, 200f, Color.WHITE, Color.WHITE, TileMode.CLAMP));

        if (Build.VERSION.SDK_INT >= 11) {
            setLayerType(LAYER_TYPE_SOFTWARE, mFillPaint);
        }
        mPaint.setShadowLayer(2f, 2F, 5F, SHADOW_COLOR);
        renderCornerLegPrototype();
        setPadding(PADDING, PADDING, PADDING, PADDING);

    }

    @Override
    protected void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }

    /**
     * 尖角path
     */
    private void renderCornerLegPrototype() {
        mCornerPath.moveTo(0, 0);
        mCornerPath.lineTo(PADDING * 1.5f, -PADDING / 1.5f);
        mCornerPath.lineTo(PADDING * 1.5f, PADDING / 1.5f);
        mCornerPath.close();
    }

    public void setCornerParams(int xLocation, final CornerLegOrientation cornerLegOrientation, final float cornerOffset) {
        this.xLocation = xLocation;
        mCornerLegOffset = cornerOffset;
        this.mCornerLegOrientation = cornerLegOrientation;
    }

    /**
     * 根据显示方向,获取尖角位置矩阵
     * @param width
     * @param height
     * @return
     */
    private Matrix renderCornerLegMatrix(final float width, final float height) {

        float dstX = 0;
        float dstY = 0;
        final Matrix matrix = new Matrix();

        switch (mCornerLegOrientation) {
            case TOP:
                dstX = xLocation;
                dstY = 0;
                matrix.postRotate(90);
                break;

            case BOTTOM:
                dstY = height;
                dstX = xLocation;
                matrix.postRotate(270);
                break;
        }

        matrix.postTranslate(dstX, dstY);
        return matrix;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        final float width = canvas.getWidth();
        final float height = canvas.getHeight();

        mPath.rewind();
        mPath.addRoundRect(new RectF(PADDING, PADDING, width - PADDING, height - PADDING), CORNER_RADIUS, CORNER_RADIUS, Direction.CW);//画圆角举行
        mPath.addPath(mCornerPath, renderCornerLegMatrix(width, height));//添加尖角

        canvas.drawPath(mPath, mPaint);
        canvas.scale((width - STROKE_WIDTH) / width, (height - STROKE_WIDTH) / height, width / 2f, height / 2f);
        canvas.drawPath(mPath, mFillPaint);
    }
}

使用:

CornerPopupWindow mPopupWindow = new CornerPopupWindow(context);
mPopupWindow.setCornerView(view);
PublicViewUtils.backgroundAlpha(context, 0.4f);
mPopupWindow.show(按钮);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,265评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,274评论 1 288
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,087评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,479评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,782评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,218评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,594评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,316评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,955评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,274评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,803评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,177评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,732评论 3 229
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,953评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,687评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,263评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,189评论 2 258