Question

我在视图中有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);

当前布局的屏幕截图

enter image description here

Answer 1

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

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

var transportControls = Ti.UI.createView();

删除了宽度和布局属性

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

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

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

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

添加正确的属性。

Titanium：UI.Slider水平布局

1 个答案: