UILabel dynamic height with Autolayout

-
Adding a UILabel to UIScrollView and with a couple of lines of code you would be able to achieve the dynamic height.

But, there is one more way and thats without writing a single line of code.

So, lets get started on it.

Approach 1:

Mistakes that we would make is explained below. (UILabel and UIScrollView)
Add a UIScrollView , set top, left, bottom, right margin set to 0 against superview as per your requirement.

Add the UILabel and we do the same for UILabel (top,left,bottom,right margin set to 0 with respect to SuperView, which is UIScrollView )

With this approach scrollview would not get idea on the scroll limits. It will set the content size, where it would scroll horizontally.

You can still go with this approach. Explained in conclusion.

Approach 2:
Now, lets go with the correct way to Code . 
It includes the following hierarchy UIView -> UIScrollView -> UILabel.

Step 1 : Add the UIView , set the margin according. Here I am using some margin with respect to the superview.




Step2: Add UIScrollView and set the margin with respect to superview with a constant 0. 
Simple, Yeah!




Step 3:  The final components in UILabel , so add and set the margin with respect to superview with a constant 0. Do we get the required output? Yes or no. Answer is NO 😕

Output is shown below.



The reason behind that is , the UIScrollView calculate content size based on the content of UILabel. It pins to the top , left and bottom and expands right.

To solve this issue, UIScrollView must be informed about the width. i.e some way to tell UIScrollView to change to width based on some width. Oh ya, some width.

Let's get back to the hierarchy now. Its UIView -> UIScrollView -> UILabel.

We will make the width of UILabel equals the width of UIView by adding the following constraint. For that select UIView and UILabel and set it to equals width as shown in the image below.



And finally we get the expected output with auto scroll.




So, now change the orientation to Landscape mode, width of UIView change and so does the UILabel width.


Conclusion:
1) Use the UIView -> UIScrollView -> UILabel hierarchy 
2) Set the width of UILabel to UIView.

Note:  You can also use the Approach 1, provided you set the UILabel widths equal to UIScrollView's superView, which is UIView (UIView of the UIViewController)


Comments

Post a Comment

Popular posts from this blog

hitTest on iOS to identify the view being hit

-
Image
HitTest on iOS Use hitTest, to identify the view being tapped. The below method allows us to identify the view being selected. We can use it, to identify the view from which we would like to hide the touch events or identify the view we are interested into. Example: In the below case when we tap on Black View we can show an alert like "Black View tapped!" , if we tap on Red View , we can show an alert  "You are not allowed to tap on Red View" .  override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? { } Here is a simple implementation of the method, to identify the view being hit. View hierarchy being used is listed below:- Blue(parent) - Red(child) - Green(child) - Yellow (child) - Orange (child) - Black (child) - White (child) So lets' start with override of hitTest method.      override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? {         //1         if let viewAvailable = findPoin
Read more

CMTimeMakeWithSeconds explained

-
Image
CMTime  is structure which has two main components,  timeScale  and  value. CMTIME = VALUE  / TIMESCALE where, TimeScale =  fraction of a second each unit in numerator occupies. CMTIME = Value / TimeScale 1)  public   func  CMTimeMake( _  value:  Int64 ,  _  timescale:  Int32 ) ->  CMTime CMTimeMake ( 6000 ,  10 ) Means, there are 6000 units , each unit occupies 1/10 of a second 2)  public   func  CMTimeMakeWithSeconds( _  seconds:  Float64 ,  _  preferredTimescale:  Int32 ) ->  CMTime CMTimeMakeWithSeconds(10.0,500) 10.0 = VALUE /500 Therefore VALUE = 5000 So, there are 5000 units, each occupy 1/500 of a second
Read more

Custom Editing Control for UITableViewCell , like iPhone Mail Appliation

-
Image
Dear Friends, Today, while I was developing a application, I found that I am in need to a custom Editing control. Custom Editing Control are displayed on the left side of the screen. IOS sdk provides two of such kind which we use most of the time UITableViewCellEditingStyleDelete & UITableViewCellEditingStyleInsert  . I will be now discussing the third one, UITableViewCellEditingStyleNone. This can be used to design our own Editing control. How this is going to look like can be fond from below screen shot. Steps to achieve this can be found below: STEP 1: Create A subclass of UITabelViewCell First create a subclass of UITableViewCell, where when the cell object is initialised we will have to add a UIButton to its view. You will also need a offset variable, whose value will be 32.0 in all iPhones. -( id ) initWithCoder:( NSCoder *)aDecoder{          self =[ super initWithCoder :aDecoder];          if ( self ){         offset =32.0;        
Read more