Titanium Android 需要在键盘可见时滚动页面
Titanium Android need to scroll the page when keyboard is visible
当我单击文本字段时,会出现一个键盘。但是,这会将 window 的所有内容向上滑动。你能让键盘在 window 上移动而不滚动内容吗?
背景
我强烈推荐阅读关于 Handling Input Method Visibility 的官方 Android 文档,其中提到:
When the input method appears on the screen, it reduces the amount of
space available for your app's UI. The system makes a decision as to
how it should adjust the visible portion of your UI, but it might not
get it right. To ensure the best behavior for your app, you should
specify how you'd like the system to display your UI in the remaining
space.
换句话说,当键盘出现时,它会根据多种因素改变您的视图外观。
其中一个因素是 windowSoftInputMode
,如下所述:
- http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Window
- https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
这些是 windowSoftInputMode
...
的选项
以下选项仅影响当 window 处于焦点而非视图中的项目时是否弹出键盘:
- SOFT_INPUT_STATE_ALWAYS_HIDDEN:当当前重量级window获得焦点时,始终隐藏软输入区(即软键盘)
- SOFT_INPUT_STATE_ALWAYS_VISIBLE: 当前重量级window获得焦点时始终显示软输入区(即软键盘)
- SOFT_INPUT_STATE_HIDDEN:尝试在当前重量级window获得焦点时隐藏软输入区(即软键盘)。基本上,当存在输入时 windows 打开时,这会阻止键盘自动弹出。
- SOFT_INPUT_STATE_VISIBLE:尝试在当前重量级window获得焦点时显示软输入区(即软键盘)。
- SOFT_INPUT_STATE_UNSPECIFIED:使用系统默认行为来决定当前重量级时是否显示软输入区(即软键盘)window获得焦点。
以下选项是您最感兴趣的选项,因为它们与视图在键盘打开时应如何反应有关:
- SOFT_INPUT_ADJUST_PAN:在显示输入法(即软键盘)时平移当前权重window,确保其内容不被遮挡.
- SOFT_INPUT_ADJUST_RESIZE:在显示输入法(即软键盘)时调整当前权重window,确保其内容不被遮挡.
- SOFT_INPUT_ADJUST_UNSPECIFIED:使用系统默认行为来确定当前重量级如何容纳软输入区域(即软键盘)window当它接收到焦点时(默认)。取决于 AndroidManifest.xml 设置(如果已定义)或系统默认设置,否则确定如何在可见时容纳软键盘。
请注意,您可以像这样组合选项:
win.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_VISIBLE | Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
原因项目正在转移
您的所有项目都被移动的原因是因为 window 正在使用:SOFT_INPUT_ADJUST_RESIZE
并且某些内容正在使用百分比垂直定位。例如:
<View height="100%">
<Label top="10">Top label</Label>
<Label>Centre label</Label>
<Label bottom="10">Bottom label</Label>
</View>
这意味着当键盘上升时,视图的整体高度会降低,从而将所有项目向上移动。
解决方案
此问题有 2 个主要解决方案。
解决方案 1
使 window 使用 SOFT_INPUT_ADJUST_PAN
。这不会降低应用程序的整体高度,而是平移到屏幕的相关部分。因此,这应该会阻止所有项目向上移动。
解决方案 2
确保项目的位置不依赖于设备高度(可以改变)。
例如
<View height="500px">
...
</View>
或
<View height="Titanium.UI.SIZE">
....
</View>
这样,当键盘上升时,视图的高度不会降低,键盘只会越过内容而不是向上移动项目。但是,如果设备高度小于 500 像素,您现在可能会冒某些东西从屏幕上裁剪掉的风险。此外,当键盘打开时,您的 space 会更少,这意味着可以裁掉更多内容。
解决这个问题的方法是使用 scrollable view。例如:
<ScrollableView height="500px">
...
</ScrollableView>
或
<ScrollableView height="Titanium.UI.SIZE">
...
</ScrollableView>
现在,如果设备屏幕太小,用户仍然可以滚动查看屏幕的其他部分。用户甚至可以在键盘弹起时滚动。
当我单击文本字段时,会出现一个键盘。但是,这会将 window 的所有内容向上滑动。你能让键盘在 window 上移动而不滚动内容吗?
背景
我强烈推荐阅读关于 Handling Input Method Visibility 的官方 Android 文档,其中提到:
When the input method appears on the screen, it reduces the amount of space available for your app's UI. The system makes a decision as to how it should adjust the visible portion of your UI, but it might not get it right. To ensure the best behavior for your app, you should specify how you'd like the system to display your UI in the remaining space.
换句话说,当键盘出现时,它会根据多种因素改变您的视图外观。
其中一个因素是 windowSoftInputMode
,如下所述:
- http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Window
- https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
这些是 windowSoftInputMode
...
以下选项仅影响当 window 处于焦点而非视图中的项目时是否弹出键盘:
- SOFT_INPUT_STATE_ALWAYS_HIDDEN:当当前重量级window获得焦点时,始终隐藏软输入区(即软键盘)
- SOFT_INPUT_STATE_ALWAYS_VISIBLE: 当前重量级window获得焦点时始终显示软输入区(即软键盘)
- SOFT_INPUT_STATE_HIDDEN:尝试在当前重量级window获得焦点时隐藏软输入区(即软键盘)。基本上,当存在输入时 windows 打开时,这会阻止键盘自动弹出。
- SOFT_INPUT_STATE_VISIBLE:尝试在当前重量级window获得焦点时显示软输入区(即软键盘)。
- SOFT_INPUT_STATE_UNSPECIFIED:使用系统默认行为来决定当前重量级时是否显示软输入区(即软键盘)window获得焦点。
以下选项是您最感兴趣的选项,因为它们与视图在键盘打开时应如何反应有关:
- SOFT_INPUT_ADJUST_PAN:在显示输入法(即软键盘)时平移当前权重window,确保其内容不被遮挡.
- SOFT_INPUT_ADJUST_RESIZE:在显示输入法(即软键盘)时调整当前权重window,确保其内容不被遮挡.
- SOFT_INPUT_ADJUST_UNSPECIFIED:使用系统默认行为来确定当前重量级如何容纳软输入区域(即软键盘)window当它接收到焦点时(默认)。取决于 AndroidManifest.xml 设置(如果已定义)或系统默认设置,否则确定如何在可见时容纳软键盘。
请注意,您可以像这样组合选项:
win.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_VISIBLE | Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
原因项目正在转移
您的所有项目都被移动的原因是因为 window 正在使用:SOFT_INPUT_ADJUST_RESIZE
并且某些内容正在使用百分比垂直定位。例如:
<View height="100%">
<Label top="10">Top label</Label>
<Label>Centre label</Label>
<Label bottom="10">Bottom label</Label>
</View>
这意味着当键盘上升时,视图的整体高度会降低,从而将所有项目向上移动。
解决方案
此问题有 2 个主要解决方案。
解决方案 1
使 window 使用 SOFT_INPUT_ADJUST_PAN
。这不会降低应用程序的整体高度,而是平移到屏幕的相关部分。因此,这应该会阻止所有项目向上移动。
解决方案 2 确保项目的位置不依赖于设备高度(可以改变)。
例如
<View height="500px">
...
</View>
或
<View height="Titanium.UI.SIZE">
....
</View>
这样,当键盘上升时,视图的高度不会降低,键盘只会越过内容而不是向上移动项目。但是,如果设备高度小于 500 像素,您现在可能会冒某些东西从屏幕上裁剪掉的风险。此外,当键盘打开时,您的 space 会更少,这意味着可以裁掉更多内容。
解决这个问题的方法是使用 scrollable view。例如:
<ScrollableView height="500px">
...
</ScrollableView>
或
<ScrollableView height="Titanium.UI.SIZE">
...
</ScrollableView>
现在,如果设备屏幕太小,用户仍然可以滚动查看屏幕的其他部分。用户甚至可以在键盘弹起时滚动。