CODEWITHSUNDEEP
iosuitableviewautolayoutvisual-format-language
XiOS
XiOS

Reputation: 1805

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 ?

Upvotes: 0

Views: 93

Answers (1)

Prashant Tukadiya
Prashant Tukadiya

Reputation: 16456

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

Upvotes: 1

Related Questions