iosuitableviewautolayoutvisual-format-language

uitableviewcell dynamic label width with VFL


I need to fit a label and an image in a table view cell in such a way that the image should be placed immediately next to the label but within the cell visibility. ie., they should look like below,

  1. When the text is smaller or within a line, then the image could be immediate next to the label. Eg -
Smaller text (image)
  1. When the text goes beyond a line, then image could be at the edge of the cell because the label length had already been extended to the length. Eg -
Multiline text multi-line text multi-line
text multi-line text multi-line text multi  (image) 
multi-line text multi-line text

I am trying to achieve this using VFL and no storyboard or nib.

What I tried out :

1. "H:|-[label]-[image(==20)]-|"  , "V:|-[label]-|"

This makes the image to always attached to the edge thus the case 1 fails which needs the image near the label. Eg -

case 1 :

Smaller text                                (image)    (not ok)

case 2 :

Multiline text multi-line text multi-line
text multi-line text multi-line text multi  (image)    (ok)
multi-line text multi-line text
2. "H:|-[label]-[image(==20)]" , "V:|-[label]-|"

This makes the image near the text thus okay for case 1 whereas that fails for case 2 which does not wrap the text to multiple lines then and the text is extending beyond the cell width. Eg -

case 1 :

Smaller text (image)             (ok)

case 2 :

Multiline text multi-line text multi-line text multi...    
(not ok - text not wrapped to multiple lines, remaining text and image hidden) 

How to resolve this? Setting priorities to some constraints would help ?


Solution

  • I don't have much experience with VFL but , I know Autolayout so I can give you Idea how to resolve

    I have seen your both tries

    1. "H:|-[label]-[image(==20)]-|"  , "V:|-[label]-|"
    2. "H:|-[label]-[image(==20)]" , "V:|-[label]-|"
    

    In first try you have fixed image on trailing

    on second try you have fixed image with label

    What would be combine solution ?

    Your clear requirement says that you need your image attached with label trailing also take care about tailing to superview

    So clear solution for that problem is

    you have to give your imageView Trailing may be this code [image(==20)]-| should be changed with Greater than or equal to relation with 0 Constant

    it will tells autolayout engine to keep Min 0 Distance from trailing of superview

    Sorry I couldn't give you exact code as I don't have much experience with VFL

    Hope it will help to you