Appcelerator titanium navigationWindow

Question

Hello titanium mobiles developpers,

I have some questions about navigationWindow, because picture is better than thousands of words :

As you can see i have a blue back button of the navigationWindow and as content a ScrollableView with image :

<Alloy>
<Window>
    <ScrollableView id="scrollableView" showPagingControl="true" overlayEnabled="true" pagingControlColor="transparent" backgroundColor="black">
        <View id="view1">
            <ImageView class="fullBgImage"image="images/pubs/v2.png" />
        </View>
        <View id="view2">
            <ImageView id="imageview_1" image="images/pubs/pub_un.jpg" />
        </View>
        <View id="view3">
            <ImageView id="imageview_2" image="images/pubs/pub_deux.jpg" />
        </View>
        <View id="view4">
            <ImageView image="images/pubs/guide.png" />
        </View>
        <View id="view5" >
            <ImageView touchEnabled="false" image="images/pubs/start.png" />
        </View>
    </ScrollableView>
</Window>

My issue is that i cannot get the back button text and arrow to white color, and i get padding on both side of ScrollableView.

How can i get rid of those paddings? and color back button ?

ABOVE QUESTIONS ARE RESOLVED BELOW

I just have another question, is it possible to make fullscreen the imageview, i mean putting the back button under the view, please see screenshot below :

Thank you for helps.

Please do not edit your answered questions to ask something else. Instead, ask a new question in those cases. — josliber

Prashant Saini Prashant Saini · Accepted Answer · 2017-03-01T07:54:58

For back button title color,

Use tintColor property on NavigationWindow which contain that window as :

    <NavigationWindow platform="ios" tintColor="white">
        <Window    </Window>
    </NavigationWindow>

For ScrollableView padding, I think it's due to the image aspect ratio that original width of image is the one you are viewing.

You can check it by giving some backgroundColor to the views (id="view1" or view2 or view3...) containing your images.

So, to fill entire width of screen with image, you can try 2 options:

Use a different aspect ratio for image (might not be work on all devices).
Give images width='100%' and height='100%' instead of Ti.UI.FILL or Ti.UI.SIZE

Here's how you can do it.

<View id="view1">
    <ImageView class="fullBgImage" width='100%' height='100%' image="images/pubs/v2.png" />
</View>

or

<View id="view1">
    <ImageView id='images' image="images/pubs/v2.png" />
</View>

$.images.height = Titanium.Platform.displayCaps.platformHeight;
$.images.width = Titanium.Platform.displayCaps.platformWidth;

Simply put, do not leave width or height auto-set. Set them yourself.

For back button behind imageview, you can do it this way:

.xml

<Window class="full-window">
   <View class='header'>
       <Button left="15" title="<  Back" color="white"></Button>
   </View>

   <View zIndex="1">
       <ScrollableView id="scrollableView" showPagingControl="true" overlayEnabled="true" pagingControlColor="transparent" backgroundColor="black">
           ....
        </ScrollableView>
   </View>
</Window>

.tss

".full-window": {
    fullscreen: true, // set to false if you want to show battery-signal status bar
    navBarHidden: true  // must be true to show manual view
}

".header": {
    top : 0,
    height: '64dp',
    backgroundColor: "#3000",
    zIndex : 2    // necessary to put your content view behind it
}

Appcelerator titanium navigationWindow

2 Answers