[SwiftUI]境界線の設定 | 可能性を求めて ~Seeking Star~

概要

SwiftUIで境界線の設定を行う。
Storyboardではlayerのプロパティから設定を行っていたが、SwiftUIではUIごとに境界線の設定の仕方が少々異なる。

ソースコード

import SwiftUI

@main
struct TestApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            UserInterfaceView()
        }
    }
}

View表示部分

import SwiftUI

struct UserInterfaceView: View {
    @State private var inputText: String = ""
    @State private var inputEditorString: String = ""
    
    var body: some View {
        Text("境界、それはものとものの境目")
            .border(Color.gray, width: 3)
        Text("斜め\n七十七度の\n並びで\n泣く泣くいななく\nナナハン\n七台\n難なく\n並べて\n長眺め\n左上から右下へ")
            .border(LinearGradient(gradient: Gradient(colors: [.green, .blue]),
                                   startPoint: .topLeading,
                                   endPoint: .bottomTrailing),
                    width: 3)
        
        TextField("入力してください、色々と", text: self.$inputText)
            .textFieldStyle(.roundedBorder)
        
        TextEditor(text: self.$inputEditorString)
            .overlay(RoundedRectangle(cornerRadius: 5).stroke(.gray, lineWidth: 1))
    }
}

スクリーンショット

詳細

通常のUI

以下のborderの設定を行うことで実装ができる。
つまり、第一引数に色を、widthに太さを設定するわけだ。

.border(Color.gray, width: 3)

TextField

TextFieldに関しては特別色を設定するとかはないと思う。
しかし、入力欄の枠に関しては設定したいことがあると思う。
そういう時は以下のようにする

.textFieldStyle(.roundedBorder)

textFieldStyleのプロパティ

公式ページを参照

プロパティ名	見た目
DefaultTextFieldStyle	`TextField`の設定に基づく
PlainTextFieldStyle	特に表示しない
RoundedBorderTextFieldStyle	角丸の入力欄の枠
SquareBorderTextFieldStyle	角のある入力欄の枠。四角形と考えてもらえればと。

TextEditor

こちらに関してはoverlayの設定を行うことになる。

角丸にする

以下のようにRoundRectangleを使用する。
まずはcornerRadiusで角丸具合を設定して、strokeで境界線の太さや色を設定する。

RoundedRectangle(cornerRadius: 5).stroke(.gray, lineWidth: 1)

正確にはこれは、境界線を設定するというよりも、「図形をUIに重ね合わせる」という処理になっている。

目次

概要