语言

Menu
Sites
Language
How to change the height of the genlist item?

Hi All,

I am using a genlist with style "double_label". I have below issues to address.

  1. I want to increase the height of each item according to the text size.
  2. I want to wrap sub text when it is not able to fit in the screen.

Thank you in advance.

响应

17 回复
Alex Dem

Hi,
fyi, I did not face appropriate api in genlist how to configure item's height  ( but I 'll check maybe it is possible with EDC). 
What way do you set size of the text in item?
Alexey. 

Dharmesh Guna

Hi Alex,

No, I am not setting any size for text items. I am just returning text in _text_get_callback.

 

colin Rao

Hi,

I think you can't change the genlist item height. By default, the text will be truncated with ellipsis if it's too long. Also, this style is good than to change the item height to fit the text size, the extremely scenario is that the whole screen only show one itme, it's very ugly. :)

Alex Ashirov

Hi,

Right. One more disadvantage of such approach is performance. In such case, height is calculated for each list item and this may affect performance significantly, e.g ., during scrolling.

Dharmesh Guna

Hi Colin and Alex,

Height and performance will not be the issue for me. I just want to display entire sub text to the user.

Jean Yang

Hi Guna,

For point one, do you set the text size like follow way?

snprintf(text, sizeof(text), "%s%s%s", "<font_size=40>","abc", "</font_size>");

 

thanks.

Ashwini Kumar

Hi Yang,

Can we set the font size and style (like Bold, Italics or underline) thru html style tags?

If yes can you please share the tags available.

Thanx,

Ashwini

Dharmesh Guna

Hi Jean,

I followed below tutorial for setting elm.text part of genlist item.  

https://developer.tizen.org/documentation/tutorials/native-application/ui/ui-control/genlist 

Jean Yang

Hi Ashwini,

yes, we can set font size and colors via HTML styles tags, but till now I didn't try all of them, as I know the below tags can be used. Will check and back to you if I find more.

 

"<b>

<font_size=22>

<color=#ffffff>

text

</color>

</font_size>

</b>"

 

Vikram

Another side-effect, call elm_object_item_text_get on the item will get the whole text include the text style. The acutal result as above should be "<b><font_size=22><color=#ffffff>text</color></font_size></b>". I think this is a bug, the text style info should be exclude from the result of elm_object_item_text_get.

The best way for text style should be set in edc. :)

Jean Yang

Hi Ashwini,

You can check the below link in help documents

Tizen Mobile Native App Programming > Programming Guide > UI: Creating the Application UI > Evas Rendering

Textblock supports the following formats: 
•font: Font description in fontconfig such as format, for example "Sans:style=Italic:lang=hi". or "Serif:style=Bold".
•font_weight: Overrides the weight defined in "font". For example, "font_weight=Bold" is the same as "font=:style=Bold". The supported weights are "normal", "thin", "ultralight", "light", "book", "medium", "semibold", "bold", "ultrabold", "black", and "extrablack".
•font_style: Overrides the style defined in "font". For example, "font_style=Italic" is the same as "font=:style=Italic". The supported styles are "normal", "oblique", and "italic".
•font_width: Overrides the width defined in "font". For example, "font_width=Condensed" is the same as "font=:style=Condensed". The supported widths are "normal", "ultracondensed", "extracondensed", "condensed", "semicondensed", "semiexpanded", "expanded", "extraexpanded", and "ultraexpanded".
•lang: Overrides the language defined in "font". For example, "lang=he" is the same as "font=:lang=he".
•font_fallbacks: A comma delimited list of fonts to try if finding the main font fails.
•font_size: The font size in points.
•font_source: The source of the font, for example an eet file.
•color: The text color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•underline_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•underline2_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•outline_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•shadow_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•glow_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•glow2_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•strikethrough_color: The color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•align: The text alignment in one of the following formats: "auto" (according to text direction), "left", "right", "center" or "middle", which take a value between 0.0 and 1.0 or a value between 0% to 100%.
•valign: The vertical text alignment in one of the following formats: "top", "bottom", "middle", "center", "baseline" or "base", which take a value between 0.0 and 1.0 or a value between 0% to 100%.
•wrap: The text wrap in one of the following formats: "word", "char", "mixed", or "none".
•left_margin: Either "reset" or a pixel value indicating the margin.
•right_margin: Either "reset" or a pixel value indicating the margin.
•underline: The style of underlining in one of the following formats: "on", "off", "single", or "double".
•strikethrough: The style of text that is either "on" or "off".
•backing_color: The background color in one of the following formats: "#RRGGBB", "#RRGGBBAA", "#RGB", or "#RGBA".
•backing: The background color enabled or disabled: "on" or "off".
•style: The style of the text in one of the following formats: "off", "none", "plain", "shadow", "outline", "soft_outline", "outline_shadow", "outline_soft_shadow", "glow", "far_shadow", "soft_shadow" or "far_soft_shadow". The direction is selected by adding "bottom_right", "bottom", "bottom_left", "left", "top_left", "top", "top_right" or "right". For example, "style=shadow,bottom_right".
•tabstops: The pixel value for tab width.
•linesize: To force a line size in pixels.
•linerelsize: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.
•linegap: To force a line gap in pixels.
•linerelgap: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.
•item: Creates an empty space that is filled by an upper layer. Use "size", "abssize", or "relsize" to define the item"s size, and an optional vsize = full/ascent to define the item's position in the line.
•linefill: Either a float value or percentage indicating how much to fill the line.
•ellipsis: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.
•password: Either "on" or "off", this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off.

Dharmesh Guna

Thanks Jean,

I was also looking for this tutorial for long time.

Dharmesh Guna

Hi Jean, Alex

I am able to show full sub text in multiple line by setting ellipsis=-1.0 as mentioned above.

But it increases the list item height almost 3 times compare to original size and shows unneccessory white space above and below the text.

Jean Yang

Hi Dharmesh,

The below format tag will show the sub text correctly in genlist, please add <wrap> tag.

"<wrap=word><ellipsis=-1.0><color=#FF0000>Andy, it's been a long time, how are you man?</color></ellipsis></wrap>",

Dharmesh Guna

Hi Jean,

I did the same.

But it also increases the list item height almost 3 times compare to original size and shows unneccessory white space above and below the text.

Jean Yang

Hi Dharmesh, 

It's seems some problem in layout, the most easy way to check this, create a sample in IDE, the step list below:

1. Create sample, the name is "UI control", its under Native APP.

2. Find the genlist.c file,  search the "    const char *long_txt[] = " //this is the subline text

3. replace the "Andy, it's been a long time, how are you man?" with below text string;

"<wrap=word><ellipsis=-1.0><color=#FF0000>Andy, it's been a long time, how are you man?</color></ellipsis></wrap>",

4. till now, you can see the sub text was in good order, not take too much withe space, and to check why you meet white space issue, you can compare your code with sample code, or you can share your code, I'll help you to check.

Dharmesh Guna

Hi Jean,

Thank you so much for the guidance.

In the UI Control app elm_genlist_mode_set(list, ELM_LIST_COMPRESS); is used.

I used this API in my app and it worked and now UI looks very nice.