UETool 仓库地址：https://github.com/eleme/UETool ，UETool 的功能很多，这里主要是分析 catch 功能

起步分析

  1. 图 1 中圈住的控制面板对应 UETMenu 文件，当点击 catch 的时候会启动一个透明的 Activity - TransparentActivity，注意这里无痕迹的启动动画。
  2. TransparentActivity 启动需要传递一个参数：type，你想使用控制面板中的哪一个功能就传递哪一个 type，TransparentActivity 会根据 type 来选择初始化具体的 CollectViewsLayout 子类实例。
  3. 以 catch 功能为例，传递的 type 是 TransparentActivity.Type.TYPE_EDIT_ATTR，就会初始化 EditAttrLayout 实例，并加入 TransparentActivity 的布局中。
  4. TransparentActivity 启动之前，UETool 单例也会保存一份对当前顶层 Activity 。
  5. 不论什么 type 传入 TransparentActivity，都会初始化一个 BoardTextView ，对应使用功能后在屏幕左下角的信息板。
    除了 catch 能力外，其他能力的逻辑也是这样的

为什么需要初始化一个 CollectViewsLayout 子类实例

  1. CollectViewsLayout 会重写 onAttachedToWindow 方法，在这个方法中会根据保存在 UETool 单例中的顶层 Activity ，反射拿到其持有的DecorView

  2. 根据 DecorView 就可以拿到对应的控件树，会一层层遍历拿到所有的 View。将 View 封装成 Element，并将它们按照面积从大到小排序。这些封装好的 Element 最终都会被加到一个 List 中。

  3. CollectViewsLayout 提供获取指定坐标下 Element 的方法。选择 catch 后，选中一个 View 弹出的 dialog 展示的信息就是来自这个方法获取的 Element。

    1
    2
    Element getTargetElement(float x, float y);
    List<Element> getTargetElements(float x, float y);

  4. CollectViewsLayout 还提供对指定位置绘制线条和文本。选择 catch 后，选中一个 View ，那个 View 周围的红线和宽高数据就是通过这个方法绘制的。

    1
    2
    protected void drawText(Canvas canvas, String text, float x, float y)
    protected void drawLineWithText(Canvas canvas, int startX, int startY, int endX, int endY, int endPointSpace)

详细说说 EditAttrLayout

之前说到初始化后的 EditAttrLayout 实例，会被加入到 TransparentActivity 的布局中。所以，我们的触摸事件都会被 EditAttrLayout 接收到。因此，我们重点看下 EditAttrLayout 的 onTouchEvent 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
private Element targetElement;
private IMode mode = new ShowMode();
private float lastX, lastY;

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            lastX = event.getX();
            lastY = event.getY();
            break;
        case MotionEvent.ACTION_UP:
            mode.triggerActionUp(event);
            break;
        case MotionEvent.ACTION_MOVE:
            mode.triggerActionMove(event);
            break;
    }
    return true;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (targetElement != null) {
        canvas.drawRect(targetElement.getRect(), areaPaint);
        mode.onDraw(canvas);
    }
}

public interface IMode {
    void onDraw(Canvas canvas);
    void triggerActionMove(MotionEvent event);
    void triggerActionUp(MotionEvent event);
}

通过阅读我们知道，移动和抬起会触发 IMode 的 triggerActionMove 和 triggerActionUp 方法，并且重绘的时候也会触发 IMode 的 onDraw 方法。而默认的 IMode 是 ShowMode 实例，所以接下来先看 ShowMode 实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class ShowMode implements IMode {
    @Override
    public void onDraw(Canvas canvas) {
        Rect rect = targetElement.getRect();
        drawLineWithText(canvas, rect.left, rect.top - lineBorderDistance, rect.right, rect.top - lineBorderDistance);
        drawLineWithText(canvas, rect.right + lineBorderDistance, rect.top, rect.right + lineBorderDistance, rect.bottom);
    }

    @Override
    public void triggerActionMove(MotionEvent event) { do nothing }

    @Override
    public void triggerActionUp(final MotionEvent event) {
        final Element element = getTargetElement(event.getX(), event.getY());
        if (element != null) {
            targetElement = element;
            invalidate();
            if (dialog == null) {
                dialog = new AttrsDialog(getContext());
                dialog.setAttrDialogCallback(...);
                dialog.setOnDismissListener(...);
            }
            dialog.show(targetElement);
        }
    }
}

