ios – The best way to create a ornament view?

Alright, no worries! So, the difficulty you are operating into is that your ornament view (the one with the rounded corners) is not exhibiting up. To repair this, we have to inform every part to make use of this view as a background ornament.

Now, let’s go over the modifications step-by-step:

We have to create an occasion of NSCollectionLayoutDecorationItem and go within the elementKind of the ornament view. This creates a brand new ornament merchandise that we will then connect to our part.

Then, we set this newly created ornament merchandise to the decorationItems property of our layoutSection. This fashion, the part is aware of it ought to use our ornament view as a background.

Lastly, be sure you are setting a colour that stands out on your insetView contained in the RoundedBackgroundView. If it is the identical as the gathering view’s background, your ornament view will mix proper in and be invisible!

So, let’s put this into code. I will use your createFeaturedSection(utilizing:) for instance:

func createCompositionalLayout() -> UICollectionViewLayout {
    let structure = UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
        let part = self.sections[sectionIndex]

        swap part.sort {
        case "mediumTable":
            return self.createSection(utilizing: part, sort: "mediumTable")
        case "smallTable":
            return self.createSection(utilizing: part, sort: "smallTable")
        case "listTable":
            return self.createSection(utilizing: part, sort: "listTable")
        default:
            return self.createSection(utilizing: part, sort: "featured")
        }
    }

    structure.register(RoundedBackgroundView.self, forDecorationViewOfKind: RoundedBackgroundView.reuseIdentifier)
    let collectionView = UICollectionView(body: view.bounds, collectionViewLayout: structure)
    self.view = collectionView

    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.interSectionSpacing = 20
    structure.configuration = config
    return structure
}

func createSection(utilizing part: Part, sort: String) -> NSCollectionLayoutSection {
    // create gadgets, teams, and so forth. right here based mostly in your sort
    // I am leaving the creation of things and teams to you as it will rely in your wants

    let layoutSection = NSCollectionLayoutSection(group: layoutGroup)

    let decorationItem = NSCollectionLayoutDecorationItem.background(elementKind: RoundedBackgroundView.reuseIdentifier)
    decorationItem.contentInsets = NSDirectionalEdgeInsets(high: 10, main: 10, backside: 10, trailing: 10)
    
    layoutSection.decorationItems = [decorationItem]

    return layoutSection
}

class RoundedBackgroundView: UICollectionReusableView {
    static let reuseIdentifier = "RoundedBackgroundView"

    personal var insetView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .secondarySystemFill
        view.layer.cornerRadius = 15
        view.clipsToBounds = true
        return view
    }()

    override init(body: CGRect) {
        tremendous.init(body: body)
        backgroundColor = .clear
        addSubview(insetView)

        NSLayoutConstraint.activate([
            insetView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 15),
            trailingAnchor.constraint(equalTo: insetView.trailingAnchor, constant: 15),
            insetView.topAnchor.constraint(equalTo: topAnchor),
            insetView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been applied")
    }
}

This code now takes care of making and registering the ornament views with the structure. In createSection(utilizing:sort:), we set the decorationItems for the layoutSection. The ornament view is ready to be an occasion of RoundedBackgroundView, and it is created with some insets for spacing.

Keep in mind to regulate the createSection(utilizing:sort:) perform to deal with the creation of the structure gadgets and teams as wanted for every sort of part.

Now, your assortment view ought to show the ornament view as a background for the gadgets in your sections.