Manuel_Rodrigues Manuel_Rodrigues - 3 days ago 5
iOS Question

define fontSize in percentage in titanium

I need to set the font size of a label in percentage so when I resize the current layout inside my app the text resizes equals to the rest of the screen.

I have this:

vara label = Ti.UI.createLabel({
text : ("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut").toString(),
color : "white",
font : {
fontSize : deviceWidth * 0.03,
fontFamily : "OpenSans-Light"
},
left : "0%",
}));


but I need something like this:

var label Ti.UI.createLabel({
text : ("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut").toString(),
color : "white",
font : {
fontSize : "20%,
fontFamily : "OpenSans-Light"
},
left : "0%",
}));


The problem is that the fontSize : "20% doesn't work.

How can I due that in a label?

Im working in classic mode

This is what I won't to achieve:


enter image description here

When my screen resizes the text should resize to.

Answer

Edit because of adjusted question:

To adjust font size dynamically on the fly you'll need to use a "hack". As you cannot use a percentage for a label.

The steps to follow:

  1. Create a wrapper view around all the elements you want to resize dynamically, this can include other elements besides Labels too
  2. Convert the entire view to an image (after it has been rendered) by doing wrapperView.toImage()
  3. Create an imageview and position it exactly on top of your wrapper view you have.
  4. Hide the wrapperview.
  5. Resize the imageview while you want it resized.
  6. As soon as you actually need the labels again (so after animation is done for example), put the wrapper back and remove the image again.

The user will have no knowledge there was an image because it was animating anyways and users are used to not being able to click during animations. And as soon as the animation is done the content is replaced again. A flawless implementation and gives you a lot of flexibility.

--- Original answer below for future reference ----

A percentage is not possible, however there is a solution that might help you.

On Android you can use the font size sp. This will mean the font is scale dependent, basically what you're looking for.

For iOS you can check wether the device is an iPad or iPhone based on resolution, or by checking if Ti.UI.iPad exists for example. Then you can specify a font size based on iPad or iPhone.

Furthermore, on iOS you can use the minimumFontSize property of a label and then specify a bigger font size wrapped in a fixed view (with percentage width for example). By doing so, the font is able to scale down based on the container it is in. Read more about that in the documentation.

Comments