阅读之后，我们可以发现当用户选择 catch 功能，点击屏幕抬起后。我们会根据触摸的坐标去调用在 CollectViewsLayout 中提供的获取指定坐标下 Element 的方法，如果可以获取到就会弹出一个
AttrsDialog 用来展示这个 View 对应的数据。并且会调用 invalidate 方法刷新界面，这样 ShowMode 的 onDraw 也会被调用，处理的事情就是调用 CollectViewsLayout 提供的绘制线条和文本能力进行绘制。

聊一聊 UI 相关的 AttrsDialog

AttrsDialog 的内容很简单，就是一个 RecyclerView，只不过它有着各种 ViewHolder。

BaseViewHolder - Item

我们先看 BaseViewHolder 以及 Item :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public static abstract class BaseViewHolder<T extends Item> extends RecyclerView.ViewHolder {
    protected T item;
    
    public BaseViewHolder(View itemView) {
        super(itemView);
    }

    public void bindView(T t) {
        item = t;
    }
}

public class Item {
    //这个方法是用来显示 ValidViews，暂时可以忽略
    public boolean isValid() {
        return true;
    }
}

TitleViewHolder

1
2
3
4
5
class TitleViewHolder extends BaseViewHolder<TitleItem>

class TitleItem extends Item {
    String name;
}

效果：

TextViewHolder

1
2
3
4
5
6
7
class TextViewHolder extends BaseViewHolder<TextItem>

class TextItem extends TitleItem {
    String detail;
    boolean enableCopy;
    View.OnClickListener onClickListener;
}

效果：

EditTextViewHolder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class EditTextViewHolder<T extends EditTextItem> extends BaseViewHolder<T>

class EditTextItem extends ElementItem {
    // 当用户修改的时候，我们会根据 type 的不同去修改 View 对应的字段
    @Type int type;
    String detail;
    
    @IntDef({
            TYPE_TEXT,
            TYPE_TEXT_SIZE,
            TYPE_TEXT_COLOR,
            TYPE_WIDTH,
            TYPE_HEIGHT,
            TYPE_PADDING_LEFT,
            TYPE_PADDING_RIGHT,
            TYPE_PADDING_TOP,
            TYPE_PADDING_BOTTOM,
    })
    Type 
}

class ElementItem extends TitleItem {
    Element element;
}

效果：

AddMinusEditViewHolder

1
2
3
4
// 和 EditTextViewHolder 几乎一致，只是交互不同而已
class AddMinusEditViewHolder extends EditTextViewHolder<AddMinusEditItem>

class AddMinusEditItem extends EditTextItem

效果：

SwitchViewHolder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class SwitchViewHolder extends BaseViewHolder<SwitchItem>

class SwitchItem extends ElementItem {
    // 和 EditTextItem 类似，也是根据 type 的不同去做不同的操作
    @Type int type;
    boolean isChecked;
    
    @IntDef({
            TYPE_IS_BOLD,
            TYPE_MOVE,
            TYPE_SHOW_VALID_VIEWS
    })
    Type
}

效果：

BitmapInfoViewHolder

1
2
3
4
5
6
class BitmapInfoViewHolder extends BaseViewHolder<BitmapItem>

class BitmapItem extends Item {
    String name;
    Bitmap bitmap;
}

效果：

BriefDescViewHolder

1
2
3
4
5
class BriefDescViewHolder extends BaseViewHolder<BriefDescItem>

class BriefDescItem extends ElementItem {
    boolean isSelected;
}

效果：

怎么管理 ViewHolder

AttrsDialogItem…

我们给每一个 ViewHolder 实例都创建一个 AttrsDialogItemViewBinder 实例，例如 TitleViewHolder 对应的 TitleItemBinder。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public abstract class AttrsDialogItemViewBinder<T extends Item, VH extends AttrsDialog.Adapter.BaseViewHolder<T>> implements ItemViewBinder<T, VH> {
    protected AttrsDialog.AttrDialogCallback getAttrDialogCallback(RecyclerView.Adapter adapter) {
        AttrsDialog.AttrDialogCallback callback = null;
        if (adapter instanceof AttrsDialog.Adapter) {
            callback = ((AttrsDialog.Adapter) adapter).getAttrDialogCallback();
        }
        return callback;
    }
}

public interface ItemViewBinder<T, VH extends RecyclerView.ViewHolder> {
    @NonNull
    VH onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent, RecyclerView.Adapter adapter);

    void onBindViewHolder(@NonNull VH holder, @NonNull T item);
}

TitleItemBinder 最终会把工作交给 TitleViewHolder 处理。

1
2
3
4
5
6
7
8
9
10
11
12
public class TitleItemBinder extends AttrsDialogItemViewBinder<TitleItem, AttrsDialog.Adapter.TitleViewHolder> {
    @NonNull
    @Override
    public AttrsDialog.Adapter.TitleViewHolder onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent, RecyclerView.Adapter adapter) {
        return AttrsDialog.Adapter.TitleViewHolder.newInstance(parent);
    }

    @Override
    public void onBindViewHolder(@NonNull AttrsDialog.Adapter.TitleViewHolder holder, @NonNull TitleItem item) {
        holder.bindView(item);
    }
}

仅仅这样只是产生同样数量的 AttrsDialogItemViewBinder 子类，我们还需要一个 AttrsDialogMultiTypePool。

AttrsDialogMultiTypePool

AttrsDialogMultiTypePool 随着 UETool 单例的创建而创建，并会自动将注册所有的 AttrsDialogItemViewBinder 实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class UETool {
    private static volatile UETool instance;
    private AttrsDialogMultiTypePool attrsDialogMultiTypePool = new AttrsDialogMultiTypePool();

    private UETool() {
        initAttrsDialogMultiTypePool();
    }

    public static UETool getInstance() {
        //...
        return instance;
    }

    public AttrsDialogMultiTypePool getAttrsDialogMultiTypePool() {
        return attrsDialogMultiTypePool;
    }

    private void initAttrsDialogMultiTypePool() {
        attrsDialogMultiTypePool.register(AddMinusEditItem.class, new AddMinusEditTextItemBinder());
        attrsDialogMultiTypePool.register(BitmapItem.class, new BitmapItemBinder());
        attrsDialogMultiTypePool.register(BriefDescItem.class, new BriefDescItemBinder());
        attrsDialogMultiTypePool.register(EditTextItem.class, new EditTextItemBinder());
        attrsDialogMultiTypePool.register(SwitchItem.class, new SwitchItemBinder());
        attrsDialogMultiTypePool.register(TextItem.class, new TextItemBinder());
        attrsDialogMultiTypePool.register(TitleItem.class, new TitleItemBinder());
        attrsDialogMultiTypePool.register(ViewInfoItem.class, new ViewInfoItemBinder());
    }
}

public class AttrsDialogMultiTypePool {
    private List<Class> classes = new ArrayList<>();
    private List<ItemViewBinder> binders = new ArrayList<>();

    public <T extends Item> void register(Class<T> clazz, ItemViewBinder<T, ?> binder) {
        //...
    }

    public ItemViewBinder<?, ?> getItemViewBinder(int index) {
        //...
    }

    public int getItemType(Object item) {
        //...
    }
}

