【问题标题】:Automatically View size is increasing in appcelarator titaniumAppcelerator 钛中的自动视图尺寸正在增加
【发布时间】:2017-09-08 17:49:00
【问题描述】:

我正在构建一个应用程序,我在其中使用scrollView 和'scrollableview'。滚动图像时,视图大小会自动增加。

如果我在px 中给出高度,那么它可以正常工作,但是当我在% 中给出高度时,此代码无法正常工作。但是,我只需要% 的高度。

这是我的代码:

 
var imageCollection = [
"/images/offers/oneplusOffer.jpg",
 "images/offers/electronicsOffer.jpg",
  "images/offers/shoesOffer.jpg", 
  "images/offers/watchOffer.jpg"
  ];
  
  var viewCollection = [];
  
 // Vertical ScrollBar
var scrollView = Ti.UI.createScrollView({
    top:0,
    left:0,
    backgroundColor:'#f1f1f1',
   
    layout:'vertical'
});
 
 // offerBanner view
var bannerView=Ti.UI.createView({
	height:"10%",
	backgroundColor:"pink",

});

 for (var i = 0; i < imageCollection.length; i++) {
	var view = Ti.UI.createView({
		backgroundColor: 'yellow'
	});

	
	var img = Ti.UI.createImageView({
			
			image : imageCollection[i]
		});
		view.add(img);
	
	viewCollection.push(view);
}

var scrollableView = Ti.UI.createScrollableView({
    top:0,
   views:viewCollection,
    showPagingControl:false,
});

bannerView.add(scrollableView);
scrollView.add(bannerView);



//creating view

for(var i=0;i<7;i++){
var view=Ti.UI.createView({
	
	top:"2%",
	backgroundColor:"blue",
	//height:"120",
	height:"15%",
});

//adding view to scrollview
scrollView.add(view);

}



$.homeScreenWindow.add(scrollView);
$.homeScreenWindow.open();

【问题讨论】:

  • 你能用你想要实现的布局显示图像吗?两个版本对我来说看起来几乎一样(只是 15% 比我手机上的 120 像素大)。您使用的是哪个操作系统和哪个 SDK?
  • @Ashish,您需要花更多的时间来学习布局内容如何与不同视图类型中的百分比一起工作。由于 ScrollView 是对子视图没有明确高度的视图,因此不推荐在 ScrollView 中对子视图使用 %age。因此,您应该在创建这些视图之前计算 dp 中的 15% 高度,它将适用于所有设备。
  • @Ashish,既然你给视图的高度是 15%,那么你必须知道 15% 是什么?因此,您知道 15% 的内容,您可以简单地将其转换为 dp 或像素。

标签: titanium appcelerator


【解决方案1】:

试试下面的代码,

var scrollView = Ti.UI.createScrollView({
    top:0,
    left:0,
    backgroundColor:'#f1f1f1',
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE,
    layout:'vertical'
});

您也可以在% 中提供上述height。试试这个。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-27
    • 1970-01-01
    • 2019-12-04
    • 1970-01-01
    相关资源
    最近更新 更多