Android實現人物關系圖譜，人物影響力圖!

前言

最近在做一個項目，其中有一個頁面是要做一個類似于個人分享關系圖的效果。于是找了網上很多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在繪制顯示，從而解決內存溢出的問題，不過效果不太理想，并且項目需求是需要整體保存圖片，也就沒有意義了，如果有其他更好的方法，也請留言一起進步。

https://mp.weixin.qq.com/s/TJArkzVGk7zyK1u_8x3Big