CODEWITHSUNDEEP
swift
user2640633
user2640633

Reputation:

UICollectionView Cell with a thick border

I am attempting to create a round collection view cell.

In the cell I have a red UIView that is 0 from top, leading, trailing, and bottom. Inside of that cell I have another view which is white and it is 4 from the top, leading, trailing, and bottom. Within that view is a UILabel and a UIImageView.

The goal would be to have 2 cells per column and it is has a red ring around a white circle and text and an image.

To create the round UIViews I have an extension for UIView like this

extension UIView {
  func createRoundView() {
    layer.cornerRadius = frame.size.width/2
    clipsToBounds = true
  }
}

Inside of my cellForItemAt I say 

cell.whiteBackgroundView.createRoundView()
cell.colorStatusView.createRoundView()

The goal is on the left, but what is happening is on the right.

enter image description here

Here is my Storyboard

enter image description here

The constraints are all blue, nothing red.

And to get the 2 cell per column I use this delegate method

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let padding: CGFloat = 25
    let collectionCellSize = collectionView.frame.size.width - padding
    return CGSize(width: collectionCellSize/2, height: collectionCellSize/2)
}

Any idea what I might be doing wrong?

In the end it doesn't matter if I have a view within a view. I change the ring or border color based on other data....so I just need to be able to easily change that border color.

Upvotes: 0

Views: 1153

Answers (2)

user2640633
user2640633

Reputation:

Using @blinkmeoff answer I figured it out mostly (although follow up question to come)

Inside the cell class I added the following

self.backgroundViewContainer.layoutIfNeeded()       
self.backgroundViewContainer.layer.cornerRadius = min(backgroundViewContainer.frame.size.width, backgroundViewContainer.frame.size.height)/2
self.backgroundViewContainer.clipsToBounds = true

I kept getting weird shapes by just doing the /2 so I added the min(ba...

and that got me perfect circles

Upvotes: 0

MAGiGO
MAGiGO

Reputation: 608

This code is not enough, to tell what's going on there... try to set all 

backgroundColors to .clear

then set those properties to your view

customView.layer.cornerRadius = half of your width
customView.layer.borderWidth = 5
customView.layer.borderColor = UIColor.red.cgColor

Upvotes: 1

Related Questions