UICollectionViewCell 및 UItableViewCell 레이아웃 공유

11622 단어 SwiftiOS
테이블 뷰와 즐겨찾기 뷰 모두에 동일한 레이아웃의 셀을 사용하려는 경우가 있습니다.그러나 각 칸UITableViewCellUICollectionViewCell에 대응하는 칸은 다른 종류이기 때문에 XIB로 만든 칸의 레이아웃을 공유할 수 없다.
다만 문제는 클래스 유형만 있기 때문에 XIB로 UIView 기반의 사용자 정의 뷰를 만들어 각각의 셀에 놓으면 레이아웃을 공유할 수 있다.

일반 레이아웃 셀 생성(UIView)


샘플 코드는 GiitHub에서 다운로드할 수 있습니다.
https://github.com/imk2o/uicatalog
먼저 UIView 기반의 사용자 정의 보기 클래스SharedCell를 만듭니다.
다만, "Cocoa Touch Class"에서 클래스를 만들더라도 "Also create XIB file"을 선택할 수 없으므로 XIB 파일을 추가로 추가하십시오.

여기에 실례화 방법instantiateFromNib()을 설치합니다.
SharedCell.swift
import UIKit

class SharedCell: UIView {
    @IBOutlet weak var textLabel: UILabel!
    @IBOutlet weak var imageView: UIImageView!

    static func instantiateFromNib() -> SharedCell {
        let nib = UINib(nibName: String(describing: self), bundle: nil)
        guard let cell = nib.instantiate(withOwner: nil, options: nil).first as? SharedCell else {
            fatalError()
        }

        return cell
    }
}

내장형 UItable ViewCell, UICollection ViewCell


모든 사용자 정의 칸 클래스의 초기화 처리에 실례화하고 추가합니다. SharedCell
  • contentViewaddSubview()
  • contentView 디스플레이에 충분한 Constraint
  • 추가
    이 경우 Auto Layout과 Self sizing cell이 잘 적용될 것입니다.
    SharedTableViewCell.swift
    import UIKit
    
    class SharedTableViewCell: UITableViewCell {
        var body: SharedCell? {
            return self.contentView.subviews.first as? SharedCell
        }
    
        override func awakeFromNib() {
            super.awakeFromNib()
    
            // SharedCellの埋め込み
            let body = SharedCell.instantiateFromNib()
            self.contentView.addSubviewAndFitConstraints(body)
        }
    
        func configure(withText text: String, image: UIImage? = nil) {
            guard let body = self.body else {
                return
            }
    
            body.imageView.image = image
            body.textLabel.text = text
        }
    }
    
    extension UIView {
        func addSubviewAndFitConstraints(_ subview: UIView) {
            self.addSubview(subview)
    
            subview.translatesAutoresizingMaskIntoConstraints = false
    
            // subviewを自身いっぱいに表示するConstraintを与える
            self.addConstraint(NSLayoutConstraint(
                item: subview, attribute: .top,
                relatedBy: .equal,
                toItem: self, attribute: .top,
                multiplier: 1.0, constant: 0.0
            ))
    
            self.addConstraint(NSLayoutConstraint(
                item: subview, attribute: .left,
                relatedBy: .equal,
                toItem: self, attribute: .left,
                multiplier: 1.0, constant: 0.0
            ))
    
            self.addConstraint(NSLayoutConstraint(
                item: subview, attribute: .bottom,
                relatedBy: .equal,
                toItem: self, attribute: .bottom,
                multiplier: 1.0, constant: 0.0
            ))
    
            self.addConstraint(NSLayoutConstraint(
                item: subview, attribute: .right,
                relatedBy: .equal,
                toItem: self, attribute: .right,
                multiplier: 1.0, constant: 0.0
            ))
        }
    }
    
    Storyboard와 XIB에 각 사용자 정의 단원의 설치 방법을 준비하지 않는 경우도 있지만, 첫 번째 쓰기를 중첩해야 하기 때문에 상술한 방법은 비교적 간단하다.

    좋은 웹페이지 즐겨찾기