javascript - 将彩色带放在图像/标签上 + 图像/文本对齐 -> JavaScript Titanium 移动应用程序

Question

因此，我尝试在图像上放置彩色带以使文本更易于阅读，如下所示:/image/QMXLF.jpg

但是，我不知道如何让它出现 - 这就是现在的样子:/image/mOmMP.jpg 。这是我的代码:

var mainTable = Ti.UI.createTableView({data:[], backgroundColor:'transparent'});
var data = [];

var rowNews = Ti.UI.createTableViewRow({
height:120,
backgroundImage: 'images/News.png',
title:'News',
font:{
    fontFamily: "Helvetica",
    fontWeight: "bold",
    fontSize: 18,
},
color: '#1d1d1d',
backgroundColor:'#b6e2e2',
});
data.push(rowNews);

var rowCup = Ti.UI.createTableViewRow({
height:120,
backgroundImage: 'images/1MC.png',
title: 'One Million Cups',
font:{
    fontFamily: "Helvetica",
    fontWeight: "bold",
    fontSize: 18,
},
color: '#1d1d1d',
backgroundColor:'#b6e2e2',
});
data.push(rowCup);


var rowEvents = Ti.UI.createTableViewRow({
height:120,
backgroundImage: 'images/MoreEvents.png',
title:'More Events',
font:{
    fontFamily: "Helvetica",
    fontWeight: "bold",
    fontSize: 18,
},
color: '#1d1d1d',
backgroundColor:'#b6e2e2',
});
data.push(rowEvents);

此外，我在将图像与文本对齐时遇到问题，如下所示:/image/Jz5M2.jpg .

但是，它像这样交错显示，如下所示:/image/gJ1dw.jpg .

这是我针对此问题的代码:

// create scroll view here
var sv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
layout: 'vertical'
}); 

svWin.add(sv);

var lab1 = Ti.UI.createLabel({
width: 'fill',
top: 0,
height:120,
backgroundImage: 'images/News.png'
});

var News2 = Ti.UI.createLabel({
width: 'fill',
top: 10,
left: 100,
height:65,
font: {
    fontSize: 14,
    fontFamily: "Helvetica",
    fontWeight: "bold"
},
color: '#0a3f56',
text:'New Business Announced'
});

var img1 = Ti.UI.createLabel({
top: 10,
left: 30,
width: 50,
height: 50,
backgroundImage: 'images/MoreEvents.png'
});

显然，我省略了一些代码，例如窗口的创建、向 ScrollView 添加对象等。

我搜索了 appcelerator 文档，但没有专门解决此类 UI 设置的内容。

非常感谢您的帮助:]

Answer 1

对于您的第一个问题:您可以为要显示的每个图像创建一个 View ，该 View 是 imageView 和 Label 的父级。结构如下所示:

var view = Ti.UI.createView({
    //the position of the view
    //the height/width of the view
});

var imageView = Ti.UI.createView({
    height: //fill parent
    width: //fill parent
    top: 0,
    image: //your image
});

var Label = Ti.UI.createView({
    bottom: 0,
    height: "20",
    width: //Fill parent
    text: //your Text
    textAlign: //AlignLeft
    //You may need to define the font and the fontSIze
});

view.add(imageView);
view.add(label);
$.yourWIndow.add(view);

为了确保标签和图像正确显示，您需要创建一个包含它们的父 View 。如果您想让图像可点击，您可以将标签的 touchEnabled 属性设置为 true，并为两个元素设置相同的 clickListener。我的另一个经验是，backgroundImage 和动态加载的图像(来自 url)可能会在 Android 上引起问题，因此您应该避免将其与动态图像一起使用。