2017-01-31 24 views
0
SDK Version 6.0.1.GA 

我试图简化我的情况iOS版 - Appcelerator的:垂直布局问题

enter image description here

  • 查看1,鉴于母公司
  • 查看2/3,孩子的意见1

  • 查看3必须是自动高度,所以我用Ti.UI.FILL。并始终在底部0(视图1)。

的问题是图2大小。应该占用未使用的空间的视图3.

我已经尝试了几种解决方案(例如设置垂直视图1的布局,更改视图2-3的顶部,更改视图2的高度Ti.UI.SIZE/Ti.UI.FILL),但视图2的位置不像图像中那样。我认为在不知道视图高度的情况下做我想做的事情是不可能的3.有解决方案吗?

+0

你能否提供一些更多的相关信息,这是什么看法3成立,它是动态的内容,确实在整个使用应用程式,其含量的变化? 如果视图3的内容只加载一次,那么存在使用postlayout事件的解决方案。请提供更多信息 – TheFuquan

回答

0

在一个行:这是不可能做到你想要什么,因为:

  • 观的高度在向下的方向,每当我们在其中添加含量增加。因此,View 2永远不可能是Ti.UI.SIZE高度和View 3.视图应该有一个有限的高度,其他人应该根据该高度有顶部/底部。
  • 顶部/底部属性仅定义旋转视图的位置,但未定义高度更改的方式(第1点)。

我们可以帮助您更多,如果你能为我们提供一个更清晰的概念,提供你到底想创建,因为我从来没有需要创建这种类型的视图布局的一些用户界面屏幕或什么类型的UI,所以可能可以有其他方法来满足您的要求。

0

基本上,你查看2应该有一个top = 0bottom=View3.height,但你的主要问题是,你不必查看3的确切高度,因为它被设置为Ti.UI.SIZE。

为了做到这一点,您必须听取View3的postlayout事件,并通过rect属性获取其确切的高度。

rect属性是只读字典,其中包含属性x,y, 的宽度和高度。它提供了视图的渲染大小和位置,并且只有在它和它的祖先完全绘制完毕后才可用。

下面就为Android和iOS的工作代码:

查看XML:

<Alloy> 
<Window class="container"> 
    <Button onClick="doClick" top="30">load new text</Button> 
    <ScrollView id="scrollView" top="100"> 
     <View height="500" backgroundColor="red"> 
      <Label top="0" text="top label"/> 
      <Label text="middle label"/> 
      <Label bottom="0" text="bottom label"/> 
     </View> 
    </ScrollView> 
    <View id="containerDynamic" onPostlayout="postlayoutB" height="Ti.UI.SIZE" layout="vertical"> 
     <Label id="label_2" text=""/> 
    </View> 
</Window> 

TSS文件

".container": { 
    backgroundColor:"white" 
} 

"Label": { 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE, 
    color: "#000" 
} 

"#label": { 
    font: { 
     fontSize: 12 
    } 
} 

"#containerDynamic": { 
    bottom: 0, 
    backgroundColor: "lightgray" 
} 

"#scrollView": { 
    top: 0, 
    backgroundColor: "green", 
    showScrollbars: true 
} 

JS文件

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
function doClick(e) { 
    var random = getRandomArbitrary(1,lorem.length); 
    var text = lorem.substring(lorem.length-random, random); 
    $.label_2.text = text; 
} 


$.index.open(); 

function postlayoutB(e){ 
    $.scrollView.bottom = e.source.rect.height 
} 

function getRandomArbitrary(min, max) { 
    return Math.random() * (max - min) + min; 
} 

运行这段代码通过复制到一个新的项目(index.js,INDEX.XML,index.tss)

了解它,然后把它应用到你的应用程序相应

我希望我能有一些帮助。