其他
Android实现人物关系图谱，人物影响力图!
关注「技术最TOP」，早上8:40不见不散！
作者：
littletree_风中追风链接：https://juejin.cn/post/7123133679274033189
前言
最近在做一个项目，其中有一个页面是要做一个类似于个人分享关系图的效果。于是找了网上很多demo，借鉴的一些思路和方法，打算自己动手撸一个出来。
效果
整体思路
创建自定义的view继承 Framelayout捆绑布局Relativelayout，放置一个绘制线的布局，和一个绘制头像的布局(用来add动态创建的iamgeview)，这里默认给予3000*3000。获取数据，根据degree分别筛选出不同层次的实体类list。 绘制第一层头像（即中心点）：默认中心点的坐标为 1500*1500，以及set4个边缘的坐标（以正方形考虑）,并绘制头像。绘制第二层头像：获取第二层数据,360度除以个数，计算出角度，根据角度，计算出中心点，并绘制头像。 绘制第三层头像：根据第二层的角度和坐标，计算出角度和中心点，并绘制头像。(重点需要头像去重) 根据坐标点画线，并设置长按和缩放事件。
所以在我的自定义view中包含2个view（设置了默认布局大小3000*3000）
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--线布局-->
<com.littletree.mypersonalconnectionmap.customview.LineImageView
android:id="@+id/lineImageView"
android:layout_width="3000dp"
android:layout_height="3000dp" />
<!--圆形头像布局-->
<FrameLayout
android:id="@+id/layouPoints"
android:layout_width="3000dp"
android:layout_height="3000dp"
android:layout_gravity="center_vertical" />
</RelativeLayout>
常量的配置信息
FrameLayout layouPoints; //用于添加头像的布局
private LineImageView lineImageView; //画线以及中心头像的小圆(项目ui图的需要)
private List<AtmanRelation> sourceList = new ArrayList<>(); //包含1,2,3层的实体类(接口返回的数据)
private ArrayList<PointLeo> points = new ArrayList<>();//用于连线的。
private ArrayList<RectPoint> rects = new ArrayList<>();//用于判断重叠的
private ArrayList<RelationBean> reList_2 = new ArrayList<>();//第二度关系的集合，目的是 为了绘制完一度后再绘制二度
private int width_degress_one = PUtil.dip2px(getContext(), 85); //第一层头像直径
private int width_degress_two = PUtil.dip2px(getContext(), 50); //第二层头像直径
private int width_degress_three = PUtil.dip2px(getContext(), 30); //第三层头像直径
private Context mcontext;
private int mAngleNum = 120; //第三层扩散的角度
private int LastCenterX; //理论中心点为1500dp处
private int LastCenterY; //理论中心点为1500dp处
绘制中心点的头像
ArrayList<AtmanRelation> myAtmanList = getDegree(0); //getDegree()为获取第几层数据的方法
myAtmanList.get(0).setY_center(LastCenterX);
myAtmanList.get(0).setX_center(LastCenterY);
myAtmanList.get(0).setRectPoint(new RectPoint(LastCenterX - width_degress_one / 2, LastCenterY - width_degress_one / 2
, LastCenterX + width_degress_one / 2, LastCenterY + width_degress_one / 2));
showAvatar(LastCenterX - width_degress_one / 2, LastCenterY- width_degress_one / 2, myAtmanList.get(0)); //showAvatar()为绘制头像
绘制第二层
根据第一层(中心点)坐标,以及第二层的个数，用360度分割，根据所得的角度计算出第二层各自的坐标，获取坐标还得判断是否位置重复，如果位置被占用就增加一个固定长度重复判断，直至成功。再用该点去计算第三层的数据。
int circle = width_degress_one;//中心头像的直径
ArrayList<AtmanRelation> oneAtmanList = getDegree(1);
int number = oneAtmanList.size();//当前第二层的数量
int x_center = LastCenterX;
int y_center = LastCenterY;
for (int i = 0; i < oneAtmanList.size(); i++) {
AtmanRelation itemBean = oneAtmanList.get(i);
double jiaod = 360 / ((double) oneAtmanList.size()); //计算出每个头像间隔的角度
double currentJD = 0 + jiaod * (i + 1); //每个头像的角度
int X1 = 0;
int Y1 = 0;
//根据角度和上一层中心点的坐标，计算出自己的坐标
if (currentJD != 0 && currentJD != 180 && currentJD != 360) {
X1 = x_center + (int) (circle * (Math.cos(Math.PI * currentJD / 180)));
Y1 = y_center + (int) (circle * (Math.sin(Math.PI * currentJD / 180)));
} else {
if (currentJD == 0 || currentJD == 360) {
X1 = x_center + circle;
Y1 = y_center;
} else {
Y1 = y_center;
X1 = x_center - circle;
}
}
int trueX1 = 0;
int trueY1 = 0;
//当前点的所在区域
RectPoint leoPoint;
trueX1 = X1 - width_degress_two / 2;
trueY1 = Y1 - width_degress_two / 2;
leoPoint = new RectPoint(trueX1, trueY1, trueX1 + width_degress_two, trueY1 + width_degress_two); //范围的4个坐标
if (checkHaveRect(leoPoint)) {//检查是否有重叠，如有重复，要增加一个固定的长度再次循环,直到不再重复
repetAdd(x_center, y_center, circle, currentJD, 1, itemBean);
} else {
//false 没有重叠，则直接添加
showAvatar(trueX1, trueY1, itemBean);
//point记录数据，point最后用于连线
points.add(new PointLeo(x_center, y_center, X1, Y1, itemBean.getType(), itemBean.getDegree(), true));
// 把当前的中心点坐标 和当前点的所在区域存储带rects中，到时候要用于判断是否位置重复
itemBean.setX_center(X1);
itemBean.setY_center(Y1);
//这边增加一点范围，因为ui需要，布局并不只有头像，还有名称之类，可自行调节
itemBean.setRectPoint(new RectPoint(trueX1 - PUtil.dip2px(getContext(), 16), trueY1 - PUtil.dip2px(getContext(), 16),
trueX1 + PUtil.dip2px(getContext(), 16), trueY1 + PUtil.dip2px(getContext(), 16)));
rects.add(leoPoint);
/**
* 这里是添加成功关系以后，进行的下一层 关系的绘制
* */
ArrayList<AtmanRelation> sonList = getsonList(itemBean);//获取该点下一层的数据
if (sonList.size() > 0) {
int numberNex = sonList.size();//下一层关系有几个。
int circle2 = width_degress_three;
//存储到relist_2中
reList_2.add(new RelationBean(circle2, numberNex, X1, Y1, currentJD, 2, sonList));
}
}
if (i == number - 1) {
if (reList_2.size() > 0) {
for (int j = 0; j < reList_2.size(); j++) {
RelationBean relationBean = reList_2.get(j);
if (relationBean.getNumberNex() > 0) {
//绘制第三层
addNexPoint(relationBean.getCircle(), relationBean.getNumberNex(), relationBean.getX1(), relationBean.getY1(), relationBean.getTrueJD(), relationBean.getRelation(), relationBean.getAtmanRelations(), j);
}
}
}
}
}
绘制第三层
该方法与绘制第二层的区别在于获取角度，是在原角度的基础上减去扩散角度的一半。
double trueJD = nowJD % 360 - mAngleNum/2;
如果设置第四层，第五层，可以继续沿用该方法
public void addNexPoint(int circleNex, double numberNex, int x_centerNex, int y_centerNex, double nowJD, int relation, ArrayList<AtmanRelation> atmanRelations, int index) {
int circle = circleNex;//半径的长度
double number = numberNex + 1;//当前关系个数。当然要加上父类那条线
int x_center = x_centerNex;//目前坐标中心点
int y_center = y_centerNex;//目前坐标重新点
double trueJD = nowJD % 360 - mAngleNum/2;
for (int i = 0; i < numberNex; i++) {
AtmanRelation itemBean = atmanRelations.get(i);
//相隔的角度就是
double jiaod = mAngleNum / number;
double currentJD = trueJD + jiaod * (i + 1);
int X1 = 0;
int Y1 = 0;
if (currentJD != 0 && currentJD != 180 && currentJD != 360) {//别面有错误出现
X1 = x_center + (int) (circle * (Math.cos(Math.PI * currentJD / 180)));
Y1 = y_center + (int) (circle * (Math.sin(Math.PI * currentJD / 180)));
} else {
if (currentJD == 0 || currentJD == 360) {
X1 = x_center + circle;
Y1 = y_center;
} else {
Y1 = y_center;
X1 = x_center - circle;
}
}
int trueX1 = 0;
int trueY1 = 0;
//当前点的所在区域则是
RectPoint leoPoint;
if (0 == itemBean.getDegree()) {
trueX1 = X1 - width_degress_one / 2;//减去自身控件的长度
trueY1 = Y1 - width_degress_one / 2;//减去自身控件的长度
leoPoint = new RectPoint(trueX1 - width_degress_one, trueY1 - width_degress_one,
trueX1 + width_degress_one, trueY1 + width_degress_one);
} else if (1 == itemBean.getDegree()) {
trueX1 = X1 - width_degress_two / 2;//减去自身控件的长度
trueY1 = Y1 - width_degress_two / 2;//减去自身控件的长度
leoPoint = new RectPoint(trueX1, trueY1,
trueX1 + width_degress_two, trueY1 + width_degress_two);
} else {
trueX1 = X1 - width_degress_three / 2;//减去自身控件的长度
trueY1 = Y1 - width_degress_three / 2;//减去自身控件的长度
leoPoint = new RectPoint(trueX1, trueY1,
trueX1 + width_degress_three, trueY1 + width_degress_three + PUtil.dip2px(getContext(), 20));
}
if (checkHaveRect(leoPoint)) {//检查是否有重叠，true为有重叠。要增加半径的长度
repetAdd(x_center, y_center, circle, currentJD, relation, itemBean);
} else {//false 没有重叠，则直接添加
showAvatar(trueX1, trueY1, itemBean);
points.add(new PointLeo(x_center, y_center, X1, Y1, itemBean.getType(), itemBean.getDegree(), true));
itemBean.setX_center(X1);
itemBean.setY_center(Y1);
//这边增加比上一层略少的范围,越往外圆越小
itemBean.setRectPoint(new RectPoint(trueX1 - PUtil.dip2px(getContext(), 8), trueY1 - PUtil.dip2px(getContext(), 8),
trueX1 + PUtil.dip2px(getContext(), 8), trueY1 + PUtil.dip2px(getContext(), 8)));
rects.add(leoPoint);
}
}
}
检查是否重复方法
只要循环判断是否在范围内即可。
public boolean checkHaveRect(RectPoint rectPoint) {
for (int i = 0; i < rects.size(); i++) {
RectPoint currenRect = rects.get(i);
if (rectPoint.getLeft_x() > currenRect.getRigth_x()
|| rectPoint.getLeft_top_y() > currenRect.getRight_bottom_y()
|| rectPoint.getRight_bottom_y() < currenRect.getLeft_top_y()
|| rectPoint.getRigth_x() < currenRect.getLeft_x()
) {
} else {
return true;//只要不符合上面条件 则有重叠
}
}
return false;//没有包含在内
}
添加头像方法
如果只要头像可用imageview代替，这边需要添加背景和文字，我使用了supertextview
SuperTextView imageView_bottom_yy = new SuperTextView(getContext());
imageView_bottom_yy.setUrlImage(itemBean.getVisitorAvatar());
LayoutParams leoParams_bottom_yy = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layouPoints.addView(imageView_bottom_yy, leoParams_bottom_yy);
layouPoints.addView(textview_name, Params_textview_name);
画线布局
在所有点绘制好后，传入存储的点坐标，即可绘制
public class LineImageView extends View {
//test
private Paint mPaint;
private Paint PointPaint; //8个点
private ArrayList<PointLeo> points;
public LineImageView(Context context) {
this(context, null);
}
public LineImageView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LineImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(getResources().getColor(R.color.relationship_line));
mPaint.setStyle(Paint.Style.STROKE);//设置填充样式
mPaint.setStrokeWidth(1);//设置画笔宽度
PointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
PointPaint.setColor(getResources().getColor(R.color.relationship_line));
PointPaint.setStyle(Paint.Style.STROKE);//设置填充样式
PointPaint.setStrokeWidth(PUtil.dip2px(getContext(), 5));//设置画笔宽度
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (points != null) {
for (int i = 0; i < points.size(); i++) {
PointLeo pointLeo = points.get(i);
PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 2);
mPaint.setPathEffect(pathEffect);
Path linePath = new Path();
linePath.moveTo(pointLeo.getX(), pointLeo.getY());
linePath.lineTo(pointLeo.getX1(), pointLeo.getY1());
canvas.drawPath(linePath, mPaint);
}
}
}
public void setLines(ArrayList<PointLeo> points) {
this.points = points;
invalidate();
}
}
添加缩放和长按手势
因为需要上下左右滑动,在我的自定义view外我套了一层HVScrollView
然后在HVScrollView上添加了缩放和长按手势。
//缩放手势
public class ScaleGestureListener implements ScaleGestureDetector.OnScaleGestureListener {
@Override
public boolean onScale(ScaleGestureDetector detector) {
float previousSpan = detector.getPreviousSpan();
float currentSpan = detector.getCurrentSpan();
if (currentSpan < previousSpan) {
// 缩小
scale = preScale - (previousSpan - currentSpan) / 1000;
if (scale < 0.2f) {
scale = 0.2f;
}
} else {
// 放大
scale = preScale + (currentSpan - previousSpan) / 1000;
if (scale > 1.0f) {
scale = 1.0f;
}
}
// 缩放view
shaderImage.setScaleX(scale);
shaderImage.setScaleY(scale);
return false;
}
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
return true;
}
@Override
public void onScaleEnd(ScaleGestureDetector detector) {
preScale = scale;//记录本次缩放比例
}
}
//长按手势
public class LongPressGestureListener extends GestureDetector.SimpleOnGestureListener {
@Override
public void onLongPress(MotionEvent e) {
//保存图片dialog
dialog_twobutton_notitle.show();
}
}
添加到hvscrollview中
mScaleGestureDetector = new ScaleGestureDetector(PersonalConnectionMapActivity.this,
new ScaleGestureListener());
mLongPressGestureListener = new GestureDetector(PersonalConnectionMapActivity.this,
new LongPressGestureListener());
```
hvScrollView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (moreFinger) {
mScaleGestureDetector.onTouchEvent(motionEvent);
}
mLongPressGestureListener.onTouchEvent(motionEvent);
switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//第一个手指按下事件
break;
case MotionEvent.ACTION_POINTER_DOWN:
//第二个手指按下事件
moreFinger = true;
break;
case MotionEvent.ACTION_UP:
moreFinger = false;
mhandler.sendEmptyMessage(12);//手指放开来个回弹效果
break;
}
return moreFinger;
}
});
在使用过程中遇到的问题
如果数据量过小，设置的滑动布局却为3000*3000，空白占比太大,保存的图片也有很多留白。
如果数据量过大，数据不会显示全。
解决办法
事先需要根据数据计算出最大宽高设置给hvscrollview，然后开始绘制。计算的过程和绘制过程基本相同，就不再贴出。
hvScrollView.post(new Runnable() {
@Override
public void run() {
shaderImage.setVisibility(View.GONE);
shaderImage.setmAngleNum(mAngleNum);
shaderImage.setmDiameter(mDiameter_one,mDiameter_two,mDiameter_three);
shaderImage.getmaxXYRange(atmanRelationList);
shaderImage.changeViewRangle(hvScrollView.getWidth(),hvScrollView.getHeight());
shaderImage.setSourceList(atmanRelationList);
tryScale(scale, 0.9f);
}
});
结尾
效果基本是实现了，不过还是有问题存在，如果数据量过大，容易造成内存溢出。（虽然我这边项目数据不大）
本人也试过用view的ondraw在绘制显示，从而解决内存溢出的问题，不过效果不太理想，并且项目需求是需要整体保存图片，也就没有意义了，如果有其他更好的方法，也请留言一起进步。Git地址：https://github.com/littletreeSun/PersonalConnectionMap
---END---