首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

鸿蒙NEXT版仿微信聊天App的避让软键盘

上一节我们实现了仿微信的昵称修改弹窗,那么在微信的聊天页面,看起来是对方和自己一左一右的对话交互。...下面详细介绍如何在聊天界面有效避让输入法的软键盘。 一、软键盘为什么需要避让 点击App界面的编辑框,界面底部会自动弹出输入法的软键盘,这个软键盘占据了整个屏幕的三分之一空间。...比如下面的聊天界面,正常在页面顶部显示聊天标题栏,在页面底部显示聊天交互控件(包括编辑框、按钮等等)。 此时点击页面底部的编辑框,输入法的软键盘会从屏幕下方弹出,然后把整个聊天界面顶了起来。...于是打开App工程的Ability代码,转到onWindowStageCreate方法内部,在加载成功后增加下面一行代码: windowStage.getMainWindowSync().getUIContext...综合以上的软键盘避让规则代码,实现的在拉起软键盘时候的仿微信聊天页面如下,可见此时不但标题栏留在原地,发送按钮也没被遮挡了: 下一篇文章会介绍如何实现微信聊天窗口的组件内外对齐方式。

26810

Android 软键盘的那些事

】adjustPan:当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分(软键盘会遮挡屏幕) android:windowSoftInputMode 活动的主窗口如何与包含屏幕上的软键盘窗..."stateAlwaysHidden" 当该Activity主窗口获取焦点时,软键盘总是被隐藏的,不管是确认导航到该Activity还是Activity被覆盖后显示出来。..."stateVisible" 当用户导航到Activity主窗口时,软键盘是可见的。不过当用户离开一个Activity而导致另一个被覆盖的Activity显示出来时,软键盘会使用默认的设置。..."stateAlwaysVisible" 当该Activity主窗口获取焦点时,软键盘总是显示的,不管是确认导航到该Activity还是Activity被覆盖后显示出来。...相反,当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分。这个通常是不期望比调整大小,因为用户可能关闭软键盘以便获得与被覆盖内容的交互操作。

