[Swift 4] Fakebook 만들기 - 3. AutoLayout, Dynamic(AutoSize) CollectionView Cell, Rounded Image

#CollectionView #Dynamic Cell #AutoSize Cell #AutoLayout #Custom Cell #Rounded Image #Cell Width #Cell Height

프로젝트 코드 : https://github.com/LeeGwangYong/iOS_swift/tree/master/FaceBook

참고 사이트 : https://www.youtube.com/watch?v=NJxb7EKXF3U&list=PL0dzCUj1L5JHDWIO3x4wePhD8G4d1Fa6N

1. CustomCollectionViewCell 생성하기

2. Dynamic(AutoSize) CollectionView Cell AutoLayout

ㄱ. Cell 내부에 새로운 UIView를 넣는다.

ㄴ. UIView의 Cosntraint를 Top, Bottom, Leading, Trailling, Width를 지정

ㄷ. Width의 @IBOutlet을 CustomCollectionViewCell.swift에 생성

ㄹ. ViewController.swift 수정

override func viewDidLoad() {
        super.viewDidLoad()
        if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout{
            flowLayout.estimatedItemSize = CGSize(width: 200, height: 400)
        }
}

ㅁ. CustomCollectionViewCell.swift 수정

    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func awakeFromNib() {
        setupCell()
    }
    
    func setupCell(){
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
        widthConstraint.constant = UIScreen.main.bounds.size.width
    }

3. Rounded Image

@IBDesignable 키워드가 추가되어 있어, 스토리보드에서도 잘 나온다.

import UIKit
 
@IBDesignable
class RoundedImageView: UIImageView {
    override init(image: UIImage?) {
        super.init(image: image)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    @IBInspectable var divisor: CGFloat = 2.0 {
        didSet{
            self.layer.cornerRadius = self.frame.width/divisor
        }
    }
    
    @IBInspectable var borderColor:UIColor = UIColor.white {
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }
    
    override func layoutSubviews() {
        self.layer.borderWidth = borderWidth
        self.layer.masksToBounds = false
        self.layer.borderColor = borderColor.cgColor
        self.isUserInteractionEnabled = true
        self.layer.cornerRadius = self.frame.width/divisor
        self.contentMode = .scaleAspectFit
        self.clipsToBounds = true
    }
}