生成iOS视图UI

从截图生成 Objective-C iOS 视图代码，支持懒加载模式和布局/数据分离。当用户需要：(1) 从截图生成 iOS UI 代码，(2) 生成 Objective-C 视图控制器或视图代码，(3) 创建遵循懒加载规范的 iOS 视图时触发此技能。

iOS View Generator

从截图生成规范的 Objective-C iOS 视图代码。

核心规范

代码结构

#pragma mark - Life Cycle   // 生命周期
#pragma mark - UI           // UI 创建
#pragma mark - Layout         // 布局约束
#pragma mark - Data         // 数据加载
#pragma mark - Event Response // 事件响应
#pragma mark - Lazy Load    // 懒加载

三大原则

1. 懒加载: 所有 UI 组件在 getter 中初始化
2. 布局分离: setupUI 只负责 addSubView，setupConstraints 负责约束
3. 数据分离: loadData 负责请求，refreshUI 负责绑定

生成流程

步骤 1: 分析截图

使用 image 工具分析用户提供的截图：

• 识别 UI 层级结构
• 提取控件类型、数量、位置
• 估算尺寸和间距

步骤 2: 声明属性

@interface MyViewController ()
@property (nonatomic, strong) UIView *containerView;
@property (nonatomic, strong) UILabel *titleLabel;
// ... 其他属性
@end

步骤 3: 实现懒加载

每个组件独立 getter：

- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.font = [UIFont boldSystemFontOfSize:18];
        _titleLabel.textColor = [UIColor blackColor];
    }
    return _titleLabel;
}

步骤 4: UI 与布局分离

- (void)setupUI {
    [self.view addSubview:self.containerView];
    [self.containerView addSubview:self.titleLabel];
}

- (void)setupConstraints {
    [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 15, 20, 15));
    }];
}

步骤 5: 数据加载

- (void)loadData {
    // 网络请求或本地数据
}

- (void)refreshUI {
    // 数据绑定到视图
    self.titleLabel.text = self.dataModel.title;
}

参考文档

详见 objc-view-patterns.md：

• 完整代码示例
• 常用 UI 组件初始化模板
• Masonry / 原生 Auto Layout 布局方式

注意事项

• 默认使用 Masonry 布局，若无则生成原生 Auto Layout
• 尺寸和间距使用估算值，用户可根据设计稿调整
• 颜色使用系统颜色 (systemBlueColor 等)，便于适配暗色模式
• 图片资源使用占位符名称，用户需自行替换