带尖角的PopupWindow（可以自动调节小尖角的位置）

效果图如下（有需求的同学可以来看看呦）：







大家可以看到这个效果，改变弹窗按钮的位置，PopupWindow中的小尖角位置也会随之改变，并且调整到一个合适位置。

这个合适的位置一般情况下是小尖角会指向弹窗按钮的中间。

好啦效果看完了，我们来看一下这个效果的实现方式。

第一步，绘制尖角

小尖角的绘制我能想到的有两种方法：

方法一：让美工妹妹做一张图，这个图就是小尖角，这种方法是最简单最暴力的，但是它的局限性太强了，就颜色不可变的这一点我就放弃了这个方法。

方法二：使用自定义View去绘制一个三角形，这个方法虽说麻烦一点但是它的好处也是巨大的，使用自定义View绘制三角形，这个三角形的大小是可变的，颜色是可变的，三角形的方向也是可变的。

所以，最终我使用了方法二来绘制尖角。

我们来看一下这个绘制三角形的自定义View，代码如下：

package com.note.zl.sanjiopopupwindow;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by zhanglei on 2017/6/13.
* 画一个三角形
*/

public class SanJiaoView extends View {

private final int TOP = 0;
private final int BOTTOM = 1;
private final int RIGHT = 2;
private final int LEFT = 3;

/**
* 画三角的画笔
*/
private Paint mPaint = new Paint();

/**
* 三角的颜色
*/
private int color = 0xFF000000;

/**
* 三角的宽度
*/
private int width = 50;

/**
* 三角的高度
*/
private int height = 50;

/**
* 三角的方向
*/
private int direction = TOP;

public SanJiaoView(Context context) {
super(context);
}

public SanJiaoView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SanJiaoView, 0, 0);
color = a.getColor(R.styleable.SanJiaoView_sjv_color, color);
width = (int) a.getDimension(R.styleable.SanJiaoView_sjv_resolutionWidth, width);
height = (int) a.getDimension(R.styleable.SanJiaoView_sjv_resolutionHeight, height);
direction = a.getInt(R.styleable.SanJiaoView_sjv_direction, direction);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(width, height);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//设置画笔的颜色
mPaint.setColor(color);
//设置画笔抗锯齿
mPaint.setAntiAlias(true);
//设置画笔为实心的
mPaint.setStyle(Paint.Style.FILL);
//设置画笔的路径
Path path = new Path();
switch (direction) {
case TOP:
path.moveTo(0, width);
path.lineTo(width, height);
path.lineTo(width / 2, 0);
break;
case BOTTOM:
path.moveTo(0, 0);
path.lineTo(width / 2, height);
path.lineTo(width, 0);
break;
case RIGHT:
path.moveTo(0, 0);
path.lineTo(0, height);
path.lineTo(width, height / 2);
break;
case LEFT:
path.moveTo(0, height / 2);
path.lineTo(width, height);
path.lineTo(width, 0);
break;
}

path.close();
canvas.drawPath(path, mPaint);
}

}

代码不多，大家仔细看看应该是看的懂的，看不懂也没关系，直接拿过去用吧。

对了，还有这个view自定义属性的xml代码要贴出来，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="SanJiaoView">
<attr name="sjv_resolutionWidth" format="dimension" />
<attr name="sjv_resolutionHeight" format="dimension" />
<attr name="sjv_color" format="color" />
<attr name="sjv_direction">
<enum name="top" value="0" />
<enum name="bottom" value="1" />
<enum name="right" value="2" />
<enum name="left" value="3" />
</attr>
</declare-styleable>

</resources>

第二步，搭建PopupWindow的布局

我就不说了，大家直接看布局代码吧

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp">

<com.note.zl.sanjiopopupwindow.SanJiaoView
android:id="@+id/sanjiaoView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2.5dp"
app:sjv_color="@color/bgColor"
app:sjv_direction="top"
app:sjv_resolutionHeight="20dp"
app:sjv_resolutionWidth="20dp" />

<RelativeLayout
android:id="@+id/sanJiao_card"
android:layout_width="150dp"
android:layout_height="180dp"
android:background="@color/bgColor">

</RelativeLayout>
</LinearLayout>

第三步，调整小三角的位置并显示PopupWindow

调整小三角位置的逻辑我们是写在显示PopupWindow方法之前去处理的，显示PopupWindow需要一个参数，这个参数就是一个View，而这个View正是小三角需要指向的View，有了这个View我们就能计算很多东西了。

小三角位置的处理逻辑如下：

int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);

int left = view.getLeft();
int top = view.getTop();
int right = view.getRight();

//获取手机的分辨率
Display display = mActivity.getWindowManager().getDefaultDisplay();
int dWidth = display.getWidth();
int dHeight = display.getHeight();

//获取popupwindow布局的padding值
int paddingLeft = parentView.getPaddingLeft();
int paddingRight = parentView.getPaddingRight();
parentView.measure(w, h);
relative.measure(w, h);

//popupwindow主体的宽度
int width1 = relative.getMeasuredWidth();

//popwindow带padding的宽度
int widthP = width1 + paddingLeft + paddingRight;

//popupwindow上方控件的宽度
int parentWidth = right - left;

//小三角的宽度
sjv.measure(w, h);
int width = sjv.getMeasuredWidth();

//小三角最大的marginLeft值
int maxMarginLeft = width1 - width;

//控件需调整的margin值
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

//判断使用那种计算方式来计算小三角的位移量
int centerIndex;
if (parentWidth > widthP) {
centerIndex = maxMarginLeft / 2;
} else if ((dWidth - left) > widthP) {
centerIndex = parentWidth / 2 - width / 2 - paddingLeft;
} else {
int rWidth = dWidth - right;
centerIndex = width1 - (parentWidth / 2 + rWidth - paddingRight);
}

if (centerIndex > maxMarginLeft) {
centerIndex = maxMarginLeft;
}

params.setMargins(centerIndex, 0, 0, 0);
sjv.setLayoutParams(params);
popupWindow.showAsDropDown(view);

PopupWindow的创建和显示我就不在这个说了，下面是这个小项目的源码地址：

https://github.com/95768Lei/BaseProject.git

在这个项目中你会看到有一个叫做sanjiopopupwindow的依赖项目，大家将这个项目导入工程就可以了，如果有什么不合适的地方大家可以直接在源码中修改，毕竟没有多少东西。

本文章到此结束，希望能给大家带来帮助。