在swift 中用uikit 封装一个组件,组件有一个灰色的border, 选中这个组件这个border 会变成绿色,组件内部左边有两行,第一行有一行标题,第二行是内容,第二行的有两句话,两句话之间有有10的间距,右边有个水平居中的checkbox ,点击这个组件时,这个组件的border 会变成绿色,checkbox 会被选中变成实心绿色,再点击这个组件,这个组件的border 会变成灰色,checkbox 会被选中变成空心灰色,内容和标题的字符串是从外部传入的
import UIKit
class CustomComponent: UIView {
// MARK: - Properties
private let borderView: UIView = {
let view = UIView()
view.layer.borderWidth = 1.0
view.layer.borderColor = UIColor.gray.cgColor
return view
}()
private let titleLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 16.0, weight: .bold)
label.numberOfLines = 1
return label
}()
private let contentLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 14.0)
label.numberOfLines = 0
return label
}()
private let checkboxButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "circle"), for: .normal)
button.setImage(UIImage(systemName: "checkmark.circle.fill"), for: .selected)
button.tintColor = .green
return button
}()
// MARK: - Initialization
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
setupGestureRecognizers()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupViews()
setupGestureRecognizers()
}
// MARK: - Setup
private func setupViews() {
addSubview(borderView)
addSubview(titleLabel)
addSubview(contentLabel)
addSubview(checkboxButton)
// Configure constraints
borderView.translatesAutoresizingMaskIntoConstraints = false
titleLabel.translatesAutoresizingMaskIntoConstraints = false
contentLabel.translatesAutoresizingMaskIntoConstraints = false
checkboxButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
borderView.leadingAnchor.constraint(equalTo: leadingAnchor),
borderView.trailingAnchor.constraint(equalTo: trailingAnchor),
borderView.topAnchor.constraint(equalTo: topAnchor),
borderView.bottomAnchor.constraint(equalTo: bottomAnchor),
titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
contentLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
contentLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10),
contentLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
checkboxButton.centerYAnchor.constraint(equalTo: centerYAnchor),
checkboxButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
checkboxButton.widthAnchor.constraint(equalToConstant: 24),
checkboxButton.heightAnchor.constraint(equalToConstant: 24)
])
}
private func setupGestureRecognizers() {
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(componentTapped))
addGestureRecognizer(tapGesture)
}
// MARK: - Configuration
func configure(withTitle title: String, content: String, isChecked: Bool) {
titleLabel.text = title
contentLabel.text = content
checkboxButton.isSelected = isChecked
}
// MARK: - Actions
@objc private func componentTapped() {
if borderView.layer.borderColor == UIColor.gray.cgColor {
borderView.layer.borderColor = UIColor.green.cgColor
checkboxButton.isSelected = true
} else {
borderView.layer.borderColor = UIColor.gray.cgColor
checkboxButton.isSelected = false
}
}
}