Contents

조회 수 3867 댓글 0
Atachment
첨부 '6'
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

gradient_layer_00.jpg


Gradient backgrounds started becoming popular around the time of iOS 7 (2013). With just a little code, adding a gradient background can uplift a dull looking user interface (UI).


There are many ways to create background gradients, below is just one simple approach:


In a new Xcode iOS project, open Main.storyboard, from the Object Library drag a new View onto the View Controller. Set the View’s top, bottom, left and right constraints to be zero and ensure ‘Constrain to margins’ is deselected.


gradient_layer_01.png


Add an IBOutlet to ViewController.swift with the name backgroundGradientView and connect it to the newly added View.


gradient_layer_02.png


Below super.viewDidLoad(), create a gradient layer and apply it to your View.


import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var backgroundGradientView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create a gradient layer.
        let gradientLayer = CAGradientLayer()
        // Set the size of the layer to be equal to size of the display.
        gradientLayer.frame = view.bounds
        // Set an array of Core Graphics colors (.cgColor) to create the gradient.
        // This example uses a Color Literal and a UIColor from RGB values.
        gradientLayer.colors = [#colorLiteral(red: 0, green: 0.5725490196, blue: 0.2705882353, alpha: 1).cgColor, UIColor(red: 252/255, green: 238/255, blue: 33/255, alpha: 1).cgColor]
        // Rasterize this static layer to improve app performance.
        gradientLayer.shouldRasterize = true
        // Apply the gradient to the backgroundGradientView.
        backgroundGradientView.layer.addSublayer(gradientLayer)
    }

    override var shouldAutorotate: Bool {
        return false
    }
    
}

gradient_layer_03.png


By default the gradient is rendered vertically from top to bottom, you can further customise the gradient by setting gradient start and end positions.


// Diagonal: top left to bottom corner.
gradientLayer.startPoint = CGPoint(x: 0, y: 0) // Top left corner.
gradientLayer.endPoint = CGPoint(x: 1, y: 1) // Bottom right corner.

// Horizontal: left to right.
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5) // Left side.
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5) // Right side.


gradient_layer_04.png     gradient_layer_05.png


Finding colours that blend well together can be a little hit and miss, thankfully uiGradients and iOS 7 Colors have a nice collection of gradient swatches.




[출처] https://techion.com.au/blog/2018/11/14/creating-gradient-backgrounds-in-swift





?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
62 Etc 원어민이 매일 쓰는 일상표현 150개 file hooni 2023.09.17 5045
61 Etc 영어. 반드시 외워야 할 문장 패턴 100개 file hooni 2023.06.08 4823
60 Etc RSVP 란? file hooni 2017.11.22 3455
59 Etc How to completely Uninstall Coda hooni 2017.10.24 5426
58 Etc 영어. 불규칙 동사 정리 file hooni 2017.10.04 5764
57 Etc 캘리포니아 운전면허 문제 file hooni 2017.07.22 3638
56 Etc IT감사 기법 시험 file hooni 2017.06.14 3881
55 Etc 사이버보안실무 시험. secret hooni 2017.04.20 0
54 Etc 사이버보안실무 수업 메모 hooni 2017.03.30 3105
53 Etc 종합시험 관련 자료 secret hooni 2017.03.15 0
52 Etc 모바일 프로그래머가 갖추어야 할 필수 역량 file hooni 2017.02.16 6605
51 Etc ISMS 인증기준 – 정보보호대책 (시스템개발보안) file hooni 2016.12.01 3797
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6