Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

環境について

Mac OS Xcode
10.15 Beta Xcode 11.0 beta 3

画像を表示する

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

角丸

次に角丸を適用します。

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

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

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でも同様の処理で実装できます。

tamappe
フリーランス上がりのiOSエンジニアです。今はオンライン英会話の会社に所属しiOSとAndroidの両OSを開発しています。使用言語は英語/Swift/Objective-C/Java/Kotlin/Ruby/PHPです。注目のトレンドはブロックチェーンでDAppsです。趣味はポーカーとスプラトゥーン2。
https://tamappe.com/
rarejob
明治神宮にあるオンライン英会話サービスを提供するベンチャー
https://www.rarejob.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした