#5 이미지, 텍스트, 이모티콘, 테두리 및 둥근 모서리로 아름다운 카드 만들기

목적: Swift의 UI 구성 요소에 익숙해지고 Xcode를 사용하여 다양한 효과가 있는 작은 카드를 만듭니다.

서문: 밸런타인데이가 다가옴에 따라 생존 의지가 강해져서 부득이하게 준비해야 할 것이 있습니다. 이 연습을 통해서만 서로 다른 종류로 생산된 것들이 발렌타인 데이를 기념하는 카드로 결합됩니다.

이번 학습 목표는 다음과 같다.
1. 종류와 속성 사용법 익히기(사진 저장, 배경색 설정, 둥근 모서리, 테두리와 굵기, 서브뷰나 서브레이어 추가) 2. 그라데이션 효과 3.
마스크
효과
4 . 유형 CGAffineTransform 애플리케이션(거울 효과, 변위, 회전)
5. UILable 텍스트 및 이모티콘 저장 및 기타 애플리케이션(function sizeToFit, 글꼴 크기)
6. 새 글꼴 로드

먼저 이번에는 코드를 첨부합니다.

import UIKit
//製作相片漸層
var photoImageView = UIImageView(image: UIImage(named: "hsin.jpg"))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = photoImageView.bounds
gradientLayer.colors = [
    CGColor(red: 1, green: 1, blue: 1, alpha: 0),
    CGColor(red: 1, green: 1, blue: 1, alpha: 0.5)
]
photoImageView.layer.addSublayer(gradientLayer)
//製作相片遮罩
let maskImageView = UIImageView(image: UIImage(named: "Me.HEIC"))
maskImageView.frame = photoImageView.frame
photoImageView.mask = maskImageView
photoImageView.transform = CGAffineTransform(translationX: 250, y: 250)
//製作卡片背景
let card = UIView(frame: CGRect(x: 0, y: 0, width: 1458, height: 2000))
card.backgroundColor = UIColor(red: 245/255, green: 245/255, blue: 220/255, alpha: 1)
//卡片圓角、邊框設計
card.layer.cornerRadius = 70
card.clipsToBounds = true
card.layer.borderWidth = CGFloat(50)
card.layer.borderColor = CGColor(red: 179/255, green: 153/255, blue: 1, alpha: 1)
//卡片與主畫面合成
card.addSubview(photoImageView)
//製作卡片的裝飾
let greenBar = UIView(frame: CGRect(x: 125, y: 0, width: 65, height: 2000))
greenBar.backgroundColor = UIColor(red: 154/255, green: 205/255, blue: 50/255, alpha: 1)
var brownBar = UIView(frame: CGRect(x: 0, y: 125, width: 1458, height: 75))
brownBar.backgroundColor = UIColor(red: 244/255, green: 164/255, blue: 96/255, alpha: 1)
card.addSubview(greenBar)
card.addSubview(brownBar)
var brownBar2 = UIView(frame: CGRect(x: 0, y: 0, width: 1458, height: 75))
brownBar2.transform = CGAffineTransform(translationX: 0, y: 1900)
brownBar2.backgroundColor = UIColor(red: 244/255, green: 164/255, blue: 96/255, alpha: 1)
card.addSubview(brownBar2)
//製作玫瑰
let rose = UILabel()
rose.text = ""
rose.font = UIFont.systemFont(ofSize: 250)
rose.sizeToFit()
rose.frame.origin.x = 1200
rose.frame.origin.y = 1630
card.addSubview(rose)
let mirrowRose = UILabel()
mirrowRose.text = ""
mirrowRose.font = UIFont.systemFont(ofSize: 250)
mirrowRose.sizeToFit()
mirrowRose.frame.origin.x = rose.frame.origin.x-1080
mirrowRose.frame.origin.y = rose.frame.origin.y
mirrowRose.transform = CGAffineTransform(scaleX: -1, y: 1)
card.addSubview(mirrowRose)
let rose2 = UILabel()
rose2.text = ""
rose2.font = UIFont.systemFont(ofSize: 250)
rose2.sizeToFit()
rose2.frame.origin.x = rose.frame.origin.x-250
rose2.frame.origin.y = 1630
card.addSubview(rose2)
let mirrowRose2 = UILabel()
mirrowRose2.text = ""
mirrowRose2.font = UIFont.systemFont(ofSize: 250)
mirrowRose2.sizeToFit()
mirrowRose2.frame.origin.x = mirrowRose.frame.origin.x+250
mirrowRose2.frame.origin.y = rose2.frame.origin.y
mirrowRose2.transform = CGAffineTransform(scaleX: -1, y: 1)
card.addSubview(mirrowRose2)
let rose3 = UILabel()
rose3.text = ""
rose3.font = UIFont.systemFont(ofSize: 250)
rose3.sizeToFit()
rose3.frame.origin.x = rose2.frame.origin.x-275
rose3.frame.origin.y = 1630
card.addSubview(rose3)

//製作緞帶
let ribbon = UILabel()
ribbon.text = ""
ribbon.font = UIFont.systemFont(ofSize: 300)
ribbon.frame = CGRect(x: 50, y: 20, width: 0, height: 0)
ribbon.sizeToFit()
ribbon.transform = CGAffineTransform(rotationAngle: .pi/180*330)
card.addSubview(ribbon)
//製作文字
let fontURL = Bundle.main.url(forResource: "crayon_1-1", withExtension: "ttf")! as CFURL
CTFontManagerRegisterFontsForURL(fontURL, .process, nil)
let letter = UILabel()
letter.text = "Happy Valentine's Day"
letter.font = UIFont(name: "Nagurigaki-Crayon", size: 110)
letter.sizeToFit()
letter.textColor = UIColor(red: 1, green: 115/255, blue: 0, alpha: 1)
letter.transform = CGAffineTransform(translationX: 230, y: 1500)
card.addSubview(letter)

카드 프레임:

UIView를 사용하여 카드 기반 생성:
UIView() 유형을 사용하여 화면을 생성하고 카드에 저장합니다.제작할 화면의 크기는 CGRect 유형의 데이터에 따라 결정됩니다. 다음은 두 가지 접근 방식입니다.

먼저 CGRect() 유형을 사용하여 먼저 프레임을 생성하고 변수에 저장한 다음 변수를 파란색 방지 괄호로 대체할 수 있습니다.

두 번째는 반청색 괄호 안에 CGRect() 타입을 직접 입력하는 방법으로 변수에 저장하지 않고 in situ로 데이터를 생성할 수 있는데 이번에 사용한 두 번째 방법은 다음과 같다.

배경색 변경:

card.backgroundColor = UIColor(red: 245/255, green: 245/255, blue: 220/255, alpha: 1)

card.layer.cornerRadius = 70
card.clipsToBounds = true
card.layer.borderWidth = CGFloat(50)
card.layer.borderColor = CGColor(red: 179/255, green: 153/255, blue: 1, alpha: 0.3)

사진 만드는 부분:

사진 그라데이션:
먼저 UIImageView를 사용하여 사진을 생성한 다음 변수 photoImageView에 저장합니다. 그런 다음 CAGradientLayer 유형의 데이터를 사용하여 다음과 같이 그라디언트를 만듭니다.

//製作相片漸層
var photoImageView = UIImageView(image: UIImage(named: "hsin.jpg"))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = photoImageView.bounds
gradientLayer.colors = [
    CGColor(red: 1, green: 1, blue: 1, alpha: 0),
    CGColor(red: 1, green: 1, blue: 1, alpha: 0.5)
]
photoImageView.layer.addSublayer(gradientLayer)
photoImageView

그라데이션 레이어 생성시 [ ]를 사용하여 그라데이션 레이어로 만들 색상을 감싸줍니다 색상 표시는 위에서 아래로, 첫 번째 색상이 먼저 표시되므로 상단에 색상이 없습니다 그래디언트 레이어(알파가 0이기 때문에)에서 아래쪽은 투명도가 50%인 흰색이 됩니다. 마지막으로 addSublayer 함수를 사용하여 gradientLayer(그라디언트 레이어)를 photoImageView(사진)에 추가하면 요정 느낌이 바로 레벨업되며 결과는 다음과 같습니다.

사진 마스크 ​​만들기:
먼저 마스크로 사용할 사진을 뒷면에 놓고 아래 그림과 같이 리소스 위치에 놓습니다.

//製作相片遮罩
let maskImageView = UIImageView(image: UIImage(named: "Me.HEIC"))
maskImageView.frame = photoImageView.frame
photoImageView.mask = maskImageView

결과는 다음과 같습니다.

큰 머리를 제거한 탓에 머리의 이미지만 남고 머리 이외의 이미지는 투명해졌다. 따라서 머리 이외의 부분을 마스크로 사용한 후에는 화면이 표시되지 않고 머리의 이미지가 있기 때문에 마스크된 사진을 표시할 수 있으므로 내 마음에는 너만 있다는 의미입니다( 생존욕 폭발)

