Xcode, Interface Builder, Storyboard의 소기술을 조금 소개해 본다

Interface Builder에서 사용할 수 있는 커스텀 컬러 팔레트 만들기(컬러 정의)



코드로 색상을 정의하는 경우,

UIColor+Additions.swift
// Color palette
extension UIColor {
  @nonobjc class var primary: UIColor {
    return UIColor(red: 55.0 / 255.0, green: 0.0 / 255.0, blue: 179.0 / 255.0, alpha: 1.0)
  }
  @nonobjc class var secondary: UIColor {
    return UIColor(red: 3.0 / 255.0, green: 218.0 / 255.0, blue: 198.0 / 255.0, alpha: 1.0)
  }
}

처럼 UIColor의 extension으로 컬러 팔레트를 만드는 것이 좋을 것이다.

Interface Builder에서 사용할 수 있는 컬러 정의는

① 컬러 패널을 열고 컬러 팔레트를 선택한다.



②설정에서 "NEW"를 선택하면 커스텀 컬러 팔레트를 작성할 수 있다.



③ 필요에 따라 작성한 컬러팔레트의 이름과 정의하는 컬러명을 편집한다. 컬러 팔레트 이름은 설정에서 편집할 수 있으므로 프로젝트 이름 등과 함께 해두면 알기 쉬울 것이다.



④ 최종적으로는 이런 느낌.



작성한 커스텀 컬러 팔레트는, ~/Library/Colors/ 부하에 Example.clr 라고 하는 파일명으로 보존되어 있으므로, 이쪽을 프로젝트 멤버와 공유할 수도 있다.

Asset Catalog에서 벡터 이미지 처리



Asset Catalog로 화상을 관리하는 경우, 일반적으로는 해상도가 다른 디바이스용으로, 각각의 디바이스에 맞는 해상도의 화상을 복수 종류 준비하여 설정한다. 이 방법이라면 이미지를 준비하는 수고도 많고, 크기를 잘못하는 등의 실수도 발생하기 쉬워진다.

Xcode 9부터 Asset Catalog에서 벡터 이미지를 처리할 수 있게 되었다. 준비하는 것은 PDF의 벡터 이미지로, @1x 의 사이즈로 작성한다. 벡터 이미지를 다룰 수 있다는 장점으로,
  • 해상도별로 화상을 준비하지 않아도 되므로, 화상 변경이나 사이즈 변경시의 대응이 용이해진다.
  • 빌드시 Xcode가 @1x , @2x , @3x

    예를 들어 이미지 리소스 관리가 어려운 기존 방법보다 우세합니다. 설정 순서와 주의점으로서는

    ① "Preserve Vector Data"에 체크한다.

    ② "Scales"에 "Single Scale"을 설정한다.



    결국 이런 느낌.



    Asset Catalog로 확대/축소할 이미지 설정



    안드로이드의 9-patch적인 저. 코드에서,
    let image = UIImage(named: "Button")?.resizableImage(withCapInsets: UIEdgeInsets(top: , left: 10, bottom: 10, right: 10))
    

    이런 녀석. Asset Catalog에서 이것을 설정할 수 있습니다.

    ①"Show Slicing"을 선택한다



    ② "Start Slicing"을 선택하여 확축하는 방향과 범위를 설정한다.



    ③ "←·→"를 선택하면 이렇게 된다.



    이것으로 UIButton이나 UIImageView의 사이즈에 따라 가로 방향으로 확축되어 표시되게 된다.

    AutoLayout에 배치된 View를 애니메이션으로 만들기



    View의 프레임을 변경하는 대신 AutoLayout에 배치된 View를 애니메이션으로 만드는 방법.

    아래와 같이 IB로 배치되어 있는 "View"의 "제약"을 코드측 변수와 IBOutlet로 연결한다.



    ViewController.swift
    import UIKit
    
    class ViewController: UIViewController {
    
        @IBOutlet weak var topLayoutConstraint: NSLayoutConstraint!
        @IBOutlet weak var leadingLayoutConstraint: NSLayoutConstraint!
    
        override func viewDidLoad() {
    
            super.viewDidLoad()
    
        }
    
    }
    

    "Animation"버튼을 눌렀을 때, 제약의 값을 애니메이션으로 변경하도록 했다.

    ViewController.swift
    import UIKit
    
    class ViewController: UIViewController {
    
        @IBOutlet weak var topLayoutConstraint: NSLayoutConstraint!
        @IBOutlet weak var leadingLayoutConstraint: NSLayoutConstraint!
    
        override func viewDidLoad() {
    
            super.viewDidLoad()
    
        }
    
        @IBAction func animationButtonTouchUpInside(_ sender: Any) {
    
            self.topLayoutConstraint.constant = 150
            self.leadingLayoutConstraint.constant = 100
    
            UIView.animate(withDuration: 0.3) {
                self.view.layoutIfNeeded()
            }
    
        }
    
    }
    

    포인트로서는, 제약의 변경을 적용시키는 메소드, layoutIfNeeded() 를 애니메이션 처리안에서 부르는 것이다.
  • 좋은 웹페이지 즐겨찾기