skip to Main Content

In the Health app, it appears that cells and not sections are styled in this way:

enter image description here

The closest I know of to getting to this appearance is setting the section to be inset grouped

    let listConfiguration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let listLayout = UICollectionViewCompositionalLayout.list(using: listConfiguration)
    collectionView.collectionViewLayout = listLayout

but I’m not sure of a good approach to giving each cell this appearance like in the screenshot above. I’m assuming the list style collection view shown is two sections with three total cells, rather than three inset grouped sections.

2

Answers


  1. In SwiftUI, I know you can do this:

    List(.....) { item in 
        Text("What ever you want here").background(Color.white.cornerRadius(10))
    }
    

    Add .cornerRadius to each of the items or its background
    Not sure in UIKit
    Use UIHostingView(or sth like that) to bridge?

    Login or Signup to reply.
  2. Add these lines into your collection view cell (separate cell design).swift file

    it will help in adding the border and radius you can customise as required

      override func awakeFromNib() {
                super.awakeFromNib()
                
                self.contentView.layer.cornerRadius = 8.0
                self.contentView.layer.borderWidth = 1.0
                self.contentView.layer.borderColor = UIColor.lightGray.cgColor
                self.contentView.layer.masksToBounds = true
            }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search