UIKit練習2- 圓型View、畫面排版、Funtion練習-masksToBounds

這次作業是用Layer、View製作各種國旗或圖案，但是只是做圖案無法應用在實務上，所以我就做了一個畫面，把國旗做成ＡＰＰ的排版樣子。

其中日本國旗的圓型是用View去改的，第二個App 畫面因該要有圓角，目前還不太會用Layer，練習中，後續更新，以下是我的程式碼：

import UIKit


class ViewController: UIViewController {
    
    override func viewDidLoad() {
        //設定ViewController自訂顏色
        let selectedColor = UIColor(red: 0.46, green: 0.14, blue: 0.75, alpha: 1)
        view.backgroundColor = selectedColor
        
        //單純設定ViewController的顏色設定
        //view.backgroundColor = UIColor.
        
        japanView(x: 30, y: 80)
        rainbowApp()
        
    }
    
    //製作日本國旗圖案ＡＰＰ圖底圖
    func japanView(x:Int, y:Int){
        var whiterect = CGRect(x: 30, y: 80, width: 100, height: 100)
        let whiterectView = UIView(frame: whiterect)
        // 將背景顏色設置為純白色
        whiterectView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
        whiterectView.layer.cornerRadius = 10
        
        // 創建一個矩形，用於圓形視圖
        let redrect = CGRect(x: (whiterectView.frame.width - 50)/2, y: (whiterectView.frame.height - 50) / 2, width: 50, height: 50)
        let redrectView = UIView(frame: redrect)
        // 將圓形視圖的背景顏色設置為紅色
        redrectView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
        // 將圓形視圖添加為背景視圖的子視圖
        whiterectView.addSubview(redrectView)
        // 設置圓形視圖的圓角半徑，使其成為一個圓形
        redrectView.layer.cornerRadius = 25
        // 將背景視圖添加到主視圖中
        view.addSubview(whiterectView)
    }
    
    func rainbowApp() {
        // 第1個顏色長條，紅
        let a = Double(80)
        let whiterect = CGRect(x: 140, y: a, width: 100, height: 20)
        let whiterectView = UIView(frame: whiterect)
        whiterectView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
        view.addSubview(whiterectView)
        
        //第2顏色
        let whiterect2 = CGRect(x: 140, y: a+20, width: 100, height: 20)
        let whiterectView2 = UIView(frame: whiterect2)
        whiterectView2.backgroundColor = UIColor(red: 1, green: 0.5, blue: 0, alpha: 1)
        view.addSubview(whiterectView2)
        //3
        let whiterect3 = CGRect(x: 140, y: a+40, width: 100, height: 20)
        let whiterectView3 = UIView(frame: whiterect3)
        whiterectView3.backgroundColor = UIColor(red: 1, green: 1, blue: 0, alpha: 1)
        view.addSubview(whiterectView3)
        //4
        let whiterect4 = CGRect(x: 140, y: a+60, width: 100, height: 20)
        let whiterectView4 = UIView(frame: whiterect4)
        whiterectView4.backgroundColor = UIColor(red: 0, green: 1, blue: 0, alpha: 1)
        view.addSubview(whiterectView4)
        //5
        let whiterect5 = CGRect(x: 140, y: a+80, width: 100, height: 20)
        let whiterectView5 = UIView(frame: whiterect5)
        whiterectView5.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 1)
        view.addSubview(whiterectView5)

    }
}
#Preview {
    UIStoryboard(name: "Main", bundle: nil).instantiateInitialViewController()!
}

但是！以上程式碼會讓底圖上的View蓋在上面，這樣設定好的圓角也會被新增的 View蓋住。

故而需使用『masksToBounds』！

  func rainbowApp() {
        var whiterect1 = CGRect(x: 140, y: 80, width: 100, height: 100)
        let whiterectView1 = UIView(frame: whiterect1)
        whiterectView1.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
        view.addSubview(whiterectView1)
        whiterectView1 .layer.cornerRadius = 25
        whiterectView1.layer.masksToBounds = true

當底圖設定好圓角之後，後面的圖層全部要加在底圖裡，所以我改了addSubview的位置，讓他並非是圖疊圖的狀態（上下層關係）。

而是圖＋圖（同一層關係），以下是底圖「加入」紅色圖層的代碼：

    func rainbowApp() {
        var whiterect1 = CGRect(x: 140, y: 80, width: 100, height: 100)
        let whiterectView1 = UIView(frame: whiterect1)
        whiterectView1.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
        view.addSubview(whiterectView1)
        whiterectView1 .layer.cornerRadius = 25
        whiterectView1.layer.masksToBounds = true
        
        // 第1個顏色長條，紅
        let a = Double(80)
        let redrect = CGRect(x: 0, y: 0, width: 100, height: 100)
        let redRectView = UIView(frame: redrect)
        redRectView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
        whiterectView1.addSubview(redRectView)

後面的顏色以此類推，畫面就是想要的有圓角啦。

「 UIView.layer.masksToBounds = true」