Appcelerator 钛导航窗口

Question

您好钛手机开发者，

我有一些关于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

后退按钮标题颜色，

在包含 window 的 NavigationWindow 上使用 tintColor property 作为 :

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

对于 ScrollableView 的填充，我认为这是由于图像的宽高比导致图像的原始宽度是您正在查看的宽度。

您可以通过为包含您的图像的视图（id="view1" 或 view2 或 view3...）提供一些背景颜色来检查它。

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

对图像使用不同的宽高比（可能不适用于所有设备）。
给图片width='100%' and 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;

简单的说，不留宽不留高auto-set。自己设置。

对于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
}

Answer 2

要使其全屏，您只需将两个布尔属性 navBarHidden 和 fullscreen 设置为 true 看看下面的代码：

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

祝你好运，干杯

Appcelerator 钛导航窗口

Appcelerator titanium navigationWindow

titanium

appcelerator

titanium-mobile

appcelerator-titanium