In UICollectionViewCell need to set border effect where it cross to each others (Junction type)

Question

I implement the UICollectionViewCell. Now I need to set border effect where the cell cross to each others like junction point.

here is the image, which I need to set border like this..

I tried out to give cell border but in output left & right side border is appear which is not my desired output. So my output look like this. (Wrong output)

So please help me..

I think once you set UICollectionView background colour as per your boarder colour. May your problem will solved. Try it. — Yagnesh Dobariya, Aug 18 '17 at 08:33
@YagneshDobariya I already check with changed background color, but when scrolling at that time background color is visible — NiravS, Aug 18 '17 at 08:34
For that you can disable bounces effect in UICollection from Storyboard or programmatically. — Yagnesh Dobariya, Aug 18 '17 at 08:36
are you trying to achieve a `parallax effect`? or just a `static border`. — Joe, Aug 18 '17 at 10:42
can you explain your problem in short.its hard to understand your problem?. are you having problem with only outside border or post your tried code may help to solve your issue — Joe, Aug 18 '17 at 11:21
I need to only set middle border '+' without outside border(Left&Right) — NiravS, Aug 18 '17 at 11:23
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: CGFloat(collectionView.frame.size.width / 2 - 0.5 ), height: CGFloat(170)) } — NiravS, Aug 18 '17 at 11:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152247/discussion-between-niravs-and-joe). — NiravS, Aug 18 '17 at 11:31

Joe · Answer 1 · 2017-08-18T13:15:09.770

Note: Below answer based on the discussion between question owner and myself.

You need to setup a collectionViewFlowLayout properly to achieve the desired output. Try below code:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    // All the values are changable according to your needs.
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsets.zero
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 2
    return CGSize(width: (self.collectionView.frame.width / 2) - 1 , height:(self.collectionView.frame.height / 3) - 1)
}

Update 1: Calculating layout includes navigationBar and StatusBar.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    // All the values are changable according to your needs.
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsets.zero
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 2
    return CGSize(width: (self.collectionView.frame.width / 2) - 1 , height:(((self.view.frame.height - ((navigationController?.navigationBar.frame.height)! + UIApplication.shared.statusBarFrame.height)) / 3) - 1))
}

You may need to validate collectionView frame in viewDidLayoutSubviews or viewWillLayoutSubviews

 override func viewDidLayoutSubviews() {
 collectionView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
}

Following link may help you to understand the collectionViewFlowLayout.

Enforce collectionView to have only 2 rows

uicollectionview remove top padding

Adjust cellsize for fit all screens?

Note: In future, Post your question with relevant code and state problem clearly.

score 0 · Answer 2 · edited Aug 18 '17 at 08:33

setting border will not give the desired result. enter image description here

cgfloat intcellSize = ([[UIScreen mainScreen] bounds].size.width/3)-0.8;

now inside this method define it:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
 if ((mutArrContact.count%3) == 0) {

            return (mutArrContact.count/3) * intcellSize ;
        }
        else
        {
            return ((mutArrContact.count/3) * intcellSize)+ intcellSize;
        }

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    return CGSizeMake (intcellSize,intcellSize);
}

This is for displaing 3 cells with the desired result.

In UICollectionViewCell need to set border effect where it cross to each others (Junction type)

2 Answers2