Pattern We Should Use When We Make UI Programmatically

YongJunCha·2021년 12월 15일
0
post-thumbnail
post-custom-banner
import UIKit

extension UIColor {
    static var mainPink = UIColor(red: 232/255, green: 68/255, blue: 133/255, alpha: 1)
}

class ViewController: UIViewController {
    
    let bitCoinImageView: UIImageView = {
        let imageName = "Bitcoin_Logo"
        let image = UIImage(named: imageName)
        let imageView = UIImageView(image: image)
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()
    
    let descriptionTextView : UITextView = {
        let textView = UITextView()
        let attributedText = NSMutableAttributedString(string: "Bet Your Money And Wait it", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18)])
        attributedText.append(NSAttributedString(string: "\n\n\nAre You Ready for loads and loads of func? Don't wait any longer! We hope to see in our coin store sooon", attributes: [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 13),
                                                                                                                                                                                        NSAttributedString.Key.foregroundColor: UIColor.gray]))
        textView.attributedText = attributedText
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.textAlignment = .center
        textView.isEditable = false
        textView.isScrollEnabled = false
        return textView
    }()
    
    private let previousButton : UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Prev", for: .normal)
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        button.setTitleColor(.gray, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    private let nextButton : UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Next", for: .normal)
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        button.setTitleColor(.gray, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(.mainPink, for: .normal)
        return button
    }()
    
    private let pageControl: UIPageControl = {
        let pc = UIPageControl()
        pc.currentPage = 0
        pc.numberOfPages = 4
        pc.currentPageIndicatorTintColor = .mainPink
        pc.pageIndicatorTintColor = UIColor(red: 249/255, green: 207/255, blue: 224/255, alpha: 1)
        
        return pc
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(bitCoinImageView)
        view.addSubview(descriptionTextView)
        
        setupLayout()
        setupBottomControls()
        
    }
    
    fileprivate func setupBottomControls() {
        
        let bottomControlStackView = UIStackView(arrangedSubviews: [previousButton, pageControl ,nextButton])
        bottomControlStackView.translatesAutoresizingMaskIntoConstraints = false
        bottomControlStackView.distribution = .fillEqually
        view.addSubview(bottomControlStackView)
        
        NSLayoutConstraint.activate([
            bottomControlStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            bottomControlStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            bottomControlStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            bottomControlStackView.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
    
   
    
    private func setupLayout() {
        let topImageContainerView = UIView()
        topImageContainerView.backgroundColor = .white
        view.addSubview(topImageContainerView)
        topImageContainerView.translatesAutoresizingMaskIntoConstraints = false
        topImageContainerView.addSubview(bitCoinImageView)
        topImageContainerView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        
        [
            // BitConinImage
            bitCoinImageView.centerXAnchor.constraint(equalTo: topImageContainerView.centerXAnchor),
            bitCoinImageView.centerYAnchor.constraint(equalTo: topImageContainerView.centerYAnchor),
            bitCoinImageView.heightAnchor.constraint(equalTo: topImageContainerView.heightAnchor, multiplier: 0.5),
            
            // DescriptionTextView
            descriptionTextView.topAnchor.constraint(equalTo: bitCoinImageView.bottomAnchor, constant: 150),
            descriptionTextView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 24),
            descriptionTextView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -24),
            descriptionTextView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
            
            // TopImageContainer
            topImageContainerView.topAnchor.constraint(equalTo: view.topAnchor),
            topImageContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            topImageContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            
            topImageContainerView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5),
        ].forEach{ $0.isActive = true }
        
    }
}

Conclusion

  • ViewDidLoad 부분을 더럽히지 않는다
  • 상단부분에 선언한 UI들 처럼 후행 클로저에 디테일한 세팅을 한 뒤 리턴해준다.
  • ViewDidLoad 아랫 부분에 Constraint관련 펑션을 생성해주고 그 안에서 관리한다.
  • SwiftUI로 프로젝트를 끝내고 나서 다시 공부를 하니 이해가 가는 부분이 많았다.
  • 개인적으로는 스토리보드로 만드는 것 보다 취향에는 더 맞았다.
post-custom-banner

0개의 댓글