CODEWITHSUNDEEP
titaniumappceleratortitanium-mobileappcelerator-titanium
user3137766
user3137766

Reputation:

Appcelerator titanium navigationWindow

Hello titanium mobiles developpers,

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

Appcelerator navigation window image

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 :

How to make image under back button

Thank you for helps.

Upvotes: 0

Views: 424

Answers (2)

Prashant Saini
Prashant Saini

Reputation: 3539

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:

  1. Use a different aspect ratio for image (might not be work on all devices).

  2. 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
}

Upvotes: 5

A. A. Sebastian
A. A. Sebastian

Reputation: 538

To make it fullscreen you just need to set two Boolean properties navBarHidden and fullscreen to true have look on the below code :

<Window navBarHidden = "true" fullscreen="true">
  // Your other Views
</Window>

Good Luck, Cheers

Upvotes: 1

Related Questions