在 Adapter 中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public static class Adapter extends RecyclerView.Adapter {
    private List<Item> items = new ItemArrayList<>();
    private AttrDialogCallback callback;

    public void setAttrDialogCallback(AttrDialogCallback callback) {
        this.callback = callback;
    }

    public AttrDialogCallback getAttrDialogCallback() {
        return this.callback;
    }

    public void notifyDataSetChanged(Element element) {
        items.clear();
        for (String attrsProvider : UETool.getInstance().getAttrsProvider()) {
            try {
                IAttrs attrs = (IAttrs) Class.forName(attrsProvider).newInstance();
                items.addAll(attrs.getAttrs(element));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        notifyDataSetChanged();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        AttrsDialogMultiTypePool pool = UETool.getInstance().getAttrsDialogMultiTypePool();
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        return pool.getItemViewBinder(viewType).onCreateViewHolder(inflater, parent, this);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        AttrsDialogMultiTypePool pool = UETool.getInstance().getAttrsDialogMultiTypePool();
        ((AttrsDialogItemViewBinder) pool.getItemViewBinder(holder.getItemViewType())).onBindViewHolder(holder, getItem(position));
    }

    @Override
    public int getItemViewType(int position) {
        Item item = getItem(position);
        AttrsDialogMultiTypePool pool = UETool.getInstance().getAttrsDialogMultiTypePool();
        return pool.getItemType(item);
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    @Nullable
    @SuppressWarnings("unchecked")
    protected <T extends Item> T getItem(int adapterPosition) {
        if (adapterPosition < 0 || adapterPosition >= items.size()) {
            return null;
        }
        return (T) items.get(adapterPosition);
    }
}

AttrDialogCallback

1
2
3
4
5
public interface AttrDialogCallback {
    void enableMove();
    void showValidViews(int position, boolean isChecked);
    void selectView(Element element);
}

这个 callbck 设置的时机来自于 EditAttrLayout 中 ShowMode 的 triggerActionUp 方法被触发的时候，创建 AttrsDialog 的时候设置的。

  • enableMove：用于切换 EditAttrLayout 的 IMode
  • showValidViews：调用 CollectViewsLayout 提供获取指定坐标下 Element 的方法，不过获取的结果是一个集合，然后显示它们
  • selectView：跳转到另一个 Element

获取数据的 IAttrs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void notifyDataSetChanged(Element element) {
    items.clear();
    for (String attrsProvider : UETool.getInstance().getAttrsProvider()) {
        try {
            IAttrs attrs = (IAttrs) Class.forName(attrsProvider).newInstance();
            items.addAll(attrs.getAttrs(element));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    notifyDataSetChanged();
}

public interface IAttrs {
    List<Item> getAttrs(Element element);
}

查看 notifyDataSetChanged 方法，可以发现数据来自 IAttrs 实例。IAttrs 实例之一是 UETCore，它首先会先获取通用的数据，然后它还会从两个内部类 UETTextView、UEImageView 中获取数据。其中从 View 中获取的值转化成显示的值都借助 Util 实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
public class UETCore implements IAttrs {
    @Override
    public List<Item> getAttrs(Element element) {
        List<Item> items = new ArrayList<>();

        View view = element.getView();

        items.add(new TextItem("Fragment", Util.getCurrentFragmentName(element.getView()), new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Activity activity = Util.getCurrentActivity();
                if (activity instanceof TransparentActivity) {
                    ((TransparentActivity) activity).dismissAttrsDialog();
                }
                new FragmentListTreeDialog(v.getContext()).show();
            }
        }));
        items.add(new TextItem("ViewHolder", Util.getViewHolderName(element.getView())));
        items.add(new SwitchItem("Move", element, SwitchItem.Type.TYPE_MOVE));
        items.add(new SwitchItem("ValidViews", element, SwitchItem.Type.TYPE_SHOW_VALID_VIEWS))

        IAttrs iAttrs = AttrsManager.createAttrs(view);
        if (iAttrs != null) {
            items.addAll(iAttrs.getAttrs(element));
        }

        items.add(new TitleItem("COMMON"));
        items.add(new TextItem("Class", view.getClass().getName()));
        items.add(new TextItem("Id", Util.getResId(view)));
        items.add(new TextItem("ResName", Util.getResourceName(view.getId())));
        items.add(new TextItem("Tag", Util.getViewTag(view)));
        items.add(new TextItem("Clickable", Boolean.toString(view.isClickable()).toUpperCase()));
        items.add(new TextItem("OnClickListener", Util.getViewClickListener(view)));
        items.add(new TextItem("Focused", Boolean.toString(view.isFocused()).toUpperCase()));
        items.add(new AddMinusEditItem("Width（dp）", element, EditTextItem.Type.TYPE_WIDTH, px2dip(view.getWidth())));
        items.add(new AddMinusEditItem("Height（dp）", element, EditTextItem.Type.TYPE_HEIGHT, px2dip(view.getHeight())));
        items.add(new TextItem("Alpha", String.valueOf(view.getAlpha())));
        Object background = Util.getBackground(view);
        if (background instanceof String) {
            items.add(new TitleItem("Background: "));
            items.add(new TitleItem((String) background));
        } else if (background instanceof Bitmap) {
            items.add(new BitmapItem("Background", (Bitmap) background));
        }
        items.add(new AddMinusEditItem("PaddingLeft（dp）", element, EditTextItem.Type.TYPE_PADDING_LEFT, px2dip(view.getPaddingLeft())));
        items.add(new AddMinusEditItem("PaddingRight（dp）", element, EditTextItem.Type.TYPE_PADDING_RIGHT, px2dip(view.getPaddingRight())));
        items.add(new AddMinusEditItem("PaddingTop（dp）", element, EditTextItem.Type.TYPE_PADDING_TOP, px2dip(view.getPaddingTop())));
        items.add(new AddMinusEditItem("PaddingBottom（dp）", element, EditTextItem.Type.TYPE_PADDING_BOTTOM, px2dip(view.getPaddingBottom())));
        ViewGroup.LayoutParams params = view.getLayoutParams();
        if (params instanceof ViewGroup.MarginLayoutParams) {
            ViewGroup.MarginLayoutParams marginParams = (ViewGroup.MarginLayoutParams) params;
            items.add(new AddMinusEditItem("MarginLeft", element, EditTextItem.Type.TYPE_MARGIN_LEFT, px2dip(marginParams.leftMargin)));
            items.add(new AddMinusEditItem("MarginRight", element, EditTextItem.Type.TYPE_MARGIN_RIGHT, px2dip(marginParams.rightMargin)));
            items.add(new AddMinusEditItem("MarginTop", element, EditTextItem.Type.TYPE_MARGIN_TOP, px2dip(marginParams.topMargin)));
            items.add(new AddMinusEditItem("MarginBottom", element, EditTextItem.Type.TYPE_MARGIN_BOTTOM, px2dip(marginParams.bottomMargin)));
        }
        return items;
    }
    
    static class AttrsManager {
        public static IAttrs createAttrs(View view) {
            if (view instanceof TextView) {
                return new UETTextView();
            } else if (view instanceof ImageView) {
                return new UETImageView();
            }
            return null;
        }
    }

    static class UETTextView implements IAttrs {
        @Override
        public List<Item> getAttrs(Element element) {
            List<Item> items = new ArrayList<>();
            TextView textView = ((TextView) element.getView());
            items.add(new TitleItem("TextView"));
            items.add(new EditTextItem("Text", element, EditTextItem.Type.TYPE_TEXT, textView.getText().toString()));
            items.add(new AddMinusEditItem("TextSize（sp）", element, EditTextItem.Type.TYPE_TEXT_SIZE, px2sp(textView.getTextSize())));
            items.add(new EditTextItem("TextColor", element, EditTextItem.Type.TYPE_TEXT_COLOR, Util.intToHexColor(textView.getCurrentTextColor())));
            List<Pair<String, Bitmap>> pairs = Util.getTextViewBitmap(textView);
            for (Pair<String, Bitmap> pair : pairs) {
                items.add(new BitmapItem(pair.first, pair.second));
            }
            items.add(new SwitchItem("IsBold", element, SwitchItem.Type.TYPE_IS_BOLD, textView.getTypeface() != null ? textView.getTypeface().isBold() : false));
            return items;
        }
    }

    static class UETImageView implements IAttrs {

        @Override
        public List<Item> getAttrs(Element element) {
            List<Item> items = new ArrayList<>();
            ImageView imageView = ((ImageView) element.getView());
            items.add(new TitleItem("ImageView"));
            items.add(new BitmapItem("Bitmap", Util.getImageViewBitmap(imageView)));
            items.add(new TextItem("ScaleType", Util.getImageViewScaleType(imageView)));
            return items;
        }
    }
}