UI 未在 Android 模拟器上完全填充

Question

所以，我正在开发这个小天气应用程序作为我 class 的一项任务。我们现在正在使用 Titanium 来完成我们的工作。问题是该应用程序无法正确加载到 android 模拟器中。它只会显示附加到 window.

的第一个视图

这是我的代码：

// the exported function that build the UI
exports.build = function(weather) {

// setting variables based on the actual device height and width
var deviceHeight = Ti.Platform.displayCaps.platformHeight;
var deviceWidth = Ti.Platform.displayCaps.platformWidth;

// the main window for the UI
var mainWindow = Ti.UI.createWindow({
    backgroundColor: "#fff",
    layout: "horizontal"
});

// the title view
var appTitleView = Ti.UI.createView({
    top: 0,
    height: 60,
    backgroundColor: "#f5f5f5"      
});

// the actual title for the app
var appTitle = Ti.UI.createLabel({
    text: "Lightning Weather",
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "24", fontWeight: "Bold"},
    width: deviceWidth,
    height: 40,
    top: 20
});

// the label for the refresh link
var reloadPageLink = Ti.UI.createLabel({
    text: "Please tap to get most current weather data",
    color: "orange",
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "18", fontWeight: "Bold"},
    height: 60,
    bottom: 0,
    width: deviceWidth
});

// the scrollview for the actual content
// I went with this just incase there was a device that wouldn't be able to house everything on one screen
// this way the app is still able to be viewed in it's entirety
var windowScrollView = Ti.UI.createScrollView({
    height: deviceHeight - appTitleView.height - reloadPageLink.height, // setting the height based on the two static aspects
    layout: "horizontal",
    width: deviceWidth,
    contentWidth: deviceWidth,
    showVerticalScrollIndicator: true,
    top: 0
});

// the container for the current conditions
var currentConditionsBox = Ti.UI.createView({
    width: deviceWidth,
    layout: "horizontal",
    top: 30,
    height: Ti.UI.SIZE // setting the height of the container to the actual content inside of it
});

// the container that allows me to center the icon for the current conditions
var currentConditionsIconContainer = Ti.UI.createView({
    width: deviceWidth,
    height: Ti.UI.SIZE
});

// the current conditions icon
var currentConditionsIcon = Ti.UI.createImageView({
    image: weather.currentIcon,
    align: "center"
});

// the current temp
var currentTemp = Ti.UI.createLabel({
    width: deviceWidth,
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "36", fontWeight: "Bold"},
    text: weather.temperature + "\u00b0 F"
});

// the current location
var currentLocation = Ti.UI.createLabel({
    width: deviceWidth,
    textAlign: "center",
    text: weather.location,
    font: {fontFamily: "Verdana", fontSize: "24"}
});

// the label that titles the forecast
var forecastText = Ti.UI.createLabel({
    text: "Forecast:",
    textAlign: "center",
    width: deviceWidth,
    top: 100,
    font: {fontFamily: "Verdana", fontSize: "24", fontWeight: "Bold"}
});

// the parent container for the forecast UI
var forecastBox = Ti.UI.createView({
    top: 10,
    width: deviceWidth,
    layout: "horizontal",
    height: Ti.UI.SIZE
});

// the next for containers are child containers to the forecastBox, this enables easy setup for a clean look
var dayZeroBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayOneBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayTwoBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayThreeBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

// here are the contents for all of the child forecast containers
var dayZeroName = Ti.UI.createLabel({
    text: "Today",
    top: 10,
    textAlign: "center"
});

var dayZeroIcon = Ti.UI.createImageView({
    image: weather.day0Icon,
    top: 30,
    align: "center"
});

var dayZeroHiLo = Ti.UI.createLabel({
    text: weather.high + "\u00b0 F / " + weather.low + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayOneName = Ti.UI.createLabel({
    text: weather.day1,
    top: 10,
    textAlign: "center"
});

var dayOneIcon = Ti.UI.createImageView({
    image: weather.day1Icon,
    top: 30,
    align: "center"
});

var dayOneHiLo = Ti.UI.createLabel({
    text: weather.day1Hi + "\u00b0 F / " + weather.day1Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayTwoName = Ti.UI.createLabel({
    text: weather.day2,
    top: 10,
    textAlign: "center"
});

var dayTwoIcon = Ti.UI.createImageView({
    image: weather.day2Icon,
    top: 30,
    align: "center"
});

var dayTwoHiLo = Ti.UI.createLabel({
    text: weather.day2Hi + "\u00b0 F / " + weather.day2Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayThreeName = Ti.UI.createLabel({
    text: weather.day3,
    top: 10,
    textAlign: "center"
});

var dayThreeIcon = Ti.UI.createImageView({
    image: weather.day3Icon,
    top: 30,
    align: "center"
});

var dayThreeHiLo = Ti.UI.createLabel({
    text: weather.day3Hi + "\u00b0 F / " + weather.day3Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});
// end child container contents

// the function that will refresh the page and pull a new location and weather information
var reloadPage = function() {
    if (Ti.Network.online) {
        var loc = require("loc");
        loc.getLocation();
    } else {
        alert("You are not online.");
    };
};

// populating the UI
reloadPageLink.addEventListener("click", reloadPage);
appTitleView.add(appTitle);
currentConditionsIconContainer.add(currentConditionsIcon);
currentConditionsBox.add(currentConditionsIconContainer, currentTemp, currentLocation);
dayZeroBox.add(dayZeroName, dayZeroIcon, dayZeroHiLo);
dayOneBox.add(dayOneName, dayOneIcon, dayOneHiLo);
dayTwoBox.add(dayTwoName, dayTwoIcon, dayTwoHiLo);
dayThreeBox.add(dayThreeName, dayThreeIcon, dayThreeHiLo);
forecastBox.add(dayZeroBox, dayOneBox, dayTwoBox, dayThreeBox);
windowScrollView.add(currentConditionsBox, forecastText, forecastBox);
mainWindow.add(appTitleView, windowScrollView, reloadPageLink);
mainWindow.open();
};

这是它在模拟器上的样子：

我做错了什么导致整个 UI 无法填充？

谢谢！

Answer 1

您的主要 window 布局是 horizontal。

尝试将其更改为 'vertical'。

我注意到的第二件事是您试图同时向父视图添加多个视图。根据 spec you have to add one view at a time.

所以将您的代码更改为如下内容：

mainWindow.add(appTitleView);
mainWindow.add(windowScrollView);
mainWindow.add(reloadPageLink);

UI 未在 Android 模拟器上完全填充

UI not completely populating on Android Emulator

javascript

android

titanium