时光荏苒，岁月如梭，不知不觉已有一年之久没写过文章，都生疏了（其实是不会写）
8cd85996d9ac394179ee3bed.jpg
刚好最近有一个连线题的需求，经过连夜奋战终于给肝出来了，感觉写的也还行，就想着分享出来，于是就有了这篇文章，如果有问题还希望大家能指出来~废话不多说，先放一张效果图：
效果图.png
先冷静分析一波：有左右两列view，点击后用线连接，中途可以重新连线，所有线连接完之后比对答案，对错用不同颜色的线标记。
实现思路
首先确定是自定义ViewGroup，两列view的边缘中点作为线的起始点，view的宽高最好统一，方便计算坐标。另外具体业务的数据和UI界面各有不同，所以不能约束太死，要做到解耦，还得用泛型。
github地址：https://github.com/zaaach/LineMatchingView，可以直接去看完整代码。
敲代码
①定义一条线，因为只在内部使用，就用内部类即可，记录起始坐标、颜色、连接左右view的索引
private static class Line {
public float startX;
public float startY;
public float endX;
public float endY;
public int color;
public int start;
public int end;
}
②对数据和view进行封装
private class LinkableWrapper {
public Line line;
public float pointX;
public float pointY;
public boolean lined;
public View view;
public T item;
}
③对外提供接口，用于UI和数据的绑定。这里算是借鉴了RecyclerView的adpater，为了让两列view展示的更灵活一些，增加了itemType
public interface LinkableAdapter<T> {
View getView(T item, ViewGroup parent, int itemType, int position);
int getItemType(T item, int position);
void onBindView(T item, View view, int position);
void onItemStateChanged(T item, View view, int state, int position);
boolean isCorrect(T left, T right, int l, int r);
}
主菜来了，自定义ViewGroup
public class LineMatchingView<T> extends ViewGroup {
//item state
public static final int NORMAL = 100;
public static final int CHECKED = 101;
public static final int LINED = 102;
public static final int CORRECT = 103;
public static final int ERROR = 104;
private List<LinkableWrapper> leftItems;
private List<LinkableWrapper> rightItems;
private final List<Line> oldLines = new ArrayList<>();//需要移除的线
private final List<Line> newLines = new ArrayList<>();//需要画的线
private LinkableAdapter<T> linkableAdapter;
}
然后就是onMeasure()和onLayout()两步走，在测量之前，先设置数据
public LineMatchingView<T> init(@NonNull LinkableAdapter<T> adapter){
this.linkableAdapter = adapter;
return this;
}
public void setItems(@NonNull List<T> left, @NonNull List<T> right){
if (linkableAdapter == null) {
throw new IllegalStateException("LinkableAdapter must not be null, please see method setLinkableAdapter()");
}
leftItems = new ArrayList<>();
rightItems = new ArrayList<>();
addItems(left, true);
addItems(right, false);
resultSize = Math.min(leftItems.size(), rightItems.size());
}
private void addItems(List<T> list, boolean isLeft){
for (int i = 0; i < list.size(); i++) {
T item = list.get(i);
//生成view并添加到控件
int type = linkableAdapter.getItemType(item, i);
View view = linkableAdapter.getView(item, this, type, i);
addView(view);
int index = i;
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (finished) return;
if (isLeft) {
//先恢复上个点击的item状态
if (currLeftChecked >= 0) {
notifyItemStateChanged(currLeftChecked, leftItems.get(currLeftChecked).lined ? LINED : NORMAL, true);
}
if (currLeftChecked == index) {
currLeftChecked = -1;
} else {
currLeftChecked = index;
notifyItemStateChanged(index, CHECKED, true);
drawLineBetween(currLeftChecked, currRightChecked);
}
}else {
if (currRightChecked >= 0) {
notifyItemStateChanged(currRightChecked, rightItems.get(currRightChecked).lined ? LINED : NORMAL, false);
}
if (currRightChecked == index){
currRightChecked = -1;
}else {
currRightChecked = index;
notifyItemStateChanged(index, CHECKED, false);
drawLineBetween(currLeftChecked, currRightChecked);
}
}
}
});
LinkableWrapper wrapper = new LinkableWrapper();
wrapper.item = item;
wrapper.view = view;
if (isLeft){
leftItems.add(wrapper);
}else {
rightItems.add(wrapper);
}
}
}
开始测量，分别测量左右两列view，计算出两列的最大宽度之和以及最大高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int[] measuredLeftSize = measureColumn(leftItems, widthMeasureSpec, heightMeasureSpec);
int measuredLeftWidth = measuredLeftSize[0];
int measuredLeftHeight = measuredLeftSize[1];
leftMaxWidth = measuredLeftSize[0];
int[] measuredRightSize = measureColumn(rightItems, widthMeasureSpec, heightMeasureSpec);
int measuredRightWidth = measuredRightSize[0];
int measuredRightHeight = measuredRightSize[1];
int wMode = MeasureSpec.getMode(widthMeasureSpec);
int hMode = MeasureSpec.getMode(heightMeasureSpec);
setMeasuredDimension(
wMode == MeasureSpec.EXACTLY ? width : measuredLeftWidth + measuredRightWidth + getPaddingLeft() + getPaddingRight() + horizontalPadding,
hMode == MeasureSpec.EXACTLY ? height : Math.max(measuredLeftHeight, measuredRightHeight) + getPaddingTop() + getPaddingBottom());
}
private int[] measureColumn(List<LinkableWrapper> list, int widthMeasureSpec, int heightMeasureSpec){
int measuredWidth = 0;
int measuredHeight = 0;
for (int i = 0; i < list.size(); i++) {
LinkableWrapper wrapper = list.get(i);
View child = wrapper.view;
LayoutParams lp = child.getLayoutParams();
if (lp != null){
if (itemWidth > 0){
lp.width = itemWidth;
}
if (itemHeight > 0){
lp.height = itemHeight;
}
}
measureChild(child, widthMeasureSpec, heightMeasureSpec);
measuredWidth = Math.max(measuredWidth, child.getMeasuredWidth());
measuredHeight += child.getMeasuredHeight() + (i > 0 ? verticalPadding : 0);
}
return new int[]{measuredWidth, measuredHeight};
}
测量完毕之后开始布局，同时通过接口进行view的数据绑定
private void doLayout(List<LinkableWrapper> list, int left, int top, boolean isLeft){
if (list == null) return;
for (int i = 0; i < list.size(); i++) {
LinkableWrapper wrapper = list.get(i);
View view = wrapper.view;
int w = view.getMeasuredWidth();
int h = view.getMeasuredHeight();
view.layout(left, top, left + w, top + h);
if (linkableAdapter != null){
linkableAdapter.onBindView(wrapper.item, view, i);
}
wrapper.pointX = isLeft ? left + w : left;
wrapper.pointY = top + h / 2f;
top += h + verticalPadding;
}
}
最后就是关键的画线部分，需要重写dispatchDraw()方法。在画线之前，如果两边view连过线，需要先擦掉然后再画新的线，分别用两个列表oldLines和newLines记录这些线，擦掉就是把paint的color设置透明。具体操作：先把旧的line添加到oldLines中，再从newLines中移除，这里如果两条线的起始点坐标一样就视为同一条线。
private void drawLineBetween(int leftIndex, int rightIndex){
if (leftIndex < 0 || rightIndex < 0) return;
//移除旧的连线
LinkableWrapper leftItem = leftItems.get(leftIndex);
if (leftItem.lined){
Line oldLine = leftItem.line;
if (oldLine != null){
oldLines.add(oldLine);
setLined(oldLine.end, false, false);
notifyItemStateChanged(oldLine.end, NORMAL, false);
}
}
LinkableWrapper rightItem = rightItems.get(rightIndex);
if (rightItem.lined){
Line oldLine = rightItem.line;
if (oldLine != null){
oldLines.add(oldLine);
setLined(oldLine.start, false, true);
notifyItemStateChanged(oldLine.start, NORMAL, true);
}
}
if (leftItem.lined || rightItem.lined) {
for (Iterator<Line> iterator = newLines.iterator(); iterator.hasNext(); ) {
Line line = iterator.next();
if (line.equals(leftItem.line) || line.equals(rightItem.line)) {
iterator.remove();
}
}
}
//生成新的连线
Line newLine = new Line(leftItem.pointX, leftItem.pointY, rightItem.pointX, rightItem.pointY);
newLine.start = leftIndex;
newLine.end = rightIndex;
newLine.color = lineNormalColor;
newLines.add(newLine);
leftItem.lined = true;
rightItem.lined = true;
notifyItemStateChanged(leftIndex, LINED, true);
notifyItemStateChanged(rightIndex, LINED, false);
//重置
currLeftChecked = -1;
currRightChecked = -1;
if (resultSize == newLines.size()){
finished = true;
checkResult();
}
invalidate();
leftItem.line = newLine;
rightItem.line = newLine;
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
linePaint.setColor(Color.TRANSPARENT);
for (Line line : oldLines) {
canvas.drawLine(line.startX, line.startY, line.endX, line.endY, linePaint);
}
oldLines.clear();
for (Line line : newLines) {
linePaint.setColor(line.color);
canvas.drawLine(line.startX, line.startY, line.endX, line.endY, linePaint);
}
}
连线完成之后比对答案，是否正确也是通过接口让使用者去判断，这里只需要根据对错更新线的颜色和view的状态即可
private void checkResult() {
for (Line line : newLines) {
int l = line.start;
int r = line.end;
if (linkableAdapter != null){
if (linkableAdapter.isCorrect(leftItems.get(l).item, rightItems.get(r).item, l, r)){
line.color = lineCorrectColor;
notifyItemStateChanged(l, CORRECT, true);
notifyItemStateChanged(r, CORRECT, false);
}else {
line.color = lineErrorColor;
notifyItemStateChanged(l, ERROR, true);
notifyItemStateChanged(r, ERROR, false);
}
}
}
}
OK、至此连线题的功能就全部实现了，使用时只需要调用init()和setItems()两个方法，很方便有没有~
再看下最终实现效果
line_matching_view.gif
github地址：LineMatchingView，最后一键三连求支持！！！
网友评论