SwiftUI EditButton 編集モードに切り替えるボタン

EditButton SwiftUI

SwiftUIでのEditButtonは、Viewの.editModeBinding<EditMode>)を切り替えるためのボタンです。下記はシンプルな実装方法です。

struct EditButtonTest: View {
    var body: some View {
        EditButton()
    }
}

上記のように書くとiOSの画面ど真ん中に[Edit]というボタンが配置されています。実行し[Edit]ボタンをタップすると[Done]に切り替わります。

[Edit|Done]の切り替えを確認する場合、下記のような@Environmentを宣言します。

@Environment(\.editMode) var mode

切り替えを確認する場合上記のmode?.wrappedValueが[.inactive|.transient|.active]で判断できます。

下のようにテキストフィールドを配置し、EditをタップするとTextFieldに書き込みができるように実装してみます。

struct EditButtonTest: View {
    @Environment(\.editMode) var mode
    @State var edit1: String = "ダミー"
    var body: some View {
        VStack{
            HStack{
                Spacer()
                EditButton()
            }
            HStack{
                Text("名前")
                    .padding(.all, 4.0)
                if self.mode?.wrappedValue == .inactive {
                    TextField("Name",text: $edit1).padding(.all, 4.0).disabled(true)
                }
                else {
                    TextField("Name", text: $edit1)
                        .padding(.all, 4.0).border(Color.gray, width: 2)
                    Button(action: {
                        self.edit1 = ""
                    }){
                        Image(systemName: "nosign")
                            .foregroundColor(.red)
                    }
                        
                }
                Spacer()
            }
            
            Spacer()
        }
        .padding(.horizontal)
    }
}

実行すると下のような挙動です。

EditButton SwiftUI

SwiftUI Image(systemName:アイコン文字列) について

SwiftUI のImage()でシステムのシンボルアイコンを入れる場合下記のように文字列を指定します。

Image(systemName: "nosign").foregroundColor(.red)

systemNameで“nosign”を指定しました実行すると下のようなアイコンが表示されます。

このsystemNameにウサギのアイコンを入れたい場合“hare.fill”と入れます

それ以外どのようなシンボルアイコンがあるのかネットなどで検索してもなかなか出てこない

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

上記URLを見る感じでは、このアイコンは「SF Symbols」というらしい。URL内の「Symbols for Use As-Is」と書いている部分にいくつかのシンボルの文字列が書いている。

https://developer.apple.com/design/resources/

上記URLに「Download SF Symbols 2 beta」と書いているのでダウンロードする。

SF-Symbols-2.dmgを解凍してインストールし下のようなアイコンのアプリを起動する

起動すると下のような画面が表示されそこにシンボルの文字列が書いています。

2022 MJELD TECHNOLOGIES. ALL RIGHTS RESERVED