swift-uikit
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUIKit Skill
UIKit 技能
Comprehensive UIKit framework knowledge for building traditional iOS user interfaces.
掌握构建传统iOS用户界面所需的全面UIKit框架知识。
Prerequisites
前提条件
- Xcode 15+ installed
- iOS 15+ deployment target recommended
- Understanding of MVC/MVVM patterns
- 已安装Xcode 15+
- 推荐iOS 15+作为部署目标
- 了解MVC/MVVM设计模式
Parameters
参数
yaml
parameters:
layout_approach:
type: string
enum: [programmatic, storyboard, xib]
default: programmatic
accessibility_enabled:
type: boolean
default: true
dynamic_type_support:
type: boolean
default: trueyaml
parameters:
layout_approach:
type: string
enum: [programmatic, storyboard, xib]
default: programmatic
accessibility_enabled:
type: boolean
default: true
dynamic_type_support:
type: boolean
default: trueTopics Covered
涵盖主题
View Controllers
视图控制器
| Type | Purpose | Use Case |
|---|---|---|
| Base controller | Custom screens |
| Stack navigation | Hierarchical flow |
| Tab-based | Main sections |
| Master-detail | iPad layouts |
| Page swiping | Onboarding |
| 类型 | 用途 | 使用场景 |
|---|---|---|
| 基础控制器 | 自定义屏幕 |
| 栈式导航 | 层级化流程 |
| 标签页导航 | 应用主模块 |
| 主从布局 | iPad适配布局 |
| 页面滑动 | 引导页展示 |
Auto Layout
自动布局
| Constraint Type | Description |
|---|---|
| Leading/Trailing | Horizontal edges (respects RTL) |
| Top/Bottom | Vertical edges |
| CenterX/CenterY | Center alignment |
| Width/Height | Size constraints |
| Aspect Ratio | Proportional sizing |
| 约束类型 | 描述 |
|---|---|
| Leading/Trailing | 水平边缘约束(支持RTL布局) |
| Top/Bottom | 垂直边缘约束 |
| CenterX/CenterY | 居中对齐约束 |
| Width/Height | 尺寸约束 |
| Aspect Ratio | 比例尺寸约束 |
Table & Collection Views
表格与集合视图
| Component | Purpose |
|---|---|
| UITableView | Vertical scrolling lists |
| UICollectionView | Flexible grid layouts |
| DiffableDataSource | Automatic diffing (iOS 13+) |
| CompositionalLayout | Complex layouts (iOS 13+) |
| 组件 | 用途 |
|---|---|
| UITableView | 垂直滚动列表 |
| UICollectionView | 灵活网格布局 |
| DiffableDataSource | 自动差异更新(iOS 13+) |
| CompositionalLayout | 复杂布局(iOS 13+) |
Code Examples
代码示例
Programmatic View Controller
纯代码实现视图控制器
swift
final class ProfileViewController: UIViewController {
// MARK: - UI Components
private lazy var avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 50
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.accessibilityLabel = "Profile picture"
return imageView
}()
private lazy var nameLabel: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .title1)
label.adjustsFontForContentSizeCategory = true
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private lazy var bioLabel: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
// MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
setupConstraints()
}
// MARK: - Setup
private func setupUI() {
view.backgroundColor = .systemBackground
view.addSubview(avatarImageView)
view.addSubview(nameLabel)
view.addSubview(bioLabel)
}
private func setupConstraints() {
NSLayoutConstraint.activate([
avatarImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
avatarImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
avatarImageView.widthAnchor.constraint(equalToConstant: 100),
avatarImageView.heightAnchor.constraint(equalToConstant: 100),
nameLabel.topAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: 16),
nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
bioLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
bioLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
])
}
// MARK: - Configuration
func configure(with user: User) {
nameLabel.text = user.name
bioLabel.text = user.bio
// Load avatar image
}
}swift
final class ProfileViewController: UIViewController {
// MARK: - UI Components
private lazy var avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 50
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.accessibilityLabel = "Profile picture"
return imageView
}()
private lazy var nameLabel: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .title1)
label.adjustsFontForContentSizeCategory = true
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private lazy var bioLabel: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
// MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
setupConstraints()
}
// MARK: - Setup
private func setupUI() {
view.backgroundColor = .systemBackground
view.addSubview(avatarImageView)
view.addSubview(nameLabel)
view.addSubview(bioLabel)
}
private func setupConstraints() {
NSLayoutConstraint.activate([
avatarImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
avatarImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
avatarImageView.widthAnchor.constraint(equalToConstant: 100),
avatarImageView.heightAnchor.constraint(equalToConstant: 100),
nameLabel.topAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: 16),
nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
bioLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
bioLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
])
}
// MARK: - Configuration
func configure(with user: User) {
nameLabel.text = user.name
bioLabel.text = user.bio
// Load avatar image
}
}Modern Collection View with Diffable Data Source
基于Diffable Data Source的现代集合视图
swift
final class ProductGridViewController: UIViewController {
enum Section { case main }
private var collectionView: UICollectionView!
private var dataSource: UICollectionViewDiffableDataSource<Section, Product>!
override func viewDidLoad() {
super.viewDidLoad()
configureCollectionView()
configureDataSource()
}
private func configureCollectionView() {
let layout = createCompositionalLayout()
collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
collectionView.backgroundColor = .systemBackground
view.addSubview(collectionView)
}
private func createCompositionalLayout() -> UICollectionViewLayout {
let itemSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(0.5),
heightDimension: .estimated(200)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
let groupSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .estimated(200)
)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
return UICollectionViewCompositionalLayout(section: section)
}
private func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<ProductCell, Product> { cell, indexPath, product in
cell.configure(with: product)
}
dataSource = UICollectionViewDiffableDataSource<Section, Product>(collectionView: collectionView) {
collectionView, indexPath, product in
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: product)
}
}
func applySnapshot(products: [Product], animatingDifferences: Bool = true) {
var snapshot = NSDiffableDataSourceSnapshot<Section, Product>()
snapshot.appendSections([.main])
snapshot.appendItems(products)
dataSource.apply(snapshot, animatingDifferences: animatingDifferences)
}
}swift
final class ProductGridViewController: UIViewController {
enum Section { case main }
private var collectionView: UICollectionView!
private var dataSource: UICollectionViewDiffableDataSource<Section, Product>!
override func viewDidLoad() {
super.viewDidLoad()
configureCollectionView()
configureDataSource()
}
private func configureCollectionView() {
let layout = createCompositionalLayout()
collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
collectionView.backgroundColor = .systemBackground
view.addSubview(collectionView)
}
private func createCompositionalLayout() -> UICollectionViewLayout {
let itemSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(0.5),
heightDimension: .estimated(200)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
let groupSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .estimated(200)
)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
return UICollectionViewCompositionalLayout(section: section)
}
private func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<ProductCell, Product> { cell, indexPath, product in
cell.configure(with: product)
}
dataSource = UICollectionViewDiffableDataSource<Section, Product>(collectionView: collectionView) {
collectionView, indexPath, product in
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: product)
}
}
func applySnapshot(products: [Product], animatingDifferences: Bool = true) {
var snapshot = NSDiffableDataSourceSnapshot<Section, Product>()
snapshot.appendSections([.main])
snapshot.appendItems(products)
dataSource.apply(snapshot, animatingDifferences: animatingDifferences)
}
}Custom UIView with Intrinsic Size
带固有尺寸的自定义UIView
swift
final class TagView: UIView {
private let label: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .caption1)
label.adjustsFontForContentSizeCategory = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let padding = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
override var intrinsicContentSize: CGSize {
let labelSize = label.intrinsicContentSize
return CGSize(
width: labelSize.width + padding.left + padding.right,
height: labelSize.height + padding.top + padding.bottom
)
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setup()
}
private func setup() {
backgroundColor = .systemBlue
layer.cornerRadius = 8
addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: topAnchor, constant: padding.top),
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding.left),
label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding.right),
label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding.bottom)
])
}
func configure(text: String, color: UIColor = .systemBlue) {
label.text = text
label.textColor = .white
backgroundColor = color
invalidateIntrinsicContentSize()
}
}swift
final class TagView: UIView {
private let label: UILabel = {
let label = UILabel()
label.font = .preferredFont(forTextStyle: .caption1)
label.adjustsFontForContentSizeCategory = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let padding = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
override var intrinsicContentSize: CGSize {
let labelSize = label.intrinsicContentSize
return CGSize(
width: labelSize.width + padding.left + padding.right,
height: labelSize.height + padding.top + padding.bottom
)
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setup()
}
private func setup() {
backgroundColor = .systemBlue
layer.cornerRadius = 8
addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: topAnchor, constant: padding.top),
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding.left),
label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding.right),
label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding.bottom)
])
}
func configure(text: String, color: UIColor = .systemBlue) {
label.text = text
label.textColor = .white
backgroundColor = color
invalidateIntrinsicContentSize()
}
}Troubleshooting
故障排除
Common Issues
常见问题
| Issue | Cause | Solution |
|---|---|---|
| "Unable to simultaneously satisfy constraints" | Conflicting constraints | Lower priority on flexible constraints |
| Cell not appearing | Missing registration | Use CellRegistration or register before dequeue |
| Keyboard covers text field | No keyboard handling | Observe keyboard notifications |
| Content compressed | Missing hugging priority | Set content hugging priority higher |
| View not responding to touches | Overlapping views | Check view hierarchy, userInteractionEnabled |
| 问题 | 原因 | 解决方案 |
|---|---|---|
| "无法同时满足约束条件" | 约束冲突 | 降低灵活约束的优先级 |
| 单元格未显示 | 未注册单元格 | 使用CellRegistration或在复用前注册单元格 |
| 键盘遮挡输入框 | 未处理键盘事件 | 监听键盘通知 |
| 内容被压缩 | 缺少内容拥抱优先级 | 提高内容拥抱优先级 |
| 视图不响应触摸 | 视图重叠 | 检查视图层级、userInteractionEnabled属性 |
Debug Commands
调试命令
swift
// Print view hierarchy
po view.recursiveDescription()
// Print Auto Layout issues
po view.constraintsAffectingLayout(for: .horizontal)
// Check if on main thread
assert(Thread.isMainThread, "UI updates must be on main thread")swift
// 打印视图层级
po view.recursiveDescription()
// 打印自动布局问题
po view.constraintsAffectingLayout(for: .horizontal)
// 检查是否在主线程
assert(Thread.isMainThread, "UI updates must be on main thread")Validation Rules
验证规则
yaml
validation:
- rule: accessibility_labels
severity: warning
check: All interactive elements must have accessibility labels
- rule: dynamic_type_support
severity: warning
check: Use preferredFont and adjustsFontForContentSizeCategory
- rule: safe_area_constraints
severity: info
check: Content should respect safe area layout guidesyaml
validation:
- rule: accessibility_labels
severity: warning
check: All interactive elements must have accessibility labels
- rule: dynamic_type_support
severity: warning
check: Use preferredFont and adjustsFontForContentSizeCategory
- rule: safe_area_constraints
severity: info
check: Content should respect safe area layout guidesUsage
使用方法
Skill("swift-uikit")Skill("swift-uikit")Related Skills
相关技能
- - iOS fundamentals
swift-ios-basics - - Modern alternative
swift-swiftui - - App architecture
swift-architecture
- - iOS基础
swift-ios-basics - - 现代替代方案
swift-swiftui - - 应用架构
swift-architecture