[TIL] 2021.03.25

👩🏻‍💻 今日の勉強内容

ビューに必要な枠線を追加

CaLayerとは?( コメントサイト )

シャドウ、角半径、border、3 D変換、マスク、アニメーションなど、ビューにコンテンツまたはアニメーションを描画します.

UIVIEWのタスクはCPUを使用してメインスレッド上で実行され、CALayerはGPU上で直接描画され、個別のスレッド上で実行されます.

CaLayerを拡張して関数を追加します.

extension CALayer {
    func addBorder(_ arr_edge: [Int]) {
        print(arr_edge)
        
        let boldWidth: CGFloat = 2 // 테두리 두께 2
        let basicWidth: CGFloat = 1 // 테두리 두께 1
        
        // .top : CGRect.init(x: 0, y: 0, width: frame.width, height: boldWidth)
        // .bottom : CGRect.init(x: 0, y: frame.height - boldWidth, width: frame.width, height: boldWidth)
        // .left : CGRect.init(x: 0, y: 0, width: boldWidth, height: frame.height)
        // .right : CGRect.init(x: frame.width - boldWidth, y: 0, width: boldWidth, height: frame.height)
        
        let boldCgRect: [CGRect] = [CGRect.init(x: 0, y: 0, width: frame.width, height: boldWidth), CGRect.init(x: 0, y: frame.height - boldWidth, width: frame.width, height: boldWidth), CGRect.init(x: 0, y: 0, width: boldWidth, height: frame.height), CGRect.init(x: frame.width - boldWidth, y: 0, width: boldWidth, height: frame.height)]
        let basicCgRect: [CGRect] = [CGRect.init(x: 0, y: 0, width: frame.width, height: basicWidth), CGRect.init(x: 0, y: frame.height - basicWidth, width: frame.width, height: basicWidth), CGRect.init(x: 0, y: 0, width: basicWidth, height: frame.height), CGRect.init(x: frame.width - basicWidth, y: 0, width: basicWidth, height: frame.height)]
        
        for j in 0...3 { // 회색 부분 먼저 그려줌
            let border = CALayer()
            if arr_edge[j] == 0 {
                border.frame = basicCgRect[j]
                border.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
            }
            self.addSublayer(border)
        }
        for j in 0...3 {
            let border = CALayer()
            if arr_edge[j] == 1 {
                border.frame = boldCgRect[j]
                border.backgroundColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
            }
            self.addSublayer(border)
        }
    }
}

アプリケーション

class SudokuCell: UICollectionViewCell{
 
    @IBOutlet weak var numLabel: UILabel!
    @IBOutlet weak var view: UIView!
    
    func updateUI(_ i : Int){
        numLabel.text = String(i % 10)
        // 행 비교
        var edgeArr: [Int] = [0,0,0,0]
        // top bottom left right 순
        if (i / 9 % 3) == 0 {
            if i % 3 == 0 { // 위, 왼
                edgeArr = [1,0,1,0]
            } else if i % 3 == 1 { // 위
                edgeArr = [1,0,0,0]
            } else{ // 위, 오
                edgeArr = [1,0,0,1]
            }
        } else if (i / 9 % 3) == 1 {
            if i % 3 == 0 { // 왼
                edgeArr = [0,0,1,0]
            } else if i % 3 == 2 { // 오
                edgeArr = [0,0,0,1]
            }
        } else{
            if i % 3 == 0 { // 왼, 아
                edgeArr = [0,1,1,0]
            } else if i % 3 == 1 { // 아
                edgeArr = [0,1,0,0]
            } else{ // 아, 오
                edgeArr = [0,1,0,1]
            }
        }
        
        view.layer.addBorder(edgeArr)
    }
}

✍🏻 今日は

上に9つの数字ボタンを作成してStoryboardで実装しようとしたが、ボタン間の間隔をどのように決定するか分からないのでCollectionViewで実現した.Androidシステムなら例えばHorizontalSpacingを0にするとSelf-Sizing?でもxcodeはダメまた,関係をequalではなくequal以下と指定したが,この方法では各機器の比率が適切であるか否かを決定することはできない.そこで、この問題をCollectionViewで解決しました.
今回のアプリケーションのビューが実現するにつれて、他の開発者もどのような方法で自動化Sizingを実現するか知りたいと思っています.各デバイスのサイズは異なりますが、どのようにサイズを調整しますか?まず、私が実現したものでは、低戻りボタンもサイズを指定してくれて、フォントもサイズを指定してくれたので、どの機械でも低戻りビューのサイズは同じです.しかし、数独ボードや下のオプションボタン部分、数字ボタン部分のCollectionViewを使用しているので、柔軟に表示できますが、中のフォントサイズはまた指定されているので、計算するとあまり柔軟ではありません.この部分も明日勉強しなければなりません.😭
M 1チップcocoapodの導入でエラーが発生.明日はコードの少ないプロジェクトを書いてみます.オープンソースも登録したいです~🤦🏻