Android problem with version 2.2.3

[davidmgallardo]

In iOS it works perfectly , but Android is positioned above the Tableview entirely regardless the top of the TSS. Here I put my TSS to see if I can help. If I remove the Widget from the Tableview XML is positioned correctly.

".container": {

    "backgroundColor": "white"
}
"#cabecera": {

    "left": "0.00%",
    "top": "0.00%",
    "height": "10.68%",
    "width": "100.00%",
    "backgroundColor": "#19ddf2"
}
"#btnCerrar": {

    "left": "2.13%",
    "top": "2.60%",
    "height": "7.95%",
    "width": "16.80%",
    "backgroundImage": "/images/cerrar.png",
    "backgroundSelectedImage": "/images/cerrar.png"
}
"#btnAnadir": {

    "left": "86.00%",
    "top": "3.5%",
    "height": "5.54%",
    "width": "10.00%",
    "backgroundImage": "/images/plus.png",
    "backgroundSelectedImage": "/images/plus_s.png"
}
"#root[platform=ios]": {

    "left": "0",
    "width": "100%",
    "top": "0",
    "height": "100%",
    "navBarHidden": "true"
}
"#root[platform=android]": {

    "theme": "Theme.AppCompat.NoTitleBar.Fullscreen",
    "left": "0",
    "width": "100%",
    "top": "0",
    "height": "100%",
    "navBarHidden": "true"
}
"#lblCabecera": {

    "text": "Aguas Abiertas",
    "left": "0.00%",
    "top": "4.95%",
    "height": "4%",
    "textAlign": "center",
    "width": "100.00%",
    "color": "#000000"
}
"#lblAtras": {

    "text": "Atrás",
    "left": "9.73%",
    "top": "6.15%"
}
"#listaAguasAbiertas": {

    "height": "89.21%",
    "left": "0.00%",
    "top": "10.79%",
    "width": "100.00%",
}

Here you can see the XML:

<Alloy>
    <NavigationWindow module="xp.ui" id="nav">
        <Window class="container" id="root" onOpen="compruebaPrimerInicio">

            <ImageView id="cabecera"/>
            <Button id="btnCerrar" onClick="cerrar"/>
            <Label id="lblCabecera"/>
            <Button id="btnAnadir" onClick="nuevaTravesia" />

            <Widget id="ptr" src="nl.fokkezb.pullToRefresh" onRelease="myRefresher">
                <TableView id="listaAguasAbiertas" onClick="muestraPrueba"/>
            </Widget>

        </Window>
    </NavigationWindow>
</Alloy>

Here You Can See a screenshot of Como appears look in iOS:

And here the screenshot of Android where you see the Tableview is positioned wrong.

Thank you very much in advance

[FokkeZB]

I don't see anything weird, apart from that you are using percentages. Why is that? I've never seen anyone use that (for such a layout at least). I have no idea if that is why it breaks, but it could be.

[davidmgallardo]

Use percentages for the design fits all mobile device formats. The truth is that it is weird.

[FokkeZB]

I'm sorry but I can't look into specific cases in detail. Maybe if you can strip out as much as you can while still being able to reproduce this as a bug and attach a project I can simply run and study I can have a look, but that's a far as my time allows atm, sorry.

[davidmgallardo]

Finally managed to solve the problem . Within the widget.js where control is created Android and calls the module com.rkam.swiperefreshlayout I've included the top property being in this way.

Original:

if (OS_IOS) {
    refreshControl = Ti.UI.createRefreshControl();
    refreshControl.addEventListener('refreshstart', onRefreshstart);

    if (args.title) {
      setTitle(args.title);
    }

    list.refreshControl = refreshControl;

    $.addTopLevelView(list);

  } else if (OS_ANDROID) {
    refreshControl = require('com.rkam.swiperefreshlayout').createSwipeRefresh({
      view: list
    });

    refreshControl.addEventListener('refreshing', onRefreshstart);

    $.addTopLevelView(refreshControl);
  }

Modified:

if (OS_IOS) {
    refreshControl = Ti.UI.createRefreshControl();
    refreshControl.addEventListener('refreshstart', onRefreshstart);

    if (args.title) {
      setTitle(args.title);
    }

    list.refreshControl = refreshControl;

    $.addTopLevelView(list);

  } else if (OS_ANDROID) {
    refreshControl = require('com.rkam.swiperefreshlayout').createSwipeRefresh({
      view: list,
      top: "10.79%"
    });

    refreshControl.addEventListener('refreshing', onRefreshstart);

    $.addTopLevelView(refreshControl);
  }

In my case the top has the value 10.79% because I've got a header in each window.

Thank you very much for everything. Regards

[FokkeZB]

Aha, so we need to update the widget to allow you to pass on arguments for the refresh control constructors.

[FokkeZB]

I've published a new version which passes the arguments (attributes/TSS) passed to the widget on to the constructors of the refresh controllers.

[davidmgallardo]

Thank you very much!!