텍스트, 이모티콘 및 기타 응용 프로그램을 저장할 수 있는 UI:

그림 이모티콘 크기 변경:

//製作玫瑰
let rose = UILabel()
rose.text = ""
rose.font = UIFont.systemFont(ofSize: 250)

sizeToFit을 사용하여 레이블의 경계를 설정합니다.

rose.sizeToFit()

sizeToFit() 의 기능은 Label의 크기를 텍스트에 딱 맞게 만드는 것 입니다 . 이모지는 여기에서 텍스트로 간주되기 때문에 이 기능을 이모지에 적용할 수 있으므로 크기가 250일 때 Label의 프레임이 이모지에 자동으로 맞춰집니다.

그림 이모티콘 위치 설정:

rose.frame.origin.x = 1200
rose.frame.origin.y = 1630
card.addSubview(rose)

그래서 여기서는 .frame.origin.x = Double() 및 .frame.origin.y = Double()을 사용합니다.

thing.frame.origin.x = Double()의 기능은 사물의 시작 위치 x 또는 y를 직접 설정하는 것입니다.

이 예에서는 로즈의 x를 1200으로, y를 1630으로 직접 설정했습니다.

mirrowRose.frame.origin.x = rose.frame.origin.x-1080
mirrowRose.frame.origin.y = rose.frame.origin.y

유형 CGAffineTransform 적용됨:

배수량:

brownBar2.transform = CGAffineTransform(translationX: 0, y: 1900)

      
                

                    
                    
                
            

mirrowRose.transform = CGAffineTransform(scaleX: -1, y: 1)

회전하다:

ribbon.transform = CGAffineTransform(rotationAngle: .pi/180*330)

새 글꼴 로드:
1. 글꼴 파일 ttf 또는 tof를 플레이그라운드 리소스로 가져옵니다.

2. 그런 다음 다음 코드를 실행합니다.

let fontURL = Bundle.main.url(forResource: "crayon_1-1", withExtension: "ttf")! as CFURL
CTFontManagerRegisterFontsForURL(fontURL, .process, nil)

●코드의 첫 줄을 사용하여 글꼴 파일 URL을 가져옵니다.

●CTFontManagerRegisterFontsForURL 기능을 사용하여 시스템에 글꼴을 등록합니다.

let letter = UILabel()
letter.text = "Happy Valentine's Day"
letter.font = UIFont(name: "Nagurigaki-Crayon", size: 110)

글꼴 이름 쿼리에는 다음 단계가 있습니다 .

1. 다운로드한 글꼴을 두 번 클릭하고 오른쪽 하단의 설치를 누릅니다.
2. 설치가 완료되면 모든 글꼴 창이 뜨는데, 필터 전환 바를 클릭한 후 최근 7일 추가를 선택하면 최근에 설치된 글꼴을 검색할 수 있습니다.
3. 글꼴을 선택한 다음 정보 창 전환을 누르고 식별자를 선택하면 글꼴 이름을 볼 수 있습니다. 프로그램에서 사용하려면 Postscript Name의 이름을 사용해야 하며, Interface Builder에서 설정하려면 Family name의 이름을 봐야 합니다.

● 마스크를 사용하여 그라데이션 효과를 만들 수도 있습니다.

//製作漸層照片
var photoImageView = UIImageView(image: UIImage(named: "hsin.jpg"))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = photoImageView.bounds
gradientLayer.colors = [
    CGColor(red: 1, green: 1, blue: 1, alpha: 1),
    CGColor(red: 1, green: 1, blue: 1, alpha: 0.5)
]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
photoImageView.layer.mask = gradientLayer
photoImageView

      
                

                    
                    
                
            

● 마스크를 사용하여 그라데이션 사진을 만든 후 마스크를 사용하여 다른 효과를 만들면 다음과 같이 원래 효과가 사라집니다.

//製作漸層照片
var photoImageView = UIImageView(image: UIImage(named: "hsin.jpg"))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = photoImageView.bounds
gradientLayer.colors = [
    CGColor(red: 1, green: 1, blue: 1, alpha: 1),
    CGColor(red: 1, green: 1, blue: 1, alpha: 0.5)
]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
photoImageView.layer.mask = gradientLayer
photoImageView
//製作相片遮罩
let maskImageView = UIImageView(image: UIImage(named: "Me.HEIC"))
maskImageView.frame = photoImageView.frame
photoImageView.mask = maskImageView
photoImageView.transform = CGAffineTransform(translationX: 250, y: 250)

      
                

                    
                    
                
            

참조:

Github: