CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewcelluicollectionviewlayout
NiravS
NiravS

Reputation: 1284

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

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..

enter image description here

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)

enter image description here

So please help me..

Upvotes: 1

Views: 532

Answers (2)

Joe
Joe

Reputation: 8986

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.

Upvotes: 1

Bhoomika
Bhoomika

Reputation: 26

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.

Upvotes: 0

Related Questions