I have a load of cards which I need to display in a vGrid. However, the cards have dynamic heights and what I want to do is have the cards in the columns align to the top.
This is the current setup:
let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10)]
func itemsView() -> some View {
VStack {
filterButton()
.padding(.bottom)
LazyVGrid(columns: resultGridLayout, spacing: Constants.ItemsGrid.spacing) {
ForEach(MockData.resultsData, id: \.id) { result in
ProductCardView(viewModel: .init(container: viewModel.container, menuItem: result))
}
}
.padding(.horizontal, Constants.ItemsGrid.padding)
}
}
Here is how the layout currently is:
So each item is being centered in it's column space, whereas what I want to happen is for them to align across the top of each row.
Obviously the alignment modifier for vGrid allows us to align horizontally (.center, .leading, .trailing etc) but how can I stop these being aligned vertically in the centre?
I assume you wanted to align grid item itself, like
let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10,
alignment: .top)] // << here !!
Tested with Xcode 13.3 / iOS 15.4 (on some replication)
Related
So I want to have a view which overlaps another view, and has it's center Y aligned to the top of the view it's on top of.
The analogous layout constraints in UIKit would be the following:
let topView: UIView...
let bottomView: UIView...
NSLayoutConstraint.activate([
topView.centerYAnchor.constraint(equalTo: bottomView.top)
])
How can I achieve this?
A possible approach is to use alignmentGuide modifier, which allows to fit specific internal alignment line to parent container. So by default containers have center alignment, so using top anchor instead for one of views result in align other's center to top.
Tested with Xcode 13.2 / iOS 15.2
struct DemoView: View {
var body: some View {
ZStack {
Rectangle().fill(.red)
.frame(width: 300, height: 200)
.alignmentGuide(VerticalAlignment.center) { // << here !!
$0[VerticalAlignment.top]
}
Rectangle().fill(.green)
.frame(width: 100, height: 80)
}
.border(Color.black)
}
}
Edit This is a regression in iOS 15 beta. The code works as expected on iOS 14.5:
I have submitted a bug to Apple.
I have a dashboard-style screen in my SwiftUI app, where I am using a LazyVGrid with a single .adaptative column to layout my dashboard widgets, where widgets are laid out in wrapping rows.
It works as I want it to.
However, if a widget happens to be taller than others, I would like other widgets in the same row to grow vertically, so they end up having the same height as the tallest of the row.
This small bit of code illustrates my problem:
struct ContentView: View {
var body: some View {
LazyVGrid(columns: [.init(.adaptive(minimum: 45, maximum: 50), alignment: .top)]) {
VStack {
Spacer()
Text("Hello")
}
.border(.red)
Text("Lorem ipsum")
.border(.blue)
}
.border(.green)
.padding(.horizontal, 100)
}
}
The result is:
I would like the red box (VStack containing Spacer + Hello) to be as tall as the blue box (lorem ipsum).
How could I accomplish that?
Please don't suggest using an HStack, as the above example is only to illustrate my problem with LazyVGrid. I do need to use the grid because I have quite a few children to layout, and the grid works great between phone and iPad form factors (adjusting the number of columns dynamically, exactly as I want it).
It looks like Apple begins (for unknown reason) to apply fixedSize for views in grid to make layout based on known intrinsic content sizes. The Spacer, Shape, Color, etc. do not have intrinsic size so we observe... that what's observed.
A possible approach to resolve this is perform calculations by ourselves (to find dynamically max height and apply it to all cells/views).
Here is a demo (with simple helper wrapper for cell). Tested with Xcode 13.2 / iOS 15.2
struct ContentView: View {
#State private var viewHeight = CGFloat.zero
var body: some View {
LazyVGrid(columns: [.init(.adaptive(minimum: 45, maximum: 50), alignment: .top)]) {
GridCell(height: $viewHeight) {
VStack {
Spacer()
Text("Hello")
}
}.border(.red)
GridCell(height: $viewHeight) {
Text("Lorem ipsum asdfd")
}.border(.blue)
}
.onPreferenceChange(ViewHeightKey.self) {
self.viewHeight = max($0, viewHeight)
}
.border(.green)
.padding(.horizontal, 100)
}
}
struct GridCell<Content: View>: View {
#Binding var height: CGFloat
#ViewBuilder let content: () -> Content
var body: some View {
content()
.frame(minHeight: height)
.background(GeometryReader {
Color.clear.preference(key: ViewHeightKey.self,
value: $0.frame(in: .local).size.height)
})
}
}
struct ViewHeightKey: PreferenceKey {
static var defaultValue: CGFloat { 0 }
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value += nextValue()
}
}
I had exactly same problem. My LazyVGrid looked great on iOS 14, but now its items have different heights.
I found a dirty workaround to force the items have same height:
In my case I have only several items in each LazyVGrid (So it won't cause too much performance drop), and it is easy for me to know which item has the largest height. So I made a ZStack and put a transparent highest item behind the actual item.
struct ContentView: View {
var body: some View {
LazyVGrid(columns: [.init(.adaptive(minimum: 45, maximum: 50), alignment: .top)]) {
ZStack {
Text("Lorem ipsum") // This is the highest item.
.opacity(0) // Make it transparent.
Text("Hello")
}
.border(.red)
Text("Lorem ipsum")
.border(.blue)
}
.border(.green)
.padding(.horizontal, 100)
}
}
This workaround works in my case, but I don't recommend using it widely in your app especially when you have a lot of items in the grid.
I'm trying to achieve a SwiftUI text alignment as illustrated by this image. The goal is to align the top of text ".0" with the top edge of "7" (purple line) and the bottom edge of "kts" with the bottom edge of "7" (red line).
Here is my current SwiftUI code:
HStack(alignment: .lastTextBaseline, spacing: 3) {
Text("7")
.font(.system(size: 70))
.foregroundColor(Color.green)
.multilineTextAlignment(.center)
.minimumScaleFactor(0.3)
VStack(alignment: .leading, spacing: 5) {
Text(".7")
.font(.system(size: 24))
.foregroundColor(Color.green)
Text("kts")
.font(.system(size: 18))
.foregroundColor(Color.white)
}
}
This code works for the alignment shown by the red line.
What approach would you recommend to also align the top of "7" and ".0" as shown by the purple line?
You can use Stacks to stack font. There is no issue for the bottom line, but You can get help from the UIFont that gives you the information you need like:
struct ContentView: View {
let bigFont = UIFont.systemFont(ofSize: 70)
let smallFont = UIFont.systemFont(ofSize: 24)
var body: some View {
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
HStack(alignment: .firstTextBaseline, spacing: 0) {
Text("7").font(Font(bigFont))
Text("kts").font(Font(smallFont))
}
HStack(alignment: .firstTextBaseline, spacing: 0) {
Text("7")
.font(Font(bigFont))
.opacity(0)
Text(".0")
.font(Font(smallFont))
.baselineOffset((bigFont.capHeight - smallFont.capHeight))
}
}
}
}
More information:
Here is an image about the description of the Font for more information:
Given an HStack like the following:
HStack{
Text("View1")
Text("Centre")
Text("View2")
Text("View3")
}
How can I force the 'Centre' view to be in the centre?
Here is possible simple approach. Tested with Xcode 11.4 / iOS 13.4
struct DemoHStackOneInCenter: View {
var body: some View {
HStack{
Spacer().overlay(Text("View1"))
Text("Centre")
Spacer().overlay(
HStack {
Text("View2")
Text("View3")
}
)
}
}
}
The solution with additional alignments for left/right side views was provided in Position view relative to a another centered view
the answer takes a handful of steps
wrap the HStack in a VStack. The VStack gets to control the
horizontal alignment of it's children
Apply a custom alignment guide to the VStack
Create a subview of the VStack which takes the full width. Pin the custom alignment guide to the centre of this view. (This pins the alignment guide to the centre of the VStack)
align the centre of the 'Centre' view to the alignment guide
For the view which has to fill the VStack, I use a Geometry Reader. This automatically expands to take the size of the parent without otherwise disturbing the layout.
import SwiftUI
//Custom Alignment Guide
extension HorizontalAlignment {
enum SubCenter: AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
d[HorizontalAlignment.center]
}
}
static let subCentre = HorizontalAlignment(SubCenter.self)
}
struct CentreSubviewOfHStack: View {
var body: some View {
//VStack Alignment set to the custom alignment
VStack(alignment: .subCentre) {
HStack{
Text("View1")
//Centre view aligned
Text("Centre")
.alignmentGuide(.subCentre) { d in d.width/2 }
Text("View2")
Text("View3")
}
//Geometry reader automatically fills the parent
//this is aligned with the custom guide
GeometryReader { geometry in
EmptyView()
}
.alignmentGuide(.subCentre) { d in d.width/2 }
}
}
}
struct CentreSubviewOfHStack_Previews: PreviewProvider {
static var previews: some View {
CentreSubviewOfHStack()
.previewLayout(CGSize.init(x: 250, y: 100))
}
}
Edit: Note - this answer assumes that you can set a fixed height and width of the containing VStack. That stops the GeometryReader from 'pushing' too far out
In a different situation, I replaced the GeometryReader with a rectangle:
//rectangle fills the width, then provides a centre for things to align to
Rectangle()
.frame(height:0)
.frame(idealWidth:.infinity)
.alignmentGuide(.colonCentre) { d in d.width/2 }
Note - this will still expand to maximum width unless constrained!
Asperis answer is already pretty interesting and inspired me for following approach:
Instead of using Spacers with overlays, you could use containers left and right next to the to-be-centered element with their width set to .infinity to stretch them out just like Spacers would.
HStack {
// Fills the left side
VStack {
Rectangle()
.foregroundColor(Color.red)
.frame(width: 120, height: 200)
}.frame(maxWidth: .infinity)
// Centered
Rectangle()
.foregroundColor(Color.red)
.frame(width: 50, height: 150)
// Fills the right side
VStack {
HStack {
Rectangle()
.foregroundColor(Color.red)
.frame(width: 25, height: 100)
Rectangle()
.foregroundColor(Color.red)
.frame(width: 25, height: 100)
}
}.frame(maxWidth: .infinity)
}.border(Color.green, width: 3)
I've put it in a ZStack to overlay a centered Text for demonstration:
Using containers has the advantage, that the height would also translates to the parent to size it up if the left/right section is higher than the centered one (demonstrated in screenshot).
Okay, I know SwiftUI is a shift in thinking, especially coming from a world of HTML and css. But I've spent like 4 days trying to get something to work that I feel should be pretty easy and just can't so please help!
I have an app where one screen is a table of results, dynamic data that could be one or two rows/columns but could also be hundreds. So I want to be able to scroll around in cases where the table is huge.
I've replicated my setup and reproduced my problems in a Swift playground like so
import Foundation
import UIKit
import PlaygroundSupport
import SwiftUI
struct ContentView : View {
var cellSize: CGFloat = 50
var numRows: Int = 3
var numCols: Int = 3
var body : some View {
ZStack {
ScrollView([.horizontal,.vertical]) {
HStack( spacing: 0) {
VStack ( spacing: 0) {
ForEach(0 ..< numRows, id: \.self) { row in
Text("row " + row.description)
.frame( height: self.cellSize )
}
}
ForEach(0 ..< self.numCols, id: \.self) { col in
VStack( spacing: 0) {
ForEach(0 ..< self.numRows, id: \.self) { row in
Rectangle()
.stroke(Color.blue)
.frame( width: self.cellSize, height: self.cellSize )
}
}
}
}
.frame( alignment: .topLeading)
}
}
}
}
let viewController = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = viewController
Here's what I get when the grid is 3x3
I know things like to center by default in SwiftUI, but why isn't that .frame( alignment: .topLeading) on the HStack causing the table to be aligned to the upper left corner of the screen?
Then even worse, once that table gets large, here's what I get:
Still not aligned to the top left, which would make sense as a starting point.
When I scroll left, I can't even get to the point where I can see my header column
The view bounces me away from the edges when I get close. Like I can get to the point where I can see the top edge of the table, but it bounces me back right away.
A ton of whitespace to the right, which probably correlates to me not seeing my header columns on the left.
What am I doing wrong here? I'm exhausted trying all different frame and alignment options on various Views in here.