#5 Faça belos cartões com imagens, texto, emoji, bordas e cantos arredondados

Finalidade: familiarizar-se com os componentes da interface do usuário no Swift e usar o Xcode para criar pequenos cartões com efeitos diferentes.

Prefácio: À medida que o Dia dos Namorados se aproxima, tenho uma forte vontade de sobreviver, então inevitavelmente tenho que preparar algo. Apenas através deste exercício, as coisas produzidas por diferentes tipos são combinadas em um cartão para comemorar o Dia dos Namorados.

Os objetivos de aprendizagem desta vez são os seguintes:
1. Familiarizar-se com o uso de tipos e atributos (armazenamento de fotos, configuração de cor de fundo, cantos arredondados, bordas e sua espessura, adicionando Subview ou Sublayer) 2.
Efeito de gradiente
3. Efeito de máscara
4 Aplicativo tipo CGAffineTransform (efeito de espelho, deslocamento, rotação)
5. UILable salvar texto e emoji e outros aplicativos (função sizeToFit, tamanho da fonte)
6. Novo carregamento de fonte

Primeiro anexe o código desta vez:

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)

Moldura do cartão:

Use UIView para gerar uma base de cartão:
Use o tipo UIView() para gerar uma tela e armazená-la no cartão.O tamanho da tela a ser produzida é determinado pelos dados do tipo CGRect. Aqui estão duas abordagens:

Primeiro, você pode usar o tipo CGRect() para criar o quadro primeiro, armazená-lo em uma variável e, em seguida, substituir a variável nos colchetes anti-azuis, como segue:

A segunda é inserir diretamente o tipo CGRect() nos colchetes anti-azuis, e os dados podem ser gerados in situ, sem ter que armazená-los em uma variável. O segundo método usado desta vez é o seguinte:

Mude a cor de fundo:

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)

Parte de criação de fotos:

Photo Gradient:
primeiro use UIImageView para gerar uma foto e, em seguida, armazene-a na variável photoImageView. Em seguida, utilize os dados do tipo CAGradientLayer para criar um gradiente, conforme a seguir:

//製作相片漸層
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

Na criação da camada de gradiente, use [ ] para envolver a cor a ser feita na camada de gradiente. A exibição de cores é de cima para baixo e a primeira cor será exibida primeiro, portanto, não há cor no topo da a camada de gradiente (porque o alfa é 0), o fundo será branco com uma transparência de 50%. Por fim, use a função addSublayer para adicionar o gradientLayer (camada de gradiente) ao photoImageView (foto), a sensação de fada é nivelada diretamente e os resultados são os seguintes:

Faça uma máscara com foto:
primeiro coloque a foto a ser usada como máscara no verso, e coloque no lugar de Recursos, conforme a figura abaixo:

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

O resultado é o seguinte:

Devido à remoção da minha cabeça grande, apenas a imagem da cabeça permaneceu e as outras imagens além da cabeça ficaram transparentes. Portanto, depois que a parte diferente da cabeça for usada como máscara, a tela não será exibida e, como a imagem da cabeça está lá, ela pode exibir a foto mascarada, o que significa que só tenho você em minha mente ( desejo de sobrevivência explode)

UILable para salvar texto e emoji e outros aplicativos:

Alterar o tamanho do emoji:

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

Use sizeToFit para definir os limites do Label:

rose.sizeToFit()

A função de sizeToFit() é fazer com que o tamanho do Label caiba no texto . Como o emoji foi considerado como texto aqui, essa função também pode ser aplicada ao emoji, para que o quadro do Label se adapte automaticamente ao emoji quando o tamanho for 250.

Defina a posição do emoji:

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

Então aqui eu uso .frame.origin.x = Double() e .frame.origin.y = Double().

A função de thing.frame.origin.x = Double() é definir diretamente a posição inicial x ou y da coisa

Neste exemplo, defino diretamente o x de rose para 1200; y para 1630.

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

Tipo CGAffineTransform aplicado:

Deslocamento:

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

      
                

                    
                    
                
            

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

vez:

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

Novo carregamento de fonte:
1. Puxe o arquivo de fonte ttf ou tof para o recurso de playground

2. Em seguida, execute o seguinte código:

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

●Use a primeira linha de código para obter o URL do arquivo de fonte

●Use a função CTFontManagerRegisterFontsForURL para registrar a fonte no sistema

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

A consulta do nome da fonte tem as seguintes etapas :

1. Clique duas vezes na fonte baixada e pressione instalar no canto inferior direito
2. Após a conclusão da instalação, a janela Todas as fontes aparecerá.Após clicar na barra de alternância do filtro, selecione Adicionado nos últimos 7 dias para pesquisar as fontes instaladas recentemente.
3. Selecione a fonte e pressione Alternar painel de informações, selecione Identificadores, você pode ver o nome da fonte. Se você quiser usá-lo no programa, você precisa usar o nome de Postscript Name.Se você quiser defini-lo no Interface Builder, você precisa olhar para o nome de Family name.

● Você também pode usar a máscara para criar um efeito gradiente:

//製作漸層照片
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

      
                

                    
                    
                
            

● Depois de usar a máscara para criar uma foto gradiente, se eu quiser usar a máscara para criar outros efeitos, o efeito original desaparecerá, conforme a seguir:

//製作漸層照片
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)

      
                

                    
                    
                
            

Referência:

Github: