Titanium，用动画改变 TextField 的高度

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();