2

I have some basic styles like:

"#foo": {
    backgroundColor: '#ff0000', // red
}

"#foo[if=Alloy.Globals.isSmallHeight]": {
    backgroundColor: '#0000ff', // blue
}

in alloy.js I have the following:

function pxToDp(px){
  return px / (Titanium.Platform.displayCaps.dpi / 160);
}

var screenWidth;
var screenHeight;

if (Ti.Platform.name == "android") {
    screenWidth = pxToDp(Ti.Platform.displayCaps.platformWidth);
    screenHeight = pxToDp(Ti.Platform.displayCaps.platformHeight);
} else {
    screenWidth = Ti.Platform.displayCaps.platformWidth;
    screenHidth = Ti.Platform.displayCaps.platformHeight;
}

Alloy.Globals.isSmallHeight= screenHeight <= 545;

This basically means the background colour of #foo is blue if the screen height is less than or equal to 545dp, and red otherwise.

This usually works fine. However, there are times when the height of the screen can change during run-time. For example:

  • Screen Orientation Change
  • Multi window (on Android)
  • Adjusting the splitter position while in multi window mode (Android)

The issue with this is that the styles are not re-applied to take into account the new screen width and screen height.

For example, let's say there is a screen of size 600dp x 300dp in the portrait position. #foo will correctly have a background colour of red.

However, if the orientation changes, the screen size is now: 300dp x 600dp, but the #foo does not re-check the height a background colour, and thus is still red instead of blue.

A similar issue occurs when going into split screen.

Therefore my question is, how can I reapply styles when the screen dimensions changes?

Yahya Uddin
  • 26,997
  • 35
  • 140
  • 231

1 Answers1

1

Have a look at the dynamic styles section in the documentation

it will give you a basic idea on how to create style at runtime and apply them. You could do this inside the orientation change event

miga
  • 3,997
  • 13
  • 45
  • But what about multi windows? – Yahya Uddin Mar 20 '17 at 19:41
  • 1
    See your other question about the multi-windows: http://stackoverflow.com/questions/42909094/android-multi-window-support-using-titanium-appcelertor-alloy it is currently not support so I guess the events won't work either, sorry – miga Mar 20 '17 at 20:12