[Cheliz] View 관련 재사용성 높이기

 

우선 구현한 백업 및 복구 화면은 아래와 같다!

 

(시뮬레이터를 자꾸 돌리다 보니 알게 된 사실 한 가지.. iOS 16 미만의 시뮬레이터에서는 home indicator의 오른쪽 부분이 흐리다….거슬림)

 

 

위 화면을 예시로, View와 관련하여 코드의 재사용성을 높이기 위해 고민하고 구현했던 지점들 중 두 가지를 적어 보려 한다..!

 

 

 

 

  Custom View with Parameters  

위 화면에 보이는 것과 같이 백업하기 버튼과 불러오기 버튼의 디자인이 동일하므로,
커스텀 버튼 BackupAndRestoreButton을 만들고
백업하기 버튼과 불러오기 버튼을 각각 이 BackupAndRestoreButton의 인스턴스로 생성하였다.

 

 

class BackupAndRestoreButton: UIButton {
    // MARK: - Properties
    var title: String?

    // MARK: - Initializers
    init(title: String) {
        self.title = title
        super.init(frame: .zero)

	setUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

setUI() 메서드가 길어 위 코드에서는 생략했지만,
공통되는 부분(여기서는 디자인)을 하나의 클래스 내에 구현하고, 인스턴스를 만들 때마다 달라지는 부분(여기서는 버튼의 타이틀)을 따로 구현할 수 있도록 미리 설정해 두었다고 생각하면 된다!

 

 

 

나는 setUI()에 공통 구현부를 작성했고, initializer의 파라미터로 받아온 버튼 타이틀도 setUI()에서 처리될 수 있도록 했다. 버튼 디자인을 메서드 내 선언된 UIButton.Configuration 인스턴스를 사용해서 구현했기 때문에, title 또한 같은 인스턴스를 통해 나타낼 수 있도록 하기 위함이다! (아래 ‘UIButton.Configuration을 사용하는 UIButton의 타이틀에 폰트 적용하기’ 참고)

 

 

 

// BackupAndRestoreView.swift

let backupButton = BackupAndRestoreButton(title: Notice.backup)
let importBackupFileButton = BackupAndRestoreButton(title: Notice.bring)

위처럼 커스텀 Button 클래스를 생성하면, 해당 클래스의 인스턴스를 생성할 때마다 타이틀만 지정하면

 

 

 

이렇게 같은 디자인의 버튼 여러 개를 순식간에 뚝딱..! 만들어 낼 수 있다!

지금은 2 개 뿐이지만, 객체 수가 더 많이 필요할수록 이러한 커스텀 UI 클래스의 필요성과 장점을 더 많이 체감할 수 있을 것 같다.
난 2 개만으로도 많이 체감했는데, 이 때 구현한 공통부는 아래 글에서 확인할 수 있다.

 

 

 

 

 

  UIButton.Configuration을 사용하는 UIButton의 타이틀에 폰트 적용하기  

  (아래 더보기 클릭)  

iOS 15 이상을 대응하면서 UIButton.Configuration으로 모든 버튼의 디자인을 하고 있는데,
이 Configuration에는 따로 font 프로퍼티가 존재하지 않았다.

 

백업하기 버튼과 불러오기 버튼 타이틀의 폰트 적용은 AttributeContainer의 font 프로퍼티에 폰트를 지정하고, 
Configuration의 attributedTitle 프로퍼티에서 
AttributeContainer의 attributes에 AttributeContainer를 지정함으로써 해결할 수 있었다.

 

위 BackupAndRestoreButton에 생략된 setUI() 메서드는 다음과 같다.

// MARK: - Design Methods
    private func setUI() {
        guard let title = title else {
            print("No title for BackupAndRestoreButton")
            return
        }

        var container = AttributeContainer()
        container.font = .meringue(size: 15)
        container.foregroundColor = .label
        
        var buttonConfiguration = UIButton.Configuration.filled()
        buttonConfiguration.baseBackgroundColor = .systemBackground
        buttonConfiguration.attributedTitle = AttributeContainer(title, attributes: container)
        
        configuration = buttonConfiguration
        
        addShadows()
    }
    
    private func addShadows() {
        addShadow(radius: 12, opacity: 0.2)  // 아래 'UIView+Extension으로 그림자 구현을 빠르게 하기' 참고
    }

 

 

 

 

  UIView+Extension으로 재사용을 활용해 그림자 구현을 빠르게 하기  

 

매번 4줄씩 적어야 그림자를 그릴 수 있는 번거로움을 줄이고자 extension으로 메서드를 만들었다.

UIView의 extension에 아래와 같은 메서드를 선언해 놓으면, 
UIImageView, UIButton과 같이 UIView를 상속받는 객체들에서 이 메서드로 그림자를 그릴 수 있다!

extension UIView {
    func addShadow(radius: CGFloat, opacity: Float) {
        layer.shadowColor = UIColor.tintColor.cgColor
        layer.shadowOffset = .zero
        layer.shadowRadius = radius
        layer.shadowOpacity = opacity
    }
}

 

 

이렇게 UIImageView에서도 가능하고

let cloudImageView = UIImageView().then {
        $0.contentMode = .scaleAspectFit
        $0.image = UIImage(systemName: SFSymbol.cloudFill)
        $0.tintColor = .white
//        $0.layer.shadowColor = UIColor.tintColor.cgColor
//        $0.layer.shadowOffset = .zero
//        $0.layer.shadowRadius = 60
//        $0.layer.shadowOpacity = 0.4
//	    ↓ !!!
        $0.addShadow(radius: 60, opacity: 0.4)
    }

 

 

UITableView에서도 가능하다.

let tableView = UITableView(frame: .zero, style: .insetGrouped).then {
        $0.register(BackupFileTableViewCell.self, forCellReuseIdentifier: BackupFileTableViewCell.reuseIdentifier)
        $0.backgroundColor = .clear
        $0.addShadow(radius: 12, opacity: 0.2)
    }

 

 

 

extension으로 구현된 메서드는 서브클래스에서도 사용할 수 있다는 것 또한 알 수 있다..!