- 完整代碼
/**
* Created by wanggang on 2017/4/20.
* 家族樹
*/
public class FamilyTreeView extends ViewGroup {
/**
* 界面可滾動的左邊界
*/
private int leftBorder;
/**
* 界面可滾動的上邊界
*/
private int topBorder;
/**
* 界面可滾動的右邊界
*/
private int rightBorder;
/**
* 界面可滾動的下邊界
*/
private int bottomBorder;
FamilyTreeAdapter familyTreeAdapter;
private Paint mPaint;
int colSpace;
int lineSpace;
int radius; // 弧形的半徑
int itemWidth;
int itemHeight;
List<Ponit> ponits; // 記錄所有有軌跡的點
ValueAnimator mAnimator;
float mPercent;
Stack<PersonView> personViews; // 保存PersonView
boolean canLayout; // 是否正在添加View
boolean canMeasure; // 是否正在添加View
int layoutIndex;
public FamilyTreeAdapter getFamilyTreeAdapter() {
return familyTreeAdapter;
}
public void setFamilyTreeAdapter(FamilyTreeAdapter familyTreeAdapter) {
this.familyTreeAdapter = familyTreeAdapter;
}
public FamilyTreeView(Context context) {
super(context);
init();
}
public FamilyTreeView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FamilyTreeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
personViews = new Stack<>();
colSpace = MeasureUtils.dip2px(getContext(), 24);
lineSpace = MeasureUtils.dip2px(getContext(), 32);
radius = MeasureUtils.dip2px(getContext(), 6);
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(MeasureUtils.dip2px(getContext(), 1));
mPaint.setColor(Color.parseColor("#999999"));
mPaint.setAntiAlias(true);
setWillNotDraw(false);
mAnimator = ValueAnimator.ofFloat(0, 1);
mAnimator.setDuration(1000);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mPercent = (float) valueAnimator.getAnimatedValue();
invalidate();
}
});
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (canMeasure) {
canMeasure = false;
for (int i = 0; i < getChildCount(); i++) {
PersonView childView = (PersonView) getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
measureView(childView);
}
// setMeasuredDimension(rightBorder - leftBorder, bottomBorder - topBorder);
}
}
private void measureView(PersonView personView) {
PersonEntity personEntity = personView.getPersonEntity();
PersonData personData = personEntity;
itemWidth = personView.getMeasuredWidth();
itemHeight = personView.getMeasuredHeight();
changeMeasurePoint(personData.getCenterPoint());
int centerX = personData.getCenterPoint().x;
int centerY = personData.getCenterPoint().y;
if (centerX - itemWidth < leftBorder) {
leftBorder = centerX - itemWidth;
}
if (centerX + itemWidth > rightBorder) {
rightBorder = centerX + itemWidth;
}
if (centerY - itemHeight < topBorder) {
topBorder = centerY - itemHeight;
}
if (centerY + itemHeight > bottomBorder) {
bottomBorder = centerY + itemHeight;
}
}
public void changeMeasurePoint(Ponit ponit) {
ponit.x = ponit.coordinateX * (itemWidth + colSpace);
ponit.y = - ponit.coordinateY * (itemHeight + lineSpace);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (canLayout) {
canLayout = false;
for (int i = 0; i < getChildCount(); i++) {
PersonView personView = (PersonView) getChildAt(i);
layoutView(personView);
if (i == 0) {
personView.setSelected(true);
personView.setTitleColor(R.color.white);
} else {
personView.setSelected(false);
personView.setTitleColor(R.color.black);
}
}
mAnimator.start();
}
}
/**
* 通過中心點位置放置view
*/
private void layoutView(PersonView personView) {
PersonEntity personEntity = personView.getPersonEntity();
PersonData personData = personEntity;
itemWidth = personView.getMeasuredWidth();
itemHeight = personView.getMeasuredHeight();
changePoint(personData.getCenterPoint());
addDrawPoint(personData.getCenterPoint());
int centerX = personData.getCenterPoint().x;
int centerY = personData.getCenterPoint().y;
personView.layout(centerX - itemWidth / 2, centerY - itemHeight / 2,
centerX + itemWidth / 2, centerY + itemHeight / 2);
personView.setImage(personData.gender, personData.avatar);
personView.setTitle(personData.name);
}
// 坐標(biāo)系坐標(biāo)轉(zhuǎn)換成屏幕坐標(biāo)
public void changePoint(Ponit ponit) {
ponit.x = ponit.x - leftBorder;
ponit.y = ponit.y - topBorder;
}
private void addDrawPoint(Ponit ponit) {
if (ponits == null) {
ponits = new LinkedList<>();
}
ponits.add(ponit);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (ponits != null) {
for (int i = 0; i < ponits.size(); i++) {
Ponit ponit = ponits.get(i);
if (ponit.connecPonit != null) {
ponit.drawConnection(itemWidth, itemHeight, lineSpace, colSpace, radius);
canvas.drawPath(ponit.getSegment(mPercent), mPaint);
}
}
}
}
public void refreshUI() {
for (int i = 0; i < getChildCount(); i++) {
if (getChildAt(i) instanceof PersonView)
personViews.add((PersonView) getChildAt(i));
}
removeAllViews();
if (ponits != null) {
ponits.clear();
}
int childSize = familyTreeAdapter.dataList.size();
for (int i = 0; i < childSize; i++) {
PersonView personView = familyTreeAdapter.getPersonView(getPersonView(), this, familyTreeAdapter.dataList.get(i));
// addViewInLayout(personView, i, new LayoutParams(DensityUtil.dip2px(getContext(), 60), DensityUtil.dip2px(getContext(), 80)));
addView(personView);
}
canLayout = true;
canMeasure = true;
requestLayout();
}
private PersonView getPersonView() {
if (personViews != null && personViews.size() > 0)
return personViews.pop();
return null;
}
@Override
public void addView(View child) {
super.addView(child);
}
@Override
protected boolean addViewInLayout(View child, int index, LayoutParams params, boolean preventRequestLayout) {
return super.addViewInLayout(child, index, params, preventRequestLayout);
}
public int getLeftBorder() {
return leftBorder;
}
public int getTopBorder() {
return topBorder;
}
public int getRightBorder() {
return rightBorder;
}
public int getBottomBorder() {
return bottomBorder;
}
}
- 添加成員view
public void refreshUI() {
for (int i = 0; i < getChildCount(); i++) {
if (getChildAt(i) instanceof PersonView)
personViews.add((PersonView) getChildAt(i));
}
removeAllViews();
if (ponits != null) {
ponits.clear();
}
int childSize = familyTreeAdapter.dataList.size();
for (int i = 0; i < childSize; i++) {
PersonView personView = familyTreeAdapter.getPersonView(getPersonView(), this, familyTreeAdapter.dataList.get(i));
// addViewInLayout(personView, i, new LayoutParams(DensityUtil.dip2px(getContext(), 60), DensityUtil.dip2px(getContext(), 80)));
addView(personView);
}
canLayout = true;
canMeasure = true;
requestLayout();
}
這段代碼主要工作就是通過adapter中列表的數(shù)據(jù)权悟，往viewgroup中添加成員view。這里使用了canLayout和canMeasure來控制viewgroup的測量和layout次數(shù)推盛。之前使用了addViewInLayout來添加view峦阁，但是當(dāng)viewgroup被縮放的時候，所有添加的子view都不見了耘成，所以使用addView加控制變量來操作榔昔。
- 測量以及坐標(biāo)轉(zhuǎn)換
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (canMeasure) {
canMeasure = false;
for (int i = 0; i < getChildCount(); i++) {
PersonView childView = (PersonView) getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
measureView(childView);
}
}
}
private void measureView(PersonView personView) {
PersonEntity personEntity = personView.getPersonEntity();
PersonData personData = personEntity;
itemWidth = personView.getMeasuredWidth();
itemHeight = personView.getMeasuredHeight();
changeMeasurePoint(personData.getCenterPoint());
int centerX = personData.getCenterPoint().x;
int centerY = personData.getCenterPoint().y;
if (centerX - itemWidth < leftBorder) {
leftBorder = centerX - itemWidth;
}
if (centerX + itemWidth > rightBorder) {
rightBorder = centerX + itemWidth;
}
if (centerY - itemHeight < topBorder) {
topBorder = centerY - itemHeight;
}
if (centerY + itemHeight > bottomBorder) {
bottomBorder = centerY + itemHeight;
}
}
public void changeMeasurePoint(Ponit ponit) {
ponit.x = ponit.coordinateX * (itemWidth + colSpace);
ponit.y = - ponit.coordinateY * (itemHeight + lineSpace);
}
這里的主要功能是將每個成員節(jié)點的坐標(biāo)系坐標(biāo)轉(zhuǎn)換成屏幕的物理坐標(biāo)，其轉(zhuǎn)換規(guī)則就是changeMeasurePoint方法瘪菌。轉(zhuǎn)換成功之后再計算當(dāng)前viewgroup的邊界撒会，也就是leftBorder、rightBorder师妙、topBorder诵肛、bottomBorder的重新賦值。
- 成員view的排版布局
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (canLayout) {
canLayout = false;
for (int i = 0; i < getChildCount(); i++) {
PersonView personView = (PersonView) getChildAt(i);
layoutView(personView);
}
}
}
/**
* 通過中心點位置放置view
*/
private void layoutView(PersonView personView) {
PersonEntity personEntity = personView.getPersonEntity();
PersonData personData = personEntity;
itemWidth = personView.getMeasuredWidth();
itemHeight = personView.getMeasuredHeight();
changePoint(personData.getCenterPoint());
addDrawPoint(personData.getCenterPoint());
int centerX = personData.getCenterPoint().x;
int centerY = personData.getCenterPoint().y;
personView.layout(centerX - itemWidth / 2, centerY - itemHeight / 2,
centerX + itemWidth / 2, centerY + itemHeight / 2);
personView.setImage(personData.gender, personData.avatar);
personView.setTitle(personData.name);
}
經(jīng)過測量過程的坐標(biāo)計算之后默穴，onLayout就簡單很多了怔檩，根據(jù)算好的坐標(biāo)，將對應(yīng)的成員view布局到viewgroup中蓄诽。
- 最后還有繪制連接線的過程薛训，有了坐標(biāo)，這塊就是根據(jù)canvas的api畫線就行仑氛，不多做解釋了
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (ponits != null) {
for (int i = 0; i < ponits.size(); i++) {
Ponit ponit = ponits.get(i);
if (ponit.connecPonit != null) {
ponit.drawConnection(itemWidth, itemHeight, lineSpace, colSpace, radius);
canvas.drawPath(ponit.getSegment(mPercent), mPaint);
}
}
}
}
至此许蓖，家族樹就布局完成了，最后看一下最終效果
SVID_familytree.gif
