I'm creating a custom button in SwiftUI using some shapes.
As a minimal example, I have a filled rectangle, enclosed by a stroked circle (no fill). This is wrapped in a ZStack and a TapGesture is added to that. It works, but my only issue is that the empty space between the square and the circle is not tappable.
How can I make everything inside the circle tappable, without adding a fill to the circle?
struct ConfirmButton: View {
var action: () -> Void
var body: some View {
ZStack {
Circle()
.stroke(Color.purple, lineWidth: 10.0)
.padding(5)
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200, alignment: .center)
}.gesture(
TapGesture()
.onEnded {
print("Hello world")
self.action()
}
)
}
}
You need to define the hit area, with modifier .contentShape():
struct ConfirmButton: View {
var action: () -> Void
var body: some View {
ZStack {
Circle()
.stroke(Color.purple, lineWidth: 10.0)
.padding(5)
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200, alignment: .center)
}.contentShape(Circle())
.gesture(
TapGesture()
.onEnded {
print("Hello world")
self.action()
}
)
}
}
Related
I have a horizontal ScrollView, and within it an HStack. It contains multiple Subviews, rendered by a ForEach. I want to make it so that when these Subviews are tapped, they become centered vertically in the view. For example, I have:
ScrollView(.horizontal) {
HStack(alignment: .center) {
Circle() // for demonstration purposes, let's say the subviews are circles
.frame(width: 50, height: 50)
Circle()
.frame(width: 50, height: 50)
Circle()
.frame(width: 50, height: 50)
}
.frame(width: UIScreen.main.bounds.size.width, alignment: .center)
}
I tried this code:
ScrollViewReader { scrollProxy in
ScrollView(.horizontal) {
HStack(alignment: .center) {
Circle()
.frame(width: 50, height: 50)
.id("someID3")
.frame(width: 50, height: 50)
.onTapGesture {
scrollProxy.scrollTo(item.id, anchor: .center)
}
Circle()
.frame(width: 50, height: 50)
.id("someID3")
.frame(width: 50, height: 50)
.onTapGesture {
scrollProxy.scrollTo(item.id, anchor: .center)
}
...
}
}
But it seemingly had no effect. Does anyone know how I can properly do this?
You can definitely do this with ScrollView and ScrollViewReader. However, I see a couple of things that could cause problems in your code sample:
You use the same id "someID3" twice.
I can't see where your item.id comes from, so I can't tell if it actually contains the same id ("someID3").
I don't know why you have two frames with the same bounds on the same view area. It shouldn't be a problem, but it's always best to keep things simple.
Here's a working example:
import SwiftUI
#main
struct MentalHealthLoggerApp: App {
var body: some Scene {
WindowGroup {
ScrollViewReader { scrollProxy in
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 10) {
Color.clear
.frame(width: (UIScreen.main.bounds.size.width - 70) / 2.0)
ForEach(Array(0..<10), id: \.self) { id in
ZStack(alignment: .center) {
Circle()
.foregroundColor(.primary.opacity(Double(id)/10.0))
Text("\(id)")
}
.frame(width: 50, height: 50)
.onTapGesture {
withAnimation {
scrollProxy.scrollTo(id, anchor: .center)
}
}
.id(id)
}
Color.clear
.frame(width: (UIScreen.main.bounds.size.width - 70) / 2.0)
}
}
}
}
}
}
Here you can see it in action:
[EDIT: You might have to click on it if the GIF won't play automatically.]
Note that I added some empty space to both ends of the ScrollView, so it's actually possible to center the first and last elements as ScrollViewProxy will never scroll beyond limits.
Created a custom ScrollingHStack and using geometry reader and a bit calculation, here is what we have:
struct ContentView: View {
var body: some View {
ScrollingHStack(space: 10, height: 50)
}
}
struct ScrollingHStack: View {
var space: CGFloat
var height: CGFloat
var colors: [Color] = [.blue, .green, .yellow]
#State var dragOffset = CGSize.zero
var body: some View {
GeometryReader { geometry in
HStack(spacing: space) {
ForEach(0..<15, id: \.self) { index in
Circle()
.fill(colors[index % 3])
.frame(width: height, height: height)
.overlay(Text("\(Int(dragOffset.width))"))
.onAppear {
dragOffset.width = geometry.size.width / 2 - ((height + space) / 2)
}
.onTapGesture {
let totalItems = height * CGFloat(index)
let totalspace = space * CGFloat(index)
withAnimation {
dragOffset.width = (geometry.size.width / 2) - (totalItems + totalspace) - ((height + space) / 2)
}
}
}
}
.offset(x: dragOffset.width)
.gesture(DragGesture()
.onChanged({ dragOffset = $0.translation})
)
}
}
}
I have a test code to show the issue, when I am using matchedGeometryEffect, matchedGeometryEffect adds an unwished effect of fade to rendered result, so I like to remove this fading effect or even control it. It could be a good thing when I change the Color of view from one color to other, but in my case it is not good, because the Color is black in all the time.
struct ContentView: View {
#Namespace var animationNamespaceon
#State private var start: Bool = Bool()
var body: some View {
VStack {
Spacer()
circle
Spacer()
Button("update") { start.toggle() }
}
.animation(Animation.linear(duration: 3), value: start)
}
#ViewBuilder var circle: some View {
if start {
Circle()
.foregroundColor(Color.black)
.matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
.frame(width: 300, height: 300)
}
else {
Circle()
.foregroundColor(Color.black)
.matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
.frame(width: 50, height: 50)
}
}
}
This is an effect of default .transition(.opacity) which is applied when view is removed from (inserted to) view hierarchy.
I assume you need linear scale transition instead, like
if start {
Circle()
.foregroundColor(Color.black)
.matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
.transition(.scale(scale: 1))
.frame(width: 300, height: 300)
}
else {
Circle()
.foregroundColor(Color.black)
.matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
.transition(.scale(scale: 1))
.frame(width: 50, height: 50)
}
Tested with Xcode 13 / iOS 15
I have an image that I'm placing over an existing view. It is flush left/leading but I want it centered on the screen (or the salmon colored area).
This is my code:
struct LeaderBoard: View {
#State var shouldDisplayOverLay = true
var body: some View {
ZStack {
VStack(alignment: .center) {
Text("Daily Dashboard")
.font(.subheadline)
Color.darkSalmon
Spacer()
HStack {
Text("Exercise")
Text("Sleep (in hours):")
Text("Weight") // red if lower more than a pound, yellow if less than pound, green if same or higher
}
.font(.caption)
Spacer()
}
Image("Leader-1024")
.resizable()
.scaledToFit()
.modifier(InsetViewModifier())
}
}
}
struct InsetViewModifier: ViewModifier {
func body(content: Content) -> some View {
GeometryReader { proxy in
content
.frame(width: proxy.size.width * 0.8, height: proxy.size.height * 0.8, alignment: .center)
}
}
}
GeometyReader does not have own alignment, so the solution can be to embed some stack in modifier (because all of them have .center alignment by default):
struct InsetViewModifier: ViewModifier {
func body(content: Content) -> some View {
GeometryReader { proxy in
VStack {
content
.frame(width: proxy.size.width * 0.8, height: proxy.size.height * 0.8, alignment: .center)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
and some replicated demo
I'm currently creating a widget for my new iOS 14 app and I encountered a weird problem when I'm trying to add and Overlay with Text on top of my Image. The overlay is correctly working on a blank SwiftUI project but it's not working on the Widget.
Below you can find the code that I'm using. KFImage is from KingFisherSwiftUI, but if you want to test it, you can just add a static Image from the Asset or from the System.
Thanks!
struct NewItems: View {
var body: some View {
KFImage(URL(string: "https://img.freepik.com/free-vector/triangular-dark-polygonal-background_23-2148261453.jpg?size=626&ext=jpg")! )
.resizable()
//.frame(width: 200, height: 200, alignment: .center)
.overlay(TextView(), alignment: .bottomTrailing)
.cornerRadius(20)
}
}
struct TextView: View {
var body: some View {
ZStack {
Text("Hello World Beautiful wallpaper")
.foregroundColor(.white)
.shadow(color: .black, radius: 1, x: 1.0, y: 1.0)
.padding(6)
.opacity(0.8)
}
.background(Color.black)
.cornerRadius(10)
.padding(3)
}
}
[EDIT]
Below the result of the code. Looks like the image is on top of the text, even though it supposed to be in overlay.
In the end after multiple tries I managed to find an alternative solution.
struct TextView: View {
let entry: HelloWorldEntry
var body: some View {
ZStack {
Text("SOME TEXT")
.foregroundColor(.white)
.shadow(color: .black, radius: 1, x: 1.0, y: 1.0)
.padding(6)
.opacity(0.8)
}
.background(Color.black)
.cornerRadius(10)
.padding(6)
}
}
struct NewTest: View {
let entry: HelloWorldEntry
var body: some View {
VStack {}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
KFImage(URL(string: "https://example.com/image.png")!)
.resizable()
.scaledToFill()
)
.overlay(TextView(entry: entry), alignment: .bottomTrailing)
}
}
I have the following view:
struct ContentView: View {
var body: some View {
LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topTrailing, endPoint: .bottomLeading)
.cornerRadius(16)
.frame(width: 140, height: 140)
.contextMenu {
Button("", action: {})
}
}
}
However, when the ContextMenu is invoked, the edges are not rounded:
I've tried several things, such as:
Applying the clipShape modifier to clip it to a RoundedRectangle
Wrapping the gradient as the background of a RoundedRectangle view
Using a Color instead of a LinearGradient (which works as expected, but not what I need)
However none work. Any advice would be appreciated, thanks!
Add the following code after .frame(...):
.contentShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
Updated for Swift 5.7.2
TLDR:
// Use the method that takes in ContentShapeKinds
.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 30))
Placed after .frame(...), and before .contextMenu { ... }
Detailed example:
var body: some View {
VStack(alignment: .leading, spacing: .zero) {
Text("Hello")
.foregroundColor(.white)
.font(.title)
}
.frame(maxWidth: .infinity, minHeight: 120)
// These corner radii should match
.background(RoundedRectangle(cornerRadius: 30).foregroundColor(.blue))
.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 30))
.contextMenu {
Button("Look!") { print("We did it!") }
}
}
The above code produces a contextMenu that looks like this:
... instead of this: