将彩色带置于图像/标签+图像/文本对齐方式之上->JavaScript Titanium移动应用程序

Place Colored Band Over Image/Label + Image/Text Alignment -> JavaScript Titanium Mobile App

本文关键字：图像 方式之 gt 移动 应用程序 Titanium JavaScript 对齐 于图像 色带 彩色      更新时间：2023-09-26

所以我试图在图像上放置一个彩色带，以使文本更容易阅读，如下所示：https://i.stack.imgur.com/QMXLF.jpg

但是，我不知道如何让它出现——现在就是这样：https://i.stack.imgur.com/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);

此外，我在将图像与文本对齐时遇到问题，如下所示：https://i.stack.imgur.com/Jz5M2.jpg.

但是，它是这样出现的，交错的，显示在这里：https://i.stack.imgur.com/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'
});

显然，我省略了一些代码，比如创建窗口、将对象添加到滚动视图等。

我搜索了appcelerator文档，但没有任何内容专门针对这种UI设置。

非常感谢您的帮助：]

对于您的第一个问题：您可以为要显示的每个图像创建一个视图，该视图是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);

为了确保标签和图像正确显示，您创建了一个同时包含这两个标签和图像的父视图。如果要使图像可单击，可以将标签的touchEnabled属性设置为true，并将相同的clickListener设置为两个元素。我的另一个经验是，backgroundImage和动态加载的图像（来自url）可能会在Android上造成问题，所以你应该避免将其与动态图像一起使用。

相关文章：