Question

在Appcelerator Titanium（iOS项目）中，我有TextField height:50。 TextField包含更多文字，但其高度设置为50的事实让我可以使用TextField作为剩余文字的预览：TextField我有一个按钮，当我点按此按钮我想显示整个文字，因此我想将TextField从当前高度设置为Ti.UI.SIZE。这可能吗？怎么样？我注意到了一些iOS属性（例如anchorPoint）但我无法理解它们在我的情况下是否有用。

Answer 1

如果您想要多行和自动换行，则需要使用TextArea而不是TextField。

我已将TextArea添加到View，因此我可以对其进行动画处理以扩展和缩小它。

你可以尝试这样的事情......

// Create the text area for multiple lines and word wrapping.
var messageField = Ti.UI.createTextArea({
    backgroundColor: 'transparent',
    color: 'black',
    height: Ti.UI.SIZE, // Set here the height to SIZE and the view's height to the required one, ex. 50
    textAlign: 'left',
    value: 'This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field, again, This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field.',
    verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
    width: '90%',
    font: { fontSize: 20 }
});

// Add the text area to a view to be able to animate it
var view = Titanium.UI.createView({
    height: 50, // Required height
    top: 250,
    width: '90%',
    borderColor: 'black',
    borderRadius: 10,
    borderWidth: 2,
});
view.add(messageField);

// Create animation object
var animation = Titanium.UI.createAnimation();
animation.duration = 1000; // Set the time of animation, 1000 --> 1 second

var button = Ti.UI.createButton({
    title: "Show More",
    font: { fontSize: 18 },
    width: 100,
    top: 200
});
var isExpanded = false;
button.addEventListener('click', function() { // Event listener for your button
    if(isExpanded) {
        isExpanded = false;
        animation.height = 50; // Set the animation height to 50 to shrink the view
        view.animate(animation); // Start animating the view to the required height
        button.title = "Show More";
    } else {
        isExpanded = true;
        animation.height = Ti.UI.SIZE; // Set the animation height to SIZE to make it expand
        view.animate(animation); // Start animating the view to the required height
        button.title = "Show Less";
    }
});

var win = Ti.UI.createWindow({
    backgroundColor: 'white'
});

win.add(button);
win.add(view);
win.open();

Titanium，使用动画更改TextField高度

1 个答案: