6
Help us understand the problem. What are the problem?

posted at

updated at

SwiftUIでViewに枠線、角丸を適用する

はじめに

SwiftUIでImageやTextに枠線や角丸を適用する方法を書きます。
UIKitで言う所のUIImageViewやUIButtonに枠線や角丸を適用する方法のSwiftUI版です。

環境について

Mac OS Xcode
10.15 Beta Xcode 11.0 beta 3
macOS Monterey (12.0 Beta) Xcode 13.0

画像を表示する

Imageを配置して画像(地球)を読み込みます。

(参考画像の URL: https://ja.wikipedia.org/wiki/%E5%9C%B0%E7%90%83)

実行すると画像が表示されます。
Assets.xcassetsにはearth_imageでセットします。

ContentView.swift
import SwiftUI

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 に設定する
            .frame(width: 200, height: 200)
    }
}

スクリーンショット 2019-07-21 19.22.35.png

枠線

枠線を適用します。ここでは枠線の色を赤にします。

ContentView.swift
import SwiftUI

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで描画する
            .border(Color.red, width: 10)
    }
}

スクリーンショット 2019-07-21 19.20.51.png

角丸

次に角丸を適用します。

Xcode 13.0

2021/10/13 現在
.border(Color.red, width: 10, cornerRadius: 30)が使えなくなってましたので、次のように書きます。
エラー内容: Extra argument 'cornerRadius' in call
(@koogawa さんのご指摘により修正)

ContentView.swift

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color.red, lineWidth: 10)
            )
    }
}

Xcode 11.0 (最新版だとエラーになります)

ContentView.swift

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .border(Color.red, width: 10, cornerRadius: 30)
    }
}

スクリーンショット 2019-07-21 19.24.16.png

角丸が適用されました。この状態では画像の上に枠線が描画されているように見えます。
角丸に合わせて画像にも枠線を描画させるとします。

Xcode 13.0

ContentView.swift
struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color.red, lineWidth: 10)
            )
            // Imageに対して角丸を描画する
            .cornerRadius(30)
    }
}

Xcode 11.0 (最新版だとエラーになります)

ContentView.swift
struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで描画する
            .border(Color.red, width: 10, cornerRadius: 30)
            // Imageに対して角丸を描画する
            .cornerRadius(30)
    }
}

スクリーンショット 2019-07-21 19.33.35.png

これで画像が角丸付きの線に対応して角丸になりました。

今回はImageを例に枠線、角丸を適用しましたが、Textでも同様の処理で実装できます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?