인스타그램 같은 화면, UI 같은 간단한 Pastel View를 만들어 봤습니다.

개시하다

인스타그램 로그인 화면 같은 UIPastelView를 만들어 보고 그 내용을 공유했다.PastelView를 사용하면 아래 그림을 쉽게 만들 수 있습니다.(색상은 동적으로 변경됩니다.)

환경 확인

다음 환경을 사용합니다.

macOS Sierra Version 10.12.4

Xcode Version 8.3.2

가져오기

CocoPods와 Carthage를 사용하여 가져올 수 있습니다.
Pods

use_frameworks!
target 'PastelSample' do
  pod "Pastel"
end

Carthage

github "cruisediary/Pastel" ~> 0.3.0

pastel의 주요 구성 요소

PastelView

PastelView의 호스트입니다.

색상 변경의 시작점과 끝점을 지정할 수 있습니다.

기본적으로 시작 지점은 화면 오른쪽 상단에, 끝점은 화면 왼쪽 하단

에 지정됩니다.

기본 설정에서 색상이 화면 오른쪽 상단에서 화면 왼쪽 하단으로 변경

변경할 색상을 지정할 수 있습니다.(복수 지정 가능)

색상 변경 간격을 설정할 수 있습니다.(한 색상에서 다른 색상으로 변경되는 간격)

예를 들어 시간 감각을 3초로 설정하고 3가지 색을 지정하면 원래의 색으로 돌아가는 데 9초

걸린다

애니메이션을 시작합니다.

PastelGradient

PastelView에서 사용할 수 있는 색상 번들을 제공합니다.

따뜻한 색, 봄 색 등 직관적인 이름으로 지정할 수 있다.

PastelView 색상을 직접 지정할 수 있지만 이런 색상 조합이 있으면 사용하기 편합니다.

이루어지다

PastelView 초기화

색상 변화의 시작점과 끝점 설정

애니메이션 간격 설정

색상 그룹 설정

애니메이션 시작

설치 예

import UIKit
import Pastel

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let pastelView = PastelView(frame: view.bounds)
        view.addSubview(pastelView)

        pastelView.startPastelPoint = .bottomLeft
        pastelView.endPastelPoint = .topRight

        pastelView.animationDuration = 3.0

        pastelView.setColors([UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0),
                              UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0),
                              UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0),
                              UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)])

        pastelView.startAnimation()
    }
}

기타

gradient 설정 예

pastelView.setPastelGradient(.sunnyMorning)

감상

스타일리시한 화면을 아주 간단하게 만들 수 있어요.
컬러의 조합 등은 실제로 실시할 때 어떻게 해야 할지 망설이지만 미리 준비해 놓으니 친근하다.(색상은 colorLiteral로 작성되어 있어 한눈에 쉽게 확인할 수 있습니다.)