[Swift] 角丸にした縁取りのあるいい感じの背景をコードで作る

2019年3月29日2019年4月2日

ユーティリティ系のアプリでよく見かける縁取りのある背景を、画像を使わずに作ります。

こういう感じのを作りたい。
角丸にしてそれっぽく。

サンプルコード

カスタムビューを作って自前で描画してもいいのですが、簡単なUIだけのアプリならそこまでしなくてもいいと思います。なので手っ取り早く角丸にしたUIViewを中心においてそれっぽくします。
Rotate時には一度追加したUIViewを消して作り直す必要があるため一旦消しています。
メンバ変数で保持しておいて、サイズを変えるほうが負荷は低いと思います。

import UIKit

class ViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        // Rotate時にUIViewが残ってしまうので一度消す
        if let subviews = view?.subviews {
            for subview in subviews {
                subview.removeFromSuperview()
            }
        }
        
        view.backgroundColor = .cyan
        
        let bounds = view.bounds
        let inset = view.safeAreaInsets
        // SafeAreaぴったりだと窮屈なので少し小さくする
        let marginH:CGFloat = 20
        let marginV:CGFloat = 40
        // 枠内のサイズを決める
        let width = bounds.width - (inset.left + inset.right) - marginH * 2
        let height = bounds.height - (inset.top + inset.bottom) - marginV * 2
        // 枠の内側に当たるViewを作る
        let frameView = UIView(frame: CGRect(origin: CGPoint(x: marginH, y: marginV), size: CGSize(width: width, height: height)))
        frameView.center = view.center
        frameView.backgroundColor = .white
        view.addSubview(frameView)
        
        // 枠を角丸にする
        frameView.layer.cornerRadius = 15
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

}

おしまい。