ewr

74 阅读1分钟

在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
        }
    }
}