カテゴリー: Swift

Posted on

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

EditButton SwiftUI

SwiftUIでのEditButtonは、Viewの.editMode（Binding<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

Posted on

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を解凍してインストールし下のようなアイコンのアプリを起動する

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

Posted on

Swift コレクションタイプ Set＜Element＞

SwiftSet

SwiftのコレクションにはSet<Element>があり、SetはArrayとはまったく違う機能を持っています。Set<Element>の代表的な特徴を、ふれてみます。まずは、Setに[1,1,1,1]を入れて確認してみる。

let set1: Set<Int> = [1, 1, 1, 1]
print(set1.count)  // 1
print(set1)        // [1]

上のコードを実行するとset1の中は[1]が1つしか入っていません。Set<Element>は、同じ内容であれば1つにまとめてしまうようです。

let set1: Set<Int> = [1, 2, 1, 2]

上記のような[1,2,1,2]であれば結果は[1,2]の2つが入ることになり配列順番はバラバラです。どうやら都合よく一纏めにしてくれるようです。

Set<Element> 追加・削除

追加や削除に関しては、Array<Element>と同じように行なえます。

var set1: Set<Int> = [1, 2, 1, 2]
set1.insert(3)    // 3を追加
set1.remove(1)    // 1を削除
print(set1.count) // 2
print(set1)       // 3,2が入る

Set<Element> 内に値が含まれているか判断

Set内に目的の値が含まれているかを判断したい場合、containsを使って下記のような記述でできます。

var set1: Set<Int> = [1, 2, 1, 2]
print(set1.contains(2)) //true

Set同士の比較

2つのSetがあった場合の比較したい場合、isSubset, isSuperset, isDisjointが使えます。

let set1: Set<Int> = [1, 2, 3, 4]
let set2: Set<Int> = [1, 3]
print(set2.isSubset(of: set1)) //true

上記のisSubsetは、set2の中にset1が入っているか確認できます。isSupersetはその逆でisDisjointは、要素が入っていない場合trueを返します。

let set1: Set<Int> = [1, 2, 3, 4]
let set2: Set<Int> = [1, 3]
let set3: Set<Int> = [5, 10]
print(set1.isSuperset(of: set2))  //true
print(set2.isDisjoint(with: set3)) //true