ios - Titanium:水平布局中的 UI.Slider

Question

我在一个水平布局的 View 中有 4 个对象，顺序如下:

1. 标签
2. slider
3. 标签
4. 按钮

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

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

currentTimeLabel、slider、totalTimeLabel、playPauseButton

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

我需要在同一行上显示所有 4 个项目。我已经尝试在父 View 上将 horizo​​ntalWrap 变为 false，但这只是让我看不到剩余的两个项目。

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

如果我使用 SIZE 而不是填充，则 slider 的宽度基本上为 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

在您的情况下，水平布局不是很有帮助，使用绝对布局和设置左、右属性可以获得最佳效果。唯一的问题是您必须确定在 slider 的两侧必须留出多少空间。

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

var transportControls = Ti.UI.createView();

删除了宽度和布局属性

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

删除了宽度属性并设置了左/右属性。

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

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

添加正确的属性。