Appcelerator钛导航窗口

Question

您好,钛金属手机开发人员,

我对navigationWindow有一些疑问,因为图片胜过数千个单词:

正如您所看到的,我有一个navigationWindow的蓝色后退按钮,以及带有图像的ScrollableView内容:

<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>

我的问题是我无法将后退按钮文本和箭头变为白色,并且我在ScrollableView的两侧都有填充.

我该怎样摆脱那些填充物？和颜色后退按钮？

以上解决了上述问题

我只是有另一个问题,是否可以全屏显示图像视图,我的意思是将后退按钮放在视图下方,请看下面的截图:

谢谢你的帮助.

Answer 1

对于后退按钮标题颜色,

使用tintColor属性上NavigationWindow其中包含窗口:

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

对于ScrollableView填充,我认为这是由于图像宽高比,图像的原始宽度是您正在查看的那个.

你可以通过给包含你的图像的视图(id ="view1"或view2或view3 ...)提供一些backgroundColor来检查它.

因此,要使用图像填充整个屏幕宽度,您可以尝试2个选项:

1. 为图像使用不同的宽高比(可能不适用于所有设备).

2. 给图像width ='100%'和height ='100%'而不是Ti.UI.FILL或Ti.UI.SIZE

这是你如何做到的.

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

要么

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

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

简单地说,不要让宽度或高度自动设置.自己设定.

对于imageview后面的后退按钮,您可以这样做:

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