DoKit For iOS UI 组件 Color Picker 源码阅读分析

IOS

2023-10-27 23:02:40

DoKit Color Picker 组件：深入剖析其源码和实用指南

什么是 DoKit Color Picker 组件？

DoKit 是字节跳动团队开发的一款 iOS 调试工具，提供全面的性能监控和诊断功能。Color Picker 组件是 DoKit UI 组件模块中的关键工具之一，用于在真机调试时分析界面元素的颜色值。

Color Picker 组件的界面布局

Color Picker 组件的界面包括：

颜色取色区： 在真机界面上选择颜色。
颜色信息显示区： 显示十六进制表示、RGB 值、CMYK 值等颜色信息。
视图层级分析区： 显示所选颜色的视图层级位置。
控制按钮区： 复制颜色值、分享颜色信息等操作。

源码解析：界面布局

Color Picker 组件界面布局在 DTXColorPickerViewController.m 文件中实现，主要使用 Auto Layout 布局，代码示例如下：

- (instancetype)init {
  self = [super init];
  if (self) {
    [self _setupViews];
  }
  return self;
}

- (void)_setupViews {
  // 创建颜色取色区
  _colorPickerView = [[DTXColorPickerView alloc] init];
  
  // 创建颜色信息显示区
  _colorInfoView = [[DTXColorInfoView alloc] init];
  
  // 创建视图层级分析区
  _hierarchyTreeView = [[DTXHierarchyTreeView alloc] init];
  
  // 创建控制按钮区
  _controlView = [[DTXColorPickerControlView alloc] init];
  
  // 使用 Auto Layout 布局
  [self.view addSubview:_colorPickerView];
  [self.view addSubview:_colorInfoView];
  [self.view addSubview:_hierarchyTreeView];
  [self.view addSubview:_controlView];
  
  // 设置约束
  [NSLayoutConstraint activateConstraints:@[
    // ... 约束代码
  ]];
}

源码解析：颜色信息获取

Color Picker 组件使用 CIColor 类获取颜色信息，代码示例如下：

- (void)updateColorWithCGPoint:(CGPoint)point {
  // 使用 CIColor 类获取颜色值
  CIColor *color = [self _colorAtPoint:point];
  
  // 提取颜色信息
  self.colorInfoView.hexString = [color hexString];
  self.colorInfoView.rgbString = [color rgbString];
  self.colorInfoView.cmykString = [color cmykString];
}

- (CIColor *)_colorAtPoint:(CGPoint)point {
  // 获取屏幕截图
  UIImage *screenshot = [self _screenshot];
  
  // 从截图中获取颜色
  UIColor *color = [self _colorFromImage:screenshot atPoint:point];
  
  // 转换为 CIColor
  CIColor *ciColor = [CIColor colorWithCGColor:color.CGColor];
  
  return ciColor;
}

源码解析：视图层级分析

Color Picker 组件利用 iOS 系统的 CALayer 和 UIView 类分析视图层级，代码示例如下：

- (UIView *)_hitTestForLayer:(CALayer *)layer atPoint:(CGPoint)point {
  // 通过点命中测试获取视图
  UIView *view = [layer.delegate hitTest:point forEvent:nil];
  
  return view;
}

- (void)updateHierarchyWithCGPoint:(CGPoint)point {
  // 获取视图层级分析结果
  UIView *view = [self _hitTestForLayer:self.colorPickerView.layer atPoint:point];
  
  // 显示视图层级
  self.hierarchyTreeView.view = view;
}