Dynamic row height of UITableViewCell

There may be situation where we want a UITableViewCell to be of dynamic height .

For example: We have a custom UITableViewCell in which we have a title UILabel and detail UILabel . We want detail UILabel  to be of dynamic height .

So first of all create a custom UITableViewCell class. And two UILabel named title and detail .

1) Set the top, leading and trailing constraint for title label to content view of cell .

2) Now set bottom , leading and trailing constraint for  detail label to content view of cell .

3) Set the vertical spacing  between title label and detail UILabel .

4) Now to prioritize  the title 's constraint over detail label 's constraint  set the content hugging and content compression priority .

  On title label set the content hugging and content compression priority to 751.

Again on detail label set the content hugging and content compression priority to 750 .


It is not yet done. Here we created a basic cell with two UILabel . To make it work in your view controller  set the estimated height for row at indexpath and height for row at indexpath  . UITableview provide methods for both purpose . You can return estimatedRowHeight as per your requirement. It is just an arbitrary value . Return the UITableViewAutomaticDimension for height for row at index path .

That's it .

Add gradient layer to UIView

There may be a situation  when we want to add gradient  to UIView. As we know every UIView is backed by  a layer.  We can also add or insert as many layers to UIView with different functionality. As we can add gradient color to UIView, add animation layer and many more .

It is very easy to add a layer to UIView as: 

 let topgradientLayer = CAGradientLayer()

  topGredientLayer.frame = yourFrame.bounds

  topGredientLayer.startPoint = CGPointMake(0.5, 1.0)

  topGredientLayer.endPoint = CGPointMake(0.5, 0.0)

  topGredientLayer.colors = [UIColor(colorLiteralRed: 1.0,      green: 1.0, blue: 1.0, alpha: 0.0).CGColor,   UIColor(colorLiteralRed: 1.0, green: 1.0, blue: 1.0, alpha: 1.0).CGColor]

yourFrame.layer.insertSublayer(topGredientLayer, atIndex: 0)

This way we can add a layer to UIVIew.The default layer of UIView resize with  its view  but  sublayer does not resize with its view .

To make this work  we create a subclass of UIView and write above code in awakeFromNib() method . And also override layoutSublayersOfLayer(). 

For example:

override func awakeFromNib() {

  //add your layer here

}

override func layoutSublayersOfLayer(layer: CALayer) {

  yourSubLayer.frame  = self.bounds

}

Add a overlay layer on UIView

 Sometime we want to add an overlay layer on the  UIView. We can add an overlay shaded layer using CALayer. As we know each UIView is backed by  a layer. We can add many different layer  as sublayer to UIView. By using CALayer  we add as many effects to UIView as we want . 

For example , to add a sublayer to the part of the UIView, we can write a method for it .   

-(void)addLayerOnView:(UIView *)view withPercentage:(CGFloat)percentage{

    

    CALayer * subLayer  = [[CAShapeLayer alloc]init];

    

    CGFloat requiredW = (percentage/100) * view.frame.size.width ;

    

    CGRect tmpFrame =  view.frame;

    tmpFrame.size.width = requiredW;

    subLayer.frame = tmpFrame;

    subLayer.position  = CGPointMake(subLayer.frame.size.width/2, subLayer.frame.size.height/2);

    subLayer.opacity = 0.5f;

    

    subLayer.backgroundColor =  [UIColor grayColor].CGColor;

    

    [view.layer addSublayer:subLayer];

}

The above defined method take a UIView and percentage  as arguments . UIView is an object on which we want to add a sublayer and percentage tell us to the area of UIView on which we want to add a transparent layer .

In method , We create an instance of CAShapeLayer . Then we get the required width of the layer. We want the width of the layer should be percentage of the total width of the UIView . So we get the Width using formula:

    CGFloat requiredW = (percentage/100) * view.frame.size.width ;

Then set the frame, position and background color of the layer.

subLayer.frame = tmpFrame;

    subLayer.position  = CGPointMake(subLayer.frame.size.width/2, subLayer.frame.size.height/2);

We want to layer should be little transparent , so we also set the opacity of the layer :

    subLayer.opacity = 0.5f;

Finally we set the layer as sublayer of the UIView .

    [view.layer addSublayer:subLayer];

Add dashed border around a UIView

Hello.., some time we have some specific need in our . We may want a UIView to have a dashed border . We can add a border to UIView  , but that will be solid . To add a simple border, we do this:

  view.layer.borderWidth = 1
 view.layer.borderColor  = UIColor.lightGrayColor().CGColor


But what if we want to add dashed border like this:

   

To add dashed border like this , we can create a new layer and that layer as sublayer of the required view.

func dashedBorderLayerWithColor(color:CGColorRef) -> CAShapeLayer {

        

       let  borderLayer = CAShapeLayer()

        borderLayer.name  = "borderLayer"

         let frameSize = selectedViewForImage.frame.size

        let shapeRect = CGRectMake(0, 0, frameSize.width, frameSize.height)

        

        borderLayer.bounds=shapeRect

        borderLayer.position = CGPointMake( frameSize.width/2,frameSize.height/2)

        borderLayer.fillColor = UIColor.clearColor().CGColor

        borderLayer.strokeColor = color

        borderLayer.lineWidth=1

        borderLayer.lineJoin=kCALineJoinRound

        borderLayer.lineDashPattern = NSArray(array: [NSNumber(integer: 8),NSNumber(integer:4)]) as? [NSNumber]

        

        let path = UIBezierPath.init(roundedRect: shapeRect, cornerRadius: 0)

        

        borderLayer.path = path.CGPath

        

        return borderLayer

    }

Here we create an instance of CAShapeLayer. Then set its frame. After that we have set the different properties on instance of CALayer like fill color and stroke color and line width. Since we add a dashed line so we set lineJoin property to KCALineJoinRound. 

Then define the lineDashPattern which takes an array of numbers.

Then finally create a Bezierpath and set that path to the layer. and then return the layer.

Now to add dashed layer we can call above defined function to get the dashed layer like this

let borderLayer  = dashedBorderLayerWithColor(UIColor.blackColor().CGColor)

        

view.layer.addSublayer(borderLayer)