【SwiftUI】View を ドラッグ して移動 する

View をドラッグして動かします。


struct TestDragGesture: View {
  @State private var location = CGPoint(x: 150, y: 150)

  var body: some View {
    ZStack {
      VStack(alignment: .trailing) {
        Text("location.x: \(location.x)")
        Text("location.y: \(location.y)")
      }
      .monospaced()

      Circle()
        .fill(.red.opacity(0.5))
        .frame(width: 100)
        .position(location)
        .gesture(
          DragGesture()
            .onChanged { value in
              location = value.location
            }
        )
    }
  }
}

ドラッグ位置が変化するたびに View の位置を更新できます。

var location: CGPoint
The location of the drag gesture’s current event.

👉 DragGesture.Value | Apple Developer Documentation hatena-bookmark

Circle の position は Viewの中心

であることに対して

DragGesture().onChanged() で取得したドラッグ位置

とずれがあるため、

タップ位置を動かした瞬間に中心位置にジャンプしてしまいます。

なんか違和感がありますね !

 

👩🏼‍💻 startLocation と translation

計算方法を変えます。

以下を使います。

var startLocation: CGPoint
The location of the drag gesture’s first event.

var translation: CGSize
The total translation from the start of the drag gesture to the current event of the drag gesture.

👉 DragGesture.Value | Apple Developer Documentation hatena-bookmark


Circle()
  .fill(.red.opacity(0.5))
  .frame(width: 100)
  .position(location)
  .gesture(
    DragGesture()
      .onChanged { value in
        var newLocation = startLocation ?? location
        newLocation.x += value.translation.width
        newLocation.y += value.translation.height
        location = newLocation
      }
      .updating($startLocation) { _, startLocation, _ in
        startLocation = startLocation ?? location
      }
   )

Circle の中心位置に対して、ドラッグの移動量を増減することで、なめらかに違和感なく動くようになりました !



簡単なコードに見えますが、updating を使った位置情報の入れ替えとか、よくみると深い。

👉 updating(_:body:) | Apple Developer Documentation hatena-bookmark
👉 Move your view around with Drag Gesture in SwiftUI | Sarunw hatena-bookmark

しかし、なんか見通しが悪い。

@GestureState と updating() は使いづらい。

 

👩🏼‍💻 まとめ

これでいきます。



キモは、

「ドラッグの移動量を View のポジションに適用」

と

「ドラッグ開始時のドラッグ位置とView中心のズレ」。


【SwiftUI】.contentTransition(.symbolEffect(.replace))



これよく見かけるのでやってみます。


.contentTransition(.symbolEffect(.replace))

まず、Button の Label のアイコンを、

ある値を見ながら切り替えます。

よくあるパターンなので想像はつくでしょう。


@State private var value = false




Button {
  value.toggle()
} label: {
  Label("Favorite", systemImage: value ? "heart.fill" : "heart")
}

次に .symbolVariant() を使います。

挙動は同じだと思われます。


Button {
  value.toggle()
} label: {
  Label("Favorite", systemImage: "heart")
    .symbolVariant(value ? .fill : .none)
}

ここで、

.contentTransition(.symbolEffect(.replace)) を

付けます。


Button {
  value.toggle()
} label: {
  Label("Favorite", systemImage: "heart")
    .symbolVariant(value ? .fill : .none)
    .contentTransition(.symbolEffect(.replace))
}

Apple 公式サンプルコードでは、

以下のようにさらに細かく調整されていました。


Button {
  value.toggle()
} label: {
  Label("Favorite", systemImage: "heart")
    .symbolVariant(value ? .fill : .none)
    .contentTransition(
      .symbolEffect(value ? .replace.upUp : .replace.downUp)
    )
}

以上4つを並べて確認します。

微妙にエフェクト具合が違うけど、

どれがいいとはいいづらい。

👉 【SwiftUI】市松模様を背景にする - Checkered Pattern Background 🏁 hatena-bookmark

 

🧑🏻‍💻 まとめ

タイトルどおりの 


.contentTransition(.symbolEffect(.replace))

ぐらいがシンプルな記述のわりに見栄えが良いように思います。

みんなが良く使ってる意味が分かりました !

【SwiftUI】TextField の角を丸くして背景色を付けるもっとも簡単な方法は

これ簡単に作る方法ありませんかね。

角の丸い背景に色を付けた TextField。

なんか簡単にできないんですが、

いい方法ありませんか。

 

🧑‍💻 やってみる

「角を丸く」

と

「背景色を黄色に」

が同時にできません。


TextField("Search", text: $text)
  .frame(width: 200)
  .background(.yellow)

TextField("Search", text: $text)
  .frame(width: 200)
  .textFieldStyle(.roundedBorder)
  .background(.yellow) // NG
  .backgroundStyle(.yellow) // NG
  .tint(.yellow) // NG

👉 roundedBorder | Apple Developer Documentation hatena-bookmark

 

🧑‍💻 Chain Modifiers

一度、スタイルを plain にして、

padding を付けて、

背景に黄色い角丸四角を置きます。


// chain view modifiers
TextField("Search", text: $text)
  .textFieldStyle(.plain)
  .padding(6)
  .background(.yellow, in: .rect(cornerRadius: 6))
  .frame(width: 200)

しかし、数行続くと View 全体の見通しが悪くなるのがいやだ。

 

🧑‍💻 Create TextFieldStyle

TextField 専用のスタイルを作ってそれを適用します。


struct RoundedBordertFieldStyle: TextFieldStyle {
  var cornerRadius: CGFloat
  var color: Color

  func _body(configuration: TextField<Self._Label>) -> some View {
    configuration
      .textFieldStyle(.plain) // macOS
      .padding(cornerRadius)
      .background(color, in: .rect(cornerRadius: cornerRadius))
  }
}

extension TextFieldStyle where Self == RoundedBordertFieldStyle {
  static var roundedBorderYellow: Self {
    Self(cornerRadius: 6, color: .yellow)
  }
}




TextField("Search", text: $text)
  .textFieldStyle(RoundedBordertFieldStyle(cornerRadius: 6, color: .yellow)) // OK
  //.textFieldStyle(.roundedBorderYellow) // OK
  .frame(width: 200)

しかし、いちいちここまで書くのがいやだ。

_ (アンダースコア) もなんかいや。

👉 TextFieldStyle Protocol "makeBody" method hidden | Apple Developer Forums hatena-bookmark

 

🧑‍💻 Create View extension

ViewModifier を作ろうかと思ったが、

View の extension まででいいですよね。


extension View {
  func roundedBorder(cornerRadius: CGFloat, color: Color) -> some View {
    self
      .textFieldStyle(.plain)
      .padding(cornerRadius)
      .background(color, in: .rect(cornerRadius: cornerRadius))
  }
}




// create view extension (or view modifier)
TextField("Search", text: $text)
  .roundedBorder(cornerRadius: 6, color: .yellow)
  .frame(width: 200)

これぐらいがいいのかな。

 

🧑‍💻 Create Child View

新しく View を作って、それに押し込んじゃいます。


struct RoundedBorderTextField: View {
  var label: String
  @Binding var text: String
  var cornerRadius: CGFloat
  var color: Color

  var body: some View {
    TextField(label, text: $text)
      .textFieldStyle(.plain)
      .padding(cornerRadius)
      .background(color, in: .rect(cornerRadius: cornerRadius))
  }
}




// create child view
RoundedBorderTextField(label: "Search", text: $text, cornerRadius: 6, color: .yellow)
  .frame(width: 200)

最初からこれで良かったのでは。

 

🧑‍💻 まとめ

どれが一番いいんすかね。

macOS に切り替えなが思ったのは、

実際、TextField って、

「フォーカス」とかも

取り扱ってますよね。

それを考えると、

「@State を考慮してるやつ」

のがいいのかもしれません。

👉 【SwiftUI】市松模様を背景にする - Checkered Pattern Background 🏁 hatena-bookmark
👉 【SwiftUI】枠線付き角丸ボタンを簡単に作りたい hatena-bookmark