skip to Main Content

I have a collectionviewcell with multiple textfields, pictures and labels together. The data is dynamically added, which can have shorter or longer labels and pictures making each cell of collectionview having different height and width. I want to measure the width and height of my collectionviewcell programatically to do multiple things, amongst them is also setting number of columns according to width and height of my cell as per different orientation.
Any ideas how can a width and height be measured?
The layout is drawn on main storyboard without any extra xib. I’ll highly appreciate the response

2

Answers


  1. Use AutoLayout to setup UI.And set collectionview layout as following code:

    let layout = UICollectionViewFlowLayout()
    layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    

    You don’t need to measure the size of cell, the system will do all.

    If you want to measure by yourself, you’d better cache size of cell for better performance.

    Login or Signup to reply.
  2. Generally speaking, you shouldn’t have to know your view’s dimensions (sometimes, but rarely). For instance, I’ve written a view that mimics the behavior and look of Apple HealthKit’s move/exercise/stand rings, and extended it so it can display as many rings as you want, and display a percentage value (e.g. "80%") of the innermost ring or, if you prefer, use a closure to include another subview inside the innermost ring. With all of this, I didn’t need to know the view’s dimensions.

    The trick to it is really to invert your thinking a bit. Try to push configuration into the view, and make your view adaptable.

    You mentioned that alignment is challenging; yes, but once you really get the hang of it, it’s powerful. I’d recommend this reference on how to make the best use of alignment guides, it’s an excellent explanation: https://swiftui-lab.com/alignment-guides/

    But if all else fails and you are absolutely determined to use the view’s dimensions, take a look at GeometryReader:

    GeometryReader { geometry in
        HStack(spacing: 0) {
            Text("Left")
                .font(.largeTitle)
                .foregroundColor(.black)
                .frame(width: geometry.size.width * 0.33)
                .background(Color.yellow)
            Text("Right")
                .font(.largeTitle)
                .foregroundColor(.black)
                .frame(width: geometry.size.width * 0.67)
                .background(Color.orange)
        }
    }
    .frame(height: 50)
    

    Check out Hacking with Swift for a more in-depth explanation: https://www.hackingwithswift.com/quick-start/swiftui/how-to-provide-relative-sizes-using-geometryreader

    Be careful with GeometryReader though. Look at using it in a .background() or .overlay() to avoid altering your view. The catch-22 with it is that in order to figure out your view’s dimensions, GeometryReader creates a view that fills all available space… and this actually can affect the layout of your view. But if you put it in an overlay, you can avoid the problem. Using it tends to be more work than just figuring out how to do the layout without needing to know dimensions. That’s how SwiftUI is designed to work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search