#3 사진/텍스트/이모티콘/테두리/둥근 모서리를 사용한 슬램덩크 사진 콜라주

Mar 14 2023
그림 UI 구성 요소에 대한 어제의 쓰기 방법을 사용해 봅시다. 1. addSubview를 사용하여 그림을 결합합니다. 2.

그림 UI 요소에 대한 어제의 쓰기 방법을 시도해 봅시다.

1. addSubview를 사용하여 화면 결합

2. 사진을 보여주는 UIImageView

//叫出底圖圖片
let image = UIImage(named: "底圖.jpeg")          //UI屬性
let posterImageView = UIImageView(image: image) //UIImgaeView(UI屬性)
posterImageView                                 //目前圖是一個變數名稱了

//圖片位置以及尺寸
posterImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 800)
posterImageView.contentMode = .scaleAspectFit   //維持比例,左右留白
posterImageView.contentMode = .scaleToFill      //維持比例,超出部分被切掉
posterImageView.alpha = 0.9                     //透明度

      
                

  • 크기 위치: 프레임
  • 투명도: 알파
  • 텍스트: 텍스트
  • 텍스트 색상: textColor
  • 텍스트 크기: 글꼴
  • //設定文字位置以及尺寸
    let messageLabel = UILabel(frame: CGRect(x: 180, y: 20, width: 540, height: 55))     //位置
    messageLabel.text = "教練!我想打籃球"                                                  //內容
    messageLabel.font = UIFont.systemFont(ofSize: 55)                                    //文字大小
    messageLabel.textColor = .red                                                        //顏色
    posterImageView.addSubview(messageLabel)                                             //底圖加入文字
    
           
                    

  • 테두리 너비: borderWidth
  • 테두리 색상: borderColor
  • 필렛: cornerRadius
  • //設定底圖 邊框
    posterImageView.layer.borderWidth = 10                                               //外框厚10
    posterImageView
    posterImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)     //外框顏色
    posterImageView
    posterImageView.layer.cornerRadius = 50                                              //四邊倒角
    posterImageView
    posterImageView.clipsToBounds = true                                                 //把旁邊消除
    
           
                    

  • 회전:
  • //迴圈加入4個emoji 在最上緣
    for i in 0...3 {
        print(i)
        let ballLabel = UILabel(frame: CGRect(x: (i+2)*100, y: 2, width: 250, height: 250))
        ballLabel.text = "⛹"
        ballLabel.font = UIFont.systemFont(ofSize: 60)
        posterImageView.addSubview(ballLabel)
    }
    
           
                    
    //迴圈加入6個emoji在左側 for i in 0...5 { // 120+ (0*-10)=120 120+0*(105)=120 // 120+ (1*-10)=110 120+1*(105)=225 let ballLabel = UILabel(frame: CGRect(x: 10+i*(-10), y: 120+i*(105), width: 150, height: 40)) //emoji每個位置 ballLabel.text = "⛹‍♂️" //emoji內容 ballLabel.font = UIFont.systemFont(ofSize: 50) //emoji大小 // 180/180 + 0*45 = 0 // 180/180 + 1*45 = 45 // 180/180 + 2*45 = 90 ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45)) //旋轉角度 posterImageView.addSubview(ballLabel) //emoji加入底圖 }
    //迴圈加入6個emoji在右側 (寫函式並用呼叫的) func righSideLabel() { for i in 0...5 { // 120+ (1*-10)=110 let ballLabel = UILabel(frame: CGRect(x: 600+i*(10), y: 120+i*(105), width: 150, height: 40)) ballLabel.text = "" ballLabel.font = UIFont.systemFont(ofSize: 50) ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45)) posterImageView.addSubview(ballLabel) } } righSideLabel() //呼叫函示

    //要加入的 湘北高中球員圖
    let playerImageView = UIImageView(image: UIImage(named: "球員照去背.jpeg")) //一行把照片設成變數
    
           
                    
    playerImageView.backgroundColor = UIColor(red: 247/255, green: 192/255, blue: 74/255, alpha: 1) //櫻木球衣改黃色

    
    playerImageView.frame = CGRect(x: 300, y: 550, width: 200, height: 150)                         //球員圖位置與尺寸
    playerImageView.contentMode = .scaleToFill                                                      //球員圖裁切
    posterImageView.addSubview(playerImageView)                                                     //球員圖加入底圖
    

    import UIKit
    
    //叫出底圖圖片
    let image = UIImage(named: "底圖.jpeg")          //UI屬性
    let posterImageView = UIImageView(image: image) //UIImgaeView(UI屬性)
    posterImageView                                 //目前圖是一個變數名稱了
    
    //圖片位置以及尺寸
    posterImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 800)
    posterImageView.contentMode = .scaleAspectFit   //維持比例,左右留白
    posterImageView.contentMode = .scaleToFill      //維持比例,超出部分被切掉
    posterImageView.alpha = 0.8                     //透明度
    
    //設定文字位置以及尺寸
    let messageLabel = UILabel(frame: CGRect(x: 180, y: 20, width: 540, height: 55))     //位置
    messageLabel.text = "教練!我想打籃球"                                                  //內容
    messageLabel.font = UIFont.systemFont(ofSize: 55)                                    //文字大小
    messageLabel.textColor = .red                                                        //顏色
    posterImageView.addSubview(messageLabel)                                             //底圖加入文字
    
    //設定底圖 邊框
    posterImageView.layer.borderWidth = 10                                               //外框厚10
    posterImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)     //外框顏色
    posterImageView.layer.cornerRadius = 50                                              //四邊倒角
    posterImageView.clipsToBounds = true                                                 //把旁邊消除
    
    
    //迴圈加入4個emoji 在最上緣
    for i in 0...3 {
        print(i)
        let ballLabel = UILabel(frame: CGRect(x: (i+2)*100, y: 2, width: 250, height: 250))
        ballLabel.text = "⛹"
        ballLabel.font = UIFont.systemFont(ofSize: 60)
        posterImageView.addSubview(ballLabel)
    }
    
    
    //迴圈加入6個emoji在左側
    for i in 0...5 {
        //                                  120+ (0*-10)=120  120+0*(105)=120
        //                                  120+ (1*-10)=110  120+1*(105)=225
        let ballLabel = UILabel(frame: CGRect(x: 10+i*(-10), y: 120+i*(105), width: 150, height: 40))   //emoji每個位置
        ballLabel.text = "⛹‍♂️"                                                                         //emoji內容
        ballLabel.font = UIFont.systemFont(ofSize: 50)                                                  //emoji大小
        //                                                     180/180 + 0*45 = 0
        //                                                     180/180 + 1*45 = 45
        //                                                     180/180 + 2*45 = 90
        ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45))               //旋轉角度
        posterImageView.addSubview(ballLabel)                                                           //emoji加入底圖
    }
    
    //迴圈加入6個emoji在右側 (寫函式並用呼叫的)
    func righSideLabel() {
        
        for i in 0...5 {
            //                                      120+ (1*-10)=110
            let ballLabel = UILabel(frame: CGRect(x: 600+i*(10), y: 120+i*(105), width: 150, height: 40))
            
            ballLabel.text = ""
            ballLabel.font = UIFont.systemFont(ofSize: 50)
            ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45))
            posterImageView.addSubview(ballLabel)
        }
    }
    
    righSideLabel() //呼叫函示
    
    //要加入的 湘北高中球員圖
    let playerImageView = UIImageView(image: UIImage(named: "球員照去背.jpeg"))                       //一行把照片設成變數
    playerImageView.backgroundColor = UIColor(red: 247/255, green: 192/255, blue: 74/255, alpha: 1) //櫻木球衣改黃色
    playerImageView.frame = CGRect(x: 300, y: 550, width: 200, height: 150)                         //球員圖位置與尺寸
    playerImageView.contentMode = .scaleToFill                                                      //球員圖裁切
    posterImageView.addSubview(playerImageView)                                                     //球員圖加入底圖
    

    # 142 그림, 텍스트, 이모티콘, 테두리, 둥근 모서리를 사용하여 아름다운 카드 만들기 #9 사진/텍스트/이모지/테두리/둥근 모서리를 사용하여 아름다운 카드 만들기