My goal is to vertically center a view that we'll call proxyView. The problem is that there is other content that is variable and the height of that may change. But I still want the proxyView to be centered within the viewstack.
public var body: some View {
GeometryReader { bodyProxy in
VStack(spacing:0) {
ScrollView {
VStack(spacing: 0) {
GeometryReader { contentProxy in
VStack(spacing:0) {
Text("Test")
Text("Variable Height Text")
}
.frame(width: contentProxy.size.width, height: nil, alignment: .center)
}
//THIS IS WHERE THE ISSUE IS.
proxyView(contentProxy: contentProxy)
}
}
}
}
#ViewBuilder
func proxyView(contentProxy: GeometryProxy?) -> some View {
Text("Proxy Test")
.padding(.top, calculateVerticalCenter(proxyHeight: contentProxy?.size.height ?? 0))
}
func calculateVerticalCenter(contentHeight: CGFloat?) -> CGFloat {
let maxMargin = textMargin + textMargin2 + (contentHeight ?? 0)
return height/2 - maxMargin
}
So the problem is that I cannot use the second "contentProxy" in this codes current state.
I have tried adding a new #State variable that assigns the contentProxy on the VStack's onAppear. But this ends up "lagging" the actual centering of the proxyView
I also tried to assign the #State variable within the geometryReader but obviously that wont work as I am not allowed to do that in an expected view setting.
I am lost! Thank you in advance!
Related
So i get this error when running my set game app:
Image of the game screen when more of the same cards appear (All cards in the game should be unique)
ForEach<Range<Int>, Int, ModifiedContent<_ConditionalContent<_ConditionalContent<_ConditionalContent<_ConditionalContent
<ZStack<TupleView<(_ShapeView<Squiggle, ForegroundStyle>,
_StrokedShape<Squiggle>)>>, ZStack<TupleView<(ModifiedContent<_StrokedShape<StripedRect>,
_ClipEffect<Squiggle>>, _StrokedShape<Squiggle>)>>>, _StrokedShape<Squiggle>>,
_ConditionalContent<_ConditionalContent<ZStack<TupleView<(_ShapeView<Capsule, ForegroundStyle>, _StrokedShape<Capsule>)>>,
ZStack<TupleView<(ModifiedContent<_StrokedShape<StripedRect>, _ClipEffect<Capsule>>,
_StrokedShape<Capsule>)>>>, _StrokedShape<Capsule>>>, _ConditionalContent<_ConditionalContent<ZStack<TupleView<(_ShapeView<Diamond,
ForegroundStyle>, _StrokedShape<Diamond>)>>, ZStack<TupleView<(ModifiedContent<_StrokedShape<StripedRect>, _ClipEffect<Diamond>>,
_StrokedShape<Diamond>)>>>, _StrokedShape<Diamond>>>,
_FrameLayout>> count (2) != its initial count (1). `ForEach(_:content:)`
should only be used for *constant* data. Instead conform data to `Identifiable`
or use `ForEach(_:id:content:)` and provide an explicit `id`!
It doesnt seem like the card models underneath the view themselves change. Everything but the numberOfShapes on the cards stay the same. So a card that is displayed wrongly will only match if the underlying model is matched correctly and will not match like shown on view.
The error only seem to appear when i either get a set correct and press "show three more cards" or when i display more cards than is visible and then scroll up and down the screen.
The app doesnt stop with the error, but the numberOfShapes on each card changes dynamically (Like on the screenshot above). (This is most clear when i scroll to the top of the screen and then to the bottom and the number of shapes on some cards changes each time)
So i think the problem might be in the card view:
import SwiftUI
struct CardView: View {
var card: Model.Card
var body: some View {
GeometryReader { geometry in
ZStack{
let shape = RoundedRectangle(cornerRadius: 10)
if !card.isMatched {
shape.fill().foregroundColor(.white)
shape.strokeBorder(lineWidth: 4).foregroundColor(card.isSelected ? .red : .blue)
}
VStack {
Spacer(minLength: 0)
//TODO: Error here?
ForEach(0..<card.numberOfShapes.rawValue) { index in
cardShape().frame(height: geometry.size.height/6)
}
Spacer(minLength: 0)
}.padding()
.foregroundColor(setColor())
.aspectRatio(CGFloat(6.0/8.0), contentMode: .fit)
.frame(width: geometry.size.width, height: geometry.size.height)
}
}
}
#ViewBuilder private func cardShape() -> some View {
switch card.shape {
case .squiglle: shapeFill(shape: Squiggle())
case .roundedRectangle: shapeFill(shape: Capsule())
case .diamond: shapeFill(shape: Diamond())
}
}
private func setColor() -> Color {
switch card.color {
case .pink: return Color.pink
case .orange: return Color.orange
case .green: return Color.green
}
}
#ViewBuilder private func shapeFill<setShape>(shape: setShape) -> some View
//TODO: se løsning, brug rawvalues for cleanness
where setShape: Shape {
switch card.fill {
case .fill: shape.fillAndBorder()
case .stripes: shape.stripe()
case .none: shape.stroke(lineWidth: 2)
}
}
}
The cardviews are displayed in a flexible gridlayout:
import SwiftUI
struct AspectVGrid<Item, ItemView>: View where ItemView: View, Item: Identifiable {
var items: [Item]
var aspectRatio: CGFloat
var content: (Item) -> ItemView
let maxColumnCount = 6
init(items: [Item], aspectRatio: CGFloat, #ViewBuilder content: #escaping (Item) -> ItemView) {
self.items = items
self.aspectRatio = aspectRatio
self.content = content
}
var body: some View {
GeometryReader { geometry in
VStack {
let width: CGFloat = widthThatFits(itemCount: items.count, in: geometry.size, itemAspectRatio: aspectRatio)
ScrollView{
LazyVGrid(columns: [adaptiveGridItem(width: width)], spacing: 0) {
ForEach(items) { item in
content(item).aspectRatio(aspectRatio, contentMode: .fit)
}
Spacer(minLength: 0)
}
}
}
}
}
private func adaptiveGridItem(width: CGFloat) -> GridItem {
var gridItem = GridItem(.adaptive(minimum: width))
gridItem.spacing = 0
return gridItem
}
View:
import SwiftUI
struct SetGameView: View {
#StateObject var game: ViewModel
var body: some View {
VStack{
HStack(alignment: .bottom){
Text("Set Game")
.font(.largeTitle)
}
AspectVGrid(items: game.cards, aspectRatio: 2/3) { card in
CardView(card: card)
.padding(4)
.onTapGesture {
game.choose(card)
}
}.foregroundColor(.blue)
.padding(.horizontal)
Button("show 3 more cards"){
game.showThreeMoreCardsFromDeck()
}
}
}
}
Any help solving this is very much appreciated. I have spent so much time on this already.
Your problem is here:
ForEach(0..<card.numberOfShapes.rawValue) { index in
cardShape().frame(height: geometry.size.height/6)
}
This ForEach initializer's first argument is a Range<Int>. The documentation says (emphasis added):
The instance only reads the initial value of the provided data and doesn’t need to identify views across updates. To compute views on demand over a dynamic range, use ForEach/init(_:id:content:).
Because it only reads “the initial value of the provided data”, it's only safe to use if the Range<Int> is constant. If you change the range, the effect is unpredictable. So, starting in Xcode 13, the compiler emits a warning if you pass a non-constant range.
Now, maybe your range (0..<card.numberOfShapes.rawValue) really is constant. But the compiler doesn't know that. (And based on your error, it's not a constant range.)
You can avoid the warning by switching to the initializer that takes an id: argument:
ForEach(0..<card.numberOfShapes.rawValue, id: \.self) { index in
// ^^^^^^^^^^^^^
// add this
cardShape().frame(height: geometry.size.height/6)
}
If you present a Sheet that displays an Image with Text underneath in a ScrollView, when you scroll down then flick back up, notice that it'll scroll beyond the limit and empty space appears above the image until the elastic scroll effect settles. You can then pull down to dismiss the Sheet.
I want to prevent adding space above the Image in the ScrollView. Instead, I want that padding to appear in-between the Image and the first Text. An app that does this is the App Store - when you tap a story in Today, notice the image at the top always remains fixed to the top when scrolled up past the limit, and the elastic bounce effect occurs underneath it.
I suspect GeometryReader could be utilized to get the position in the global CoordinateSpace, but it's not clear to me how to utilize that to obtain the desired behavior.
struct ContentView: View {
#State private var sheetVisible = false
var body: some View {
VStack {
Button(action: {
sheetVisible = true
}, label: {
Text("Present Sheet")
})
}
.sheet(isPresented: $sheetVisible) {
DetailsView(image: UIImage(named: "test"))
}
}
}
struct DetailsView: View {
var image: UIImage?
var body: some View {
ScrollView {
Image(uiImage: image ?? UIImage())
.resizable()
.aspectRatio((image?.size.width ?? 1) / (image?.size.height ?? 1), contentMode: .fill)
.background(Color(.secondarySystemFill))
ForEach(0..<50) { index in
Text("\(index)")
}
}
}
}
Ok, here is possible solution for your case. Tested with Xcode 12b5 / iOS 14.
The idea is to have internal container, that scrolls inside, but reading its coordinate in scroll view coordinate space, compensate image position offsetting it relative to container, which continue scrolling, such giving effect that everything else, ie below image, still has bouncing.
struct DemoView: View {
var image: UIImage?
#State private var offset = CGFloat.zero
var body: some View {
ScrollView {
VStack { // internal container
Image(uiImage: image ?? UIImage())
.resizable()
.aspectRatio((image?.size.width ?? 1) / (image?.size.height ?? 1), contentMode: .fill)
.background(Color(.secondarySystemFill))
.offset(y: offset < 0 ? offset : 0) // compansate offset
ForEach(0..<50) { index in
Text("\(index)")
}
}
.background(GeometryReader {
// read current position of container inside scroll view
Color.clear.preference(key: ViewOffsetKey.self,
value: -$0.frame(in: .named("scroll")).origin.y)
})
.onPreferenceChange(ViewOffsetKey.self) {
self.offset = $0 // needed offset to shift back image
}
}
.coordinateSpace(name: "scroll")
}
}
struct ViewOffsetKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}
This is possible using GeometryReader:
Wrap the Image in GeometryReader so it's possible to get the position in the global coordinate space.
Make sure to add .scaledToFill() to the GeometryReader because otherwise it won't take up any space in a ScrollView. Alternatively you could solve this by giving the GeometryReader a default frame
Use the minY of the Image in the global coordinate space to set the offset when 'dragging up'. This way it's simulated the image is in a fixed position.
There is a problem with this technique. When dragging the sheet down the image will stick to it's position, which looks weird. I haven't found out how to fix that but maybe this answer will help you.
See the example below.
struct DetailsView: View {
func getOffsetY(basedOn geo: GeometryProxy) -> CGFloat {
// Find Y position
let minY = geo.frame(in: .global).minY
let emptySpaceAboveSheet: CGFloat = 40
// Don't offset view when scrolling down
if minY <= emptySpaceAboveSheet {
return 0
}
// Offset the view when it goes above to simulate it standing still
return -minY + emptySpaceAboveSheet
}
var body: some View {
ScrollView {
GeometryReader { imageGeo in
Image(systemName: "option")
.resizable()
.scaledToFill()
.background(Color(.secondarySystemFill))
.offset(x: 0, y: self.getOffsetY(basedOn: imageGeo))
}
// Need this to make sure the geometryreader has a size
.scaledToFill()
ForEach(0..<50) { index in
Text("\(index)")
}
}
}
}
I am working through a sample app to familiarize myself with Swift and SwiftUI and am wanting to combine the ideas of composite layouts using custom views and GeometryReader to determine the screen-size of the device.
The page I'm trying to build is a scrollable list of friends where each row item is a button that can be selected to expand the list to see more details of each friend. I've built the button and all containing views as a FriendView to use inside of my FriendListView. I have defined 2 GeometryReader views within the FriendListView but do not know how I can define the size of each row from within the FriendView to make it maintain the appropriate size.
The need for this comes from not every image that could be set by a user later on for their friend will have the same dimensions so I want to keep it consistent. I understand I could set a .frame() modifier and hardcode the width but I would like it to be relational to the screen to be consistent across all phone screens.
Example: When a row is not expanded, the image should take up half of the device width. When it is expanded I would want it to take up one quarter of the device screen width.
Screenshot
Application View
Sample Code
struct FriendListView: View {
var pets = ["Woofer", "Floofer", "Booper"]
var body: some View {
GeometryReader { geo1 in
NavigationView {
GeometryReader { geo2 in
List(self.pets, id: \.self) { pet in
FriendView(name: pet)
}// End of List
}
.navigationBarTitle(Text("Furiends"))
}// End of NavigationView
}// End of GeometryReader geo1
}// End of body
}
struct FriendView: View {
#State private var isExpanded = false
var randomPic = Int.random(in: 1...2)
var name = ""
var breed = "Dawg"
var body: some View {
Button(action: self.toggleExpand) {
HStack {
VStack {
Image("dog\(self.randomPic)")
.resizable()
.renderingMode(.original)
.scaledToFill()
.clipShape(Circle())
if self.isExpanded == false {
Text(self.name)
.font(.title)
.foregroundColor(.primary)
}
}
if self.isExpanded == true {
VStack {
Text(self.name).font(.title)
Text(self.breed).font(.headline)
}
.foregroundColor(.primary)
}
}
}// End of Button
}
func toggleExpand() {
isExpanded.toggle()
}
}
You can define a GeometryReader in the top level FriendListView and pass the screen width to the FriendView:
struct FriendListView: View {
var pets = ["Woofer", "Floofer", "Booper"]
var body: some View {
GeometryReader { geo in
NavigationView {
List(self.pets, id: \.self) { pet in
FriendView(name: pet, screenWidth: geo.size.width)
}
.navigationBarTitle(Text("Furiends"))
}
}
}
}
Then use the .frame to set the maximum width for an image.
struct FriendView: View {
...
var screenWidth: CGFloat
var imageWidth: CGFloat {
isExpanded ? screenWidth / 4 : screenWidth / 2
}
var body: some View {
Button(action: self.toggleExpand) {
HStack {
VStack {
Image("dog\(self.randomPic)")
.resizable()
.renderingMode(.original)
.scaledToFill()
.clipShape(Circle())
.frame(width: imageWidth, height: imageWidth) // <- add frame boundaries
if self.isExpanded == false {
Text(self.name)
.font(.title)
.foregroundColor(.primary)
}
}
if self.isExpanded == true {
VStack {
Text(self.name).font(.title)
Text(self.breed).font(.headline)
}
.foregroundColor(.primary)
}
}
}
}
func toggleExpand() {
isExpanded.toggle()
}
}
In case you'd want your picture to be centered you can use Spacer:
HStack {
Spacer()
FriendView(name: pet, screenWidth: geo.size.width)
Spacer()
}
I want to set the position and size of Popover page.
I tried all parameters of func popover, I think it may be related with attachmentAnchor and arrowEdge.
Here is my code:
import SwiftUI
struct ContentView : View {
#State var isPop = false
var body: some View {
VStack{
Button("Pop", action: {self.isPop = true})
.popover(isPresented: $isPop, attachmentAnchor: .point(UnitPoint(x: 20, y: 20)), arrowEdge: .top, content: {return Rectangle().frame(height: 100).foregroundColor(Color.blue)})
}
}
}
The effect I want:
Here is kind of correct configuration
struct ContentView: View {
#State private var isPop = false
#State private var text = ""
var body: some View {
VStack{
Button("Pop") { self.isPop.toggle() }
.popover(isPresented: $isPop,
attachmentAnchor: .point(.bottom), // here !
arrowEdge: .bottom) { // here !!
VStack { // just example
Text("Test").padding(.top)
TextField("Placeholder", text: self.$text)
.padding(.horizontal)
.padding(.bottom)
.frame(width: 200)
}
}
}
}
}
The attachmentAnchor is in UnitPoint, ie in 0..1 range with predefined constants, and arrowEdge is just Edge, to which popover arrow is directed. And size of popover is defined by internal content, by default it tights to minimal, but using standard .padding/.frame modifiers it can be extended to whatever needed.
One solution that I found that worked is putting padding around the button and then offset. I needed the offset to reposition the button correctly after the padding was put in. So depending on your design just a padding should work. ArrowEdge parameter and attactmentAnchor are also important but default work well for me with the popover below the button.
For example:
VStack {
Button("Pop", action: {self.isPop = true})
.padding(.bottom, 6) // add in padding to position the popover
.popover(isPresented: $isPop, attachmentAnchor: .point(UnitPoint(x: 20, y: 20)), arrowEdge: .top, content: {return Rectangle().frame(height: 100).foregroundColor(Color.blue)})
}
I'm trying to re-create UI of my current app using SwiftUI. And it is way more difficult than I initially though.
I wanted to achieve card-like cells with some background behind them. I found that List doesn't support that, at least yet. List is so limited - it doesn't allow you to remove cell separator.
So I moved to ForEach inside ScrollView. I guess that isn't something which should be used in production for long tables but that should work for now. The problem I have is that ForeEach view doesn't take all the width ScrollView provides. I can set .frame(...) modifier but that will require hardcoding width which I definitely don't want to do.
Any ideas how to force VStack take full width of the ScrollView? I tried to use ForeEach without VStack and it has the same issue. It seems like ScrollView (parent view) "tells" its child view (VStack) that its frame is less that actual ScrollView's frame. And based on that information child views build their layout and sizes.
Here is my current result:
And here is the code:
struct LandmarkList : View {
var body: some View {
NavigationView {
ScrollView() {
VStack {
Spacer().frame(height: 160)
ForEach(landmarkData) { landmark in
LandmarkRow(landmark: landmark).padding([.leading, .trailing], 16)
}
}.scaledToFill()
.background(Color.pink)
}
.background(Color.yellow)
.edgesIgnoringSafeArea(.all)
.navigationBarTitle(Text("Landmarks"))
}
}
}
struct LandmarkRow : View {
var landmark: Landmark
var body: some View {
HStack {
VStack(alignment: .leading) {
Text(landmark.name).font(.title)
Text("Subtitle")
.font(.callout)
.color(.gray)
}
Spacer()
Text("5 mi")
.font(.largeTitle)
}.frame(height: 80)
.padding()
.background(Color.white)
.cornerRadius(16)
.clipped()
.shadow(radius: 2)
}
}
I've got the same issue, the only way I have found so far is to fix the ScrollView and the content view width, so that every subview you add inside the content view will be centered.
I created a simple wrapper that take the width as init parameter
struct CenteredList<Data: RandomAccessCollection, Content: View>: View where Data.Element: Identifiable {
public private(set) var width: Length
private var data: Data
private var contentBuilder: (Data.Element.IdentifiedValue) -> Content
init(
width: Length = UIScreen.main.bounds.width,
data: Data,
#ViewBuilder content: #escaping (Data.Element.IdentifiedValue) -> Content)
{
self.width = width
self.data = data
self.contentBuilder = content
}
var body: some View {
ScrollView {
VStack {
ForEach(data) { item in
return self.contentBuilder(item)
}.frame(width: width)
}
.frame(width: width)
}
.frame(width: width)
}
}
By default it takes the screen width (UIScreen.main.bounds.width).
It works just like a List view:
var body: some View {
TileList(data: 0...3) { index in
HStack {
Text("Hello world")
Text("#\(index)")
}
}
}
Its possible that the answer to this might just be wrapping your scrollView inside of a GeometryReader
Like done in the answer here -> How do I stretch a View to its parent frame with SwiftUI?