Titanium：水平布局中的 UI.Slider

Question

我在一个视图中有 4 个对象，按此顺序水平布局：

1. 标签
2. 滑块
3. 标签
4. 按钮

标签和按钮设置为Ti.UI.SIZE，滑块设置为Ti.UI.FILL

我基本上是在制作自己的视频控件，所以

currentTimeLabel, slider, totalTimeLabel, playPauseButton

我的问题是，当我将滑块设置为 FILL 时，它会填充父级（我想应该这样做）并将第二个标签和按钮推到新行。

我需要在同一行上的所有 4 个项目。我尝试在父视图上将horizontalWrap 转换为false，但这只是成功了，所以我看不到其余两项。

我不使用静态宽度的原因是我需要此滑块根据手机处于纵向和横向模式来调整其宽度。

如果我使用SIZE而不是填充，滑块基本上是0宽度。

我的简化代码如下：

var win = Ti.UI.currentWindow;

var transportBg = Ti.UI.createView({
    bottom:0,
    height:50,
    width:'100%',
    backgroundColor:'#50000000'
});
win.add(transportBg);

var transportControls = Ti.UI.createView({
    layout:'horizontal',
    width:'100%'
});
transportBg.add(transportControls);

var currentTimeText = Ti.UI.createLabel({
    left:25,
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    text: '0:00',
    color:'#fff',
    font: {
        fontSize: 10
    },
    shadowColor: '#000',
    shadowOffset: {x:0, y:1}
});

var transport = Titanium.UI.createSlider({
    min:0,
    max:100,
    value:0,
    width:Ti.UI.FILL,
    backgroundColor:'red'
});

var totalTimeText = Ti.UI.createLabel({
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    text: '0:00',
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
    color:'#fff',
    font: {
        fontSize: 10
    },
    shadowColor: '#000',
    shadowOffset: {x:0, y:1}
});

var playPauseBtn = Ti.UI.createButton({
    backgroundImage:'/images/pause.png',
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE
});
transportControls.add(currentTimeText);
transportControls.add(transport);
transportControls.add(totalTimeText);
transportControls.add(playPauseBtn);

以及当前布局的屏幕截图

Answer 1

在您的情况下，水平布局不是很有帮助，可以通过绝对布局和设置左右属性来实现最佳效果。唯一的问题是您必须确定滑块两侧必须留出多少空间。

以下是我对您的代码所做的更改：

var transportControls = Ti.UI.createView();

移除宽度和布局属性

var transport = Titanium.UI.createSlider({
    left: 50,
    right: 70,
    …
});

移除 width 属性并设置 left/right 属性。

var totalTimeText = Ti.UI.createLabel({
    right: 40,
    …
});

var playPauseBtn = Ti.UI.createButton({
    right: 0,
    …
});

添加正确的属性。