2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android富文本开发

    压缩后的图片大小应该和用来展示它的控件大小相近,在一个很小的ImageView上显示一张超大的图片不会带来任何视觉上的好处,但却会占用相当多宝贵的内存,而且在性能上还可能会带来负面影响。...14.点击图片可以查看大图 编辑状态时,由于图片有空能比较大,在显示在富文本的时候,会裁剪局中显示,也就是图片会显示不全。...; 软键盘遮挡界面的问题 当界面中有输入框,需要弹起软键盘输入信息的时候,软键盘可能遮挡部分布局,更有甚者,当前输入框如果在屏幕下方,软键盘也会直接遮挡输入框,这种情况对用户体验是相当不友好的,所以要根据具体的情况作出相应的处理...stateAlwaysHidden-总是隐藏状态:当设置该状态时,软键盘总是被隐藏,和stateHidden不同的是,当我们跳转到下个界面,如果下个页面的软键盘是显示的,而我们再次回来的时候,软键盘就会隐藏起来...,会将布局顶起(保证输入框不被遮挡),不压缩,而且可以软键盘不消失的情况下,手动滑出被遮挡的布局; adjustPan-默认模式:软键盘弹出,软键盘会遮挡屏幕下半部分布局,当输入框在屏幕下方布局,软键盘弹起

    8.5K20

    Android 软键盘遮挡解决

    前言:在开发过程中难免会遇到在软键盘遮挡输入框的问题,今天来整理一下。...软键盘弹出 ? 解决问题后 解决思路: ? 思路 我们要做的就是在软键盘弹出后显示的位置为空白区域,不超过内容区域,也就是登录按钮一下。...有小伙伴提问了,除非空白区域和软键盘一样大小,如果软键盘区域大于空白区域那岂不是还有覆盖吗?对的。  那有什么解决方式吗? 答:内容区域向上移动即可。   如何知道内容区域向上移动多少呢?...首先我们是有办法获取内容区域的大小也就是高的(代码中体现),然后屏幕的高减去内容区域的高就是软键盘的高度,知道了软键盘的高度(软键盘的高度无法改变,那么只好调整内容区域距离顶部的margintop值了,...主要代码: 第一步: 获取屏幕分辨率: int  screenHeight=activity.getResources().getDisplayMetrics().heightPixels; 第二步:

    3.9K40

    手机软键盘弹起导致页面变形的一种解决方案

    最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了,布局全被打乱...原来的样子: image.png 软键盘弹出来后: ? 在开发APP时,通常情况下页面的宽度和高度都会设为 100%,即页面高度等于屏幕高度,页面宽度等于屏幕宽度。...当 input 获取焦点时,软键盘弹出,页面高度被挤压,此时页面高度 = 屏幕高度 - 软键盘高度。所以,页面高度缩小,元素都挤压在一起,布局被打乱。...举例: 我开发的 APP 运行在 ipad上,横屏显示时,高度为 768px ,我可以把 768px 当做页面的最小高度。...如上图所示,此时原来页面的上半部分“消失”,就是被顶上去了,只显示原来页面的下半部分。但至少我们要的页面布局不变形已经实现了。等输入完,软键盘收起时,页面恢复原状。

    2.6K40

    移动端那些戳中你痛点的软键盘问题及解决方法

    大厂技术 坚持周更 精选好文 问题 问题描述: 在ios手机中,当页面中包含有输入框时,点击输入框,键盘弹起,会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...这个参考了朱雷大佬提供的这个文章:WebView上软键盘的兼容方案[1] IOS 软键盘弹起表现 在 IOS 上,输入框(input、textarea 或 富文本)获取焦点,键盘弹起,页面(webview...但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。 ? ? 2、为什么fixed会失效 既然ios键盘弹起时,页面会上移,那么为什么fixed会失效呢。...同样参考这篇文章:WebView上软键盘的兼容方案[3] 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现,我们可以分开进行如下处理来监听软键盘的弹起和收起: Ios 在 IOS 上,...在 Android 上,监听 webview 高度会变化,高度变小获知软键盘弹起,否则软键盘收起。 // IOS 键盘弹起:当输入框被聚焦时IOS键盘会被弹起 inputRef?.

    8.9K30

    Android开发常用的知识点

    landscape–横屏显示(宽比高要长) portrait–竖屏显示(高比宽要长) user–用户当前首选的方向 behind–和该Activity下面的那个Activity的方向一致(在Activity...把焦点放到登录按钮上 android:imeOptions="actionDone" android:nextFocusForward="@+id/login_button" 但是这样并没有点击登录 要想密码输入后也触发提交...stateAlwaysHidden 当该Activity主窗口获取焦点时,软键盘总是被隐藏的,不管是确认导航到该Activity还是Activity被覆盖后显示出来。...stateVisible 当用户导航到Activity主窗口时,软键盘是可见的。不过当用户离开一个Activity而导致另一个被覆盖的Activity显示出来时,软键盘会使用默认的设置。...stateAlwaysVisible 当该Activity主窗口获取焦点时,软键盘总是显示的,不管是确认导航到该Activity还是Activity被覆盖后显示出来。

    2.6K10

    【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

    , 即可运行刚创建的应用, 运行按钮 如下图的 红框中; 2.设置虚拟机大小 : Xcode 默认的 iPhone 虚拟机非常大, 屏幕中显示不全, 在 虚拟机的菜单 -> Window -> scale..., 该控件用于接收用户输入的数字, 然后进行加法计算; 2.拖入 Label 控件 并设置文本 : Label 标签 是文本显示标签, 只能单纯的显示文本, 不能进行操作; 如果在 storyboard...界面修改文本标签, 该标签会自动缩放到刚好包裹文本的大小; 依次拖入两个 Label, 然后双击控件, 将 Label 重命名为 + 和 = ; 3.拖入 Label 控件 并设置 属性 : 上面通过双击直接在界面修改控件文本控件会缩小...; 2.拷贝图片素材 : 图片素材都是在 工程中的 Assets.xcassets 中存放的, 开发时 直接将素材拖到 Assets.xcassets 界面的 左侧位置, 如下图 红框位置;..., 然后图片就会显示在布局中; 3.设置按钮的文字 : Button 中的 tittle 属性设置按钮的文字, 下面的 Font 设置字体和大小, Text Color 设置文字颜色;

    5K30

    小程序textarea与弹窗

    本文作者:IMWeb howenhuo 原文出处:IMWeb社区 未经同意,禁止转载 前言 在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面...后插入的原生组件可以覆盖之前的原生组件。 原生组件还无法在 picker-view 中使用。...在工具上,原生组件是用web组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。 那么要在 textarea 上正常的覆盖一个弹窗,该如何做呢?...所以如果弹窗中要显示 input、radio、checkbox 等组件的话,该方案无法实现,但对于只是展示文本、按钮和图片的话,还是可以满足的。...虽然view 和 textarea 切换后仍然是不同字体(Android),但切换时由于会拉起软键盘,几乎忽略了闪动的视觉影响。

    2K10

    Android笔记:软键盘弹出遮盖原来界面的布局控件

    android:screenOrientation="portrait" android:label="@string/app_name" > 这样会让屏幕整体上移...如果加上的是 android:windowSoftInputMode="adjustPan"这样键盘就会覆盖屏幕。...:当这个activity出现时,软键盘将一直保持在上一个activity里的状态,无论是隐藏还是显示   【C】stateHidden:用户选择activity时,软键盘总是被隐藏   【D】stateAlwaysHidden...:当该Activity主窗口获取焦点时,软键盘也总是被隐藏的   【E】stateVisible:软键盘通常是可见的   【F】stateAlwaysVisible:用户选择activity时,软键盘总是显示的状态...:当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分

    1.1K20

    Android自定义View--数字软键盘

    来到新公司,接到一个需求,要求在PAD屏幕上显示一个数字键盘,作为密码录入。想着练练手,就用自定义View绘制了一个,分享给大家。 效果图: ? 1.jpg ? 2.jpg ?...那么原文的软键盘和笔者的软键盘有什么不同呢? 原文的键盘绘制是一个一个按钮绘制的,非常不程序员。 由于原文的绘制方法,导致原文的软键盘非常难拓展。...例如改变边距、修改键盘内容等等,需要改动大量代码 原文的软键盘是固定在屏幕底部的,点击事件也是依赖这个来写的,和我的项目需求有冲突(需求需要显示在屏幕中间,用POP的方式) 主要的实现思路原文已经做了比较细腻的描述...在绘制前,我们会先进行数据组装。...我们通过Touch事件获取触摸时的手指相对于我们自定义View的坐标,只要我们手指的坐标在左上角和右下角坐标的区间内,即我们可以确认,点击了对应按钮。

    2.4K00

    微信小程序开发实战(9):单行输入和多行输入组件

    String类型,输入框为空时显示的文本 placeholder-style:String类型,指定 placeholder 的样式 placeholder-class:String类型,指定 placeholder...图1 input显示效果 在布局代码中,通过bindinput事件校验用的输入,如果输入close,则关闭键盘(需要在真机上测试,模拟器不支持软键盘)。...是,会自动转换为和> bindReplaceInput:function(e){ var value = e.detail.value; var pos = e.detail.cursor...value:String类型,输入框的内容 placeholder:String类型,输入框为空时显示的文本 placeholder-style:String类型,指定 placeholder 的样式...:EventHandle类型,输入框失去焦点时触发 bindlinechange:EventHandle 类型,输入框行数变化时调用 下面的布局代码演示了textarea组件的基本用法,由于第一个textarea

    3K20

    移动Web学习笔记

    , iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮,当网站设置了rel=”apple-touch-icon属性,当网站添加到屏幕上,屏幕上会显示网站的图标点击此处查看详细解释 6...., 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。...在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式... 解释:添加到主屏幕上后全屏显示 16.... *解释:使用制作搜索框,当在手机上点击搜索框时会弹出一个软键盘,软键盘上的enter按钮会以搜索按钮的形式显示 27

    1K30

    【H5】209-可能这些是你想要的H5软键盘兼容方案

    然而,H5 并没有直接监听软键盘的原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。并且,在 IOS 和 Android 上的表现不尽相同。...但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。 ? ?...听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现,我们可以分开进行如下处理来监听软键盘的弹起和收起: 在 IOS 上,监听输入框的 focus 事件来获知软键盘弹起...在 Android 上,监听 webview 高度会变化,高度变小获知软键盘弹起,否则软键盘收起。...在 UC 浏览器上,软键盘弹起后,浏览器上面的标题栏高度就有个高度变小延时动态效果,这样导致 webview 往下滚了一点,底部输入框滚到了非可视区。

    4K12

    Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题

    当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看,整个界面都被压扁了,输入框也不知道去哪儿了。...stateUnspecified 未指定软键盘的状态,系统将自动选择一个合适的状态或依赖于主题中的设置。 stateUnchanged 当前界面的软键盘状态取决于上一个界面的软键盘状态。...stateHidden 用户选择 Activity 时,软键盘总是被隐藏。 stateAlwaysHidden 当该 Activity 主窗口有输入需求时,软键盘总是被隐藏。...adjustUnspecified 未指定软键盘与界面内容之间的显示关系。 adjustResize 该 Activity 总是调整屏幕的大小以便留出软键盘的空间。...adjustPan 当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户总能看到输入的内容。

    96420

    Android解析WindowManager(二)Window的属性

    1.概述 上一篇文章中我们讲过了Window、WindowManager和WMS之间的关系,WMS是Window的最终管理者,Window好比是员工,WMS是老板,为了方便老板管理员工则需要定义一些“协议...窗口显示次序 当一个进程向WMS申请一个窗口时,WMS会为窗口确定显示次序。...为了方便窗口显示次序的管理,手机屏幕可以虚拟的用X、Y、Z轴来表示,其中Z轴垂直于屏幕,从屏幕内指向屏幕外,这样确定窗口显示次序也就是确定窗口在Z轴上的次序,这个次序称为Z-Oder。...4.软键盘相关模式 窗口和窗口的叠加是非常常见的场景,但如果其中的窗口是软键盘窗口,可能就会出现一些问题,比如典型的用户登录界面,默认的情况弹出的软键盘窗口可能会盖住输入框下方的按钮,这样用户体验会非常糟糕...为了使得软键盘窗口能够按照期望来显示,WindowManager的静态内部类LayoutParams中定义了软键盘相关模式,这里给出常用的几个: ?

    1.1K80

    可能这些是你想要的H5软键盘兼容方案

    然而,H5 并没有直接监听软键盘的原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。并且,在 IOS 和 Android 上的表现不尽相同。...但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。 ?...监听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现,我们可以分开进行如下处理来监听软键盘的弹起和收起: 在 IOS 上,监听输入框的 focus 事件来获知软键盘弹起...在 Android 上,监听 webview 高度会变化,高度变小获知软键盘弹起,否则软键盘收起。...在 UC 浏览器上,软键盘弹起后,浏览器上面的标题栏高度就有个高度变小延时动态效果,这样导致 webview 往下滚了一点,底部输入框滚到了非可视区。

    8.1K20

    【Android开发高级系列】AndroidManifest.xml专题

    这个我用过,主要用来看手机方向改变的. android手机在旋转后,layout会重新布局,如何做到呢?         ...singleTask:和后面的singleInstance都只创建一个实例,当intent到来,需要创建设置为singleTask的Activity的时候,系统会检查栈里面是否已经有该Activity的实例...t3181.html     8、android:noHistory         当用户从Activity上离开并且它在屏幕上不再可见时,Activity是否从Activity stack中清除并结束...    【E】stateVisible:软键盘通常是可见的;     【F】stateAlwaysVisible:用户选择activity时,软键盘总是显示的状态;     【G】adjustUnspecified...:默认设置,通常由系统自行决定是隐藏还是显示;     【H】adjustResize:该Activity总是调整屏幕的大小以便留出软键盘的空间;     【I】adjustPan:当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分

    89250
    领券