CODEWITHSUNDEEP
swiftuitableview
AD Progress
AD Progress

Reputation: 5086

Making a UITableViewCell that is rounded but only on one end

I have a problem in swift. I am trying to make a tableViewCell that is rounded but only on one end. I know how to make rounded tableViewCells with cornerRadius but I want the effect to be only applied to the beginning of the tableViewCell and the end to be standard.

This is basically what I am trying to achieve

at the moment with the code extensions below I am getting this: currently what I am getting is this my cell is getting clipped

import UIKit
import SwipeCellKit

class CategoryTableViewCell: SwipeTableViewCell {

    @IBOutlet weak var categoryNameLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        roundCorners([.topLeft, .bottomLeft], radius: self.bounds.height / 2)
}

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
    }
}

extension UIView {
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

Upvotes: 1

Views: 209

Answers (2)

sohan vanani
sohan vanani

Reputation: 1574

Add extension to UIView :

extension UIView {
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

Now you can do rounded corner of any corner of the view as per below example.

myView.roundCorners([.topLeft,.topRight,.bottomRight], radius: 10)

Upvotes: 1

Fadielse
Fadielse

Reputation: 401

first you have to decide which one to be rounded.

extension UIView {
    func bottomRoundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }

    func topRoundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

I will apply the sample collectionViewCell class code as follows

func configureCell(withBottomCorner bottomCorner: Bool) {
    if bottomCorner == true {
        self.contentView.clipsToBounds = true
        setBottomCorner()
   }
}

func setBottomCorner() {
   if #available(iOS 11.0, *) {
      self.contentView.layer.cornerRadius = 6
        self.contentView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]
    } else {
        self.contentView.bottomRoundCorners([.bottomLeft, .bottomRight], radius: 6.0)
    }
 }

hope this help.

Upvotes: 2

Related Questions