Skill: near2sea/ios-view-generator (version 1.0.0)

--- name: ios-view-generator description: 从截图生成 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: 声明属性 ```objc @interface MyViewController () @property (nonatomic, strong) UIView *containerView; @property (nonatomic, strong) UILabel *titleLabel; // ... 其他属性 @end ``` ### 步骤 3: 实现懒加载 每个组件独立 getter： ```objc - (UILabel *)titleLabel { if (!_titleLabel) { _titleLabel = [[UILabel alloc] init]; _titleLabel.font = [UIFont boldSystemFontOfSize:18]; _titleLabel.textColor = [UIColor blackColor]; } return _titleLabel; } ``` ### 步骤 4: UI 与布局分离 ```objc - (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: 数据加载 ```objc - (void)loadData { // 网络请求或本地数据 } - (void)refreshUI { // 数据绑定到视图 self.titleLabel.text = self.dataModel.title; } ``` ## 参考文档 详见 [objc-view-patterns.md](references/objc-view-patterns.md)： - 完整代码示例 - 常用 UI 组件初始化模板 - Masonry / 原生 Auto Layout 布局方式 ## 注意事项 - 默认使用 Masonry 布局，若无则生成原生 Auto Layout - 尺寸和间距使用估算值，用户可根据设计稿调整 - 颜色使用系统颜色 (systemBlueColor 等)，便于适配暗色模式 - 图片资源使用占位符名称，用户需自行替换

path: references/objc-view-patterns.md
content: # Objective-C 视图代码规范

## 目录结构

```objc
#pragma mark - Life Cycle

#pragma mark - UI

#pragma mark - Layout

#pragma mark - Data

#pragma mark - Event Response

#pragma mark - Private Methods
```

---

## 懒加载模式

所有 UI 组件使用懒加载 (getter 方法) 初始化：

```objc
// .h 文件
@interface MyViewController : UIViewController

@end

// .m 文件
@interface MyViewController ()

@property (nonatomic, strong) UIView *headerView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIButton *actionButton;
@property (nonatomic, strong) UITableView *tableView;

@end

@implementation MyViewController

#pragma mark - Life Cycle

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupUI];
    [self setupConstraints];
    [self loadData];
}

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // 布局调整
}

#pragma mark - UI

- (void)setupUI {
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:self.headerView];
    [self.headerView addSubview:self.titleLabel];
    [self.view addSubview:self.actionButton];
    [self.view addSubview:self.tableView];
}

#pragma mark - Layout

- (void)setupConstraints {
    // 使用 Masonry 或原生 Auto Layout
    [self.headerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.view);
        make.height.mas_equalTo(100);
    }];
    
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.headerView);
    }];
    
    [self.actionButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.headerView.mas_bottom).offset(20);
        make.centerX.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(200, 44));
    }];
    
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.actionButton.mas_bottom).offset(10);
        make.left.right.bottom.equalTo(self.view);
    }];
}

#pragma mark - Data

- (void)loadData {
    // 网络请求或数据加载
}

- (void)refreshUI {
    // 数据绑定到 UI
}

#pragma mark - Event Response

- (void)actionButtonTapped:(UIButton *)sender {
    // 按钮点击事件
}

#pragma mark - Lazy Load

- (UIView *)headerView {
    if (!_headerView) {
        _headerView = [[UIView alloc] init];
        _headerView.backgroundColor = [UIColor systemBlueColor];
    }
    return _headerView;
}

- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.text = @"Title";
        _titleLabel.font = [UIFont boldSystemFontOfSize:18];
        _titleLabel.textColor = [UIColor whiteColor];
        _titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _titleLabel;
}

- (UIButton *)actionButton {
    if (!_actionButton) {
        _actionButton = [UIButton buttonWithType:UIButtonTypeSystem];
        [_actionButton setTitle:@"Action" forState:UIControlStateNormal];
        [_actionButton addTarget:self action:@selector(actionButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _actionButton;
}

- (UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    }
    return _tableView;
}

@end
```

---

## 常用 UI 组件初始化

### UILabel
```objc
- (UILabel *)descLabel {
    if (!_descLabel) {
        _descLabel = [[UILabel alloc] init];
        _descLabel.font = [UIFont systemFontOfSize:14];
        _descLabel.textColor = [UIColor darkGrayColor];
        _descLabel.numberOfLines = 0;
        _descLabel.textAlignment = NSTextAlignmentLeft;
    }
    return _descLabel;
}
```

### UIButton
```objc
- (UIButton *)submitBtn {
    if (!_submitBtn) {
        _submitBtn = [UIButton buttonWithType:UIButtonTypeSystem];
        [_submitBtn setTitle:@"Submit" forState:UIControlStateNormal];
        _submitBtn.titleLabel.font = [UIFont boldSystemFontOfSize:16];
        [_submitBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        _submitBtn.backgroundColor = [UIColor systemBlueColor];
        _submitBtn.layer.cornerRadius = 8;
        _submitBtn.clipsToBounds = YES;
        [_submitBtn addTarget:self action:@selector(submitBtnTapped:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _submitBtn;
}
```

### UIImageView
```objc
- (UIImageView *)avatarImageView {
    if (!_avatarImageView) {
        _avatarImageView = [[UIImageView alloc] init];
        _avatarImageView.contentMode = UIViewContentModeScaleAspectFill;
        _avatarImageView.clipsToBounds = YES;
        _avatarImageView.layer.cornerRadius = 25;
        _avatarImageView.backgroundColor = [UIColor lightGrayColor];
    }
    return _avatarImageView;
}
```

### UITextField
```objc
- (UITextField *)inputField {
    if (!_inputField) {
        _inputField = [[UITextField alloc] init];
        _inputField.placeholder = @"Enter text...";
        _inputField.borderStyle = UITextBorderStyleRoundedRect;
        _inputField.font = [UIFont systemFontOfSize:14];
        _inputField.delegate = self;
    }
    return _inputField;
}
```

### UIScrollView
```objc
- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] init];
        _scrollView.showsVerticalScrollIndicator = YES;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.bounces = YES;
    }
    return _scrollView;
}
```

---

## 布局方式

### 方式一：Masonry (推荐)

```objc
// Podfile
pod 'Masonry'

// 使用
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview).offset(10);
    make.left.right.equalTo(superview).insets(UIEdgeInsetsMake(0, 15, 0, 15));
    make.height.mas_equalTo(44);
}];
```

### 方式二：原生 Auto Layout

```objc
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
[NSLayoutConstraint activateConstraints:@[
    [view.topAnchor constraintEqualToAnchor:superview.topAnchor constant:10],
    [view.leadingAnchor constraintEqualToAnchor:superview.leadingAnchor constant:15],
    [view.trailingAnchor constraintEqualToAnchor:superview.trailingAnchor constant:-15],
    [view.heightAnchor constraintEqualToConstant:44]
]];
```

---

## 从截图生成代码的流程

1. **识别 UI 层级结构**
   - 分析截图中的视图层次
   - 识别容器视图和子视图关系

2. **提取 UI 元素**
   - 识别控件类型 (Label, Button, ImageView, TextField 等)
   - 估算尺寸和间距
   - 识别颜色和字体样式

3. **生成代码**
   - 创建属性声明
   - 实现懒加载方法
   - 设置 UI 和布局方法
   - 添加事件响应方法

4. **优化调整**
   - 确保布局适配不同屏幕尺寸
   - 使用合理的默认值


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)