Android 解决底部弹窗遮住底部按钮问题

最新推荐文章于 2021-05-29 23:51:56 发布
原创 最新推荐文章于 2021-05-29 23:51:56 发布 · 845 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

本文介绍了如何在AndroidManifest中设置windowSoftInputMode以适应屏幕变化，并在布局文件中启用fitsSystemWindows，以提升用户体验和UI布局的灵活性。

1、manifest文件里面加

android:windowSoftInputMode="adjustResize|stateVisible"

2、布局文件最外层加

android:fitsSystemWindows="true"

 

Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
安卓两个Dialog出现问题，第一个Dialog被第二个Dialog的遮罩层遮住了，即第一个Dialog没有自己的遮罩层了
坐等夕阳落time的博客
10-28 4202
介绍 UI画的图有个弹窗做筛选，筛选弹窗里面有个选择时间的功能。安卓选择时间，我采用底部弹出Dialog的方式。理想很美好，按照我的想法，确实两个Dialog都能做出来了，样子还不错。但是却遇到了：点击第一个Dialog的按钮弹出第二个Dialog时间选择弹窗，第一个Dialog就没有自己的遮罩层了，成为了一个平面的背景板。 题目描述的问题，如图所示： 我的第一个Dialog: 思路 首先我想的是，是不是第二个Dialog的背景遮罩层太浅了，我把它调黑点 mDialog.
如何让弹窗不影响主界面_B端界面交互："弹窗不友好"到底对不对？
weixin_35763055的博客
01-13 736
大嘎好，这里是刚刚开始菜鸡PD之路的陶尼玛，在经受了6个月高强度与客户、研发的相互折磨之后，终于积攒出宛如一颗小病毒那么大的经验。基于人类爱逼逼的本性，准备在这个嘎啦，记录一些没什么卵用的想法。言归正传，在页面设计规范和经验中，多多少少都会提到“弹窗不友好”这一准则。于是，实操中，一般被推荐使用唤起新标签页或者当前页面跳转的形式，来串联一些功能操作。为了更好理解两种不同的交互方式，我们来...
Android 自定义弹出对话框显示不全的问题
热门推荐
wblyuyang的专栏
05-08 1万+
昨天需要用自定义AlertDialog来实现一项功能，步骤大体是： 1.自定义布局文件 2.初始化AlertDialog，并设置setView 3.按钮 文本框啥的处理 为了偷懒直接copy工程里面同事完成的对话框。但是我修改后效果却不一样，先看我的布局文件图示： 这是我想实现的效果，但是实际上却是这样的： 我感觉太奇怪了，这是同事实现的效果： 昨晚上下班
android adjustresize 布局混乱,adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理...
weixin_33400830的博客
05-26 1563
为了更好的用户体验，煎熬了许久，得到这么个解决方案。在此记录下来，以供后来者参考。第一部分清单文件中组件activity的android:windowsoftinputmode属性值的含义：【a】stateunspecified：软键盘的状态并没有指定，系统将选择一个合适的状态或依赖于主题的设置【b】stateunchanged：当这个activity出现时，软键盘将一直保持在上一个activit...
android自定义键盘遮挡,android中键盘遮挡了dialog里的内容怎么处理
weixin_29609733的博客
05-26 489
在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图:输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示:输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决?简单解决方案方法一在你的activity中的oncreate中setContentView之前写上这个代码getWin...
android 软键盘遮住按钮,Android应用中出现软键盘遮挡住按钮如何解决
weixin_42475103的博客
05-26 568
Android应用中出现软键盘遮挡住按钮如何解决发布时间：2020-11-20 16:25:47来源：亿速云阅读：110作者：LeahAndroid应用中出现软键盘遮挡住按钮如何解决？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。如图：实现1xmlandroid:id="@+id/scrollview"android:layout_wi...
android 底部弹窗实现,Android底部弹窗的实现示例代码
weixin_31411313的博客
05-26 1749
Android底部弹窗的实现示例代码发布时间：2020-09-09 03:55:30来源：脚本之家阅读：84作者：WizarDev本文主要是介绍Android中实现底部弹窗的的正确姿势，如果你在实现底部弹窗时遇到了一些问题，那么请仔细阅读本文，相信文章会对你有所帮助。收获早知道阅读完本文后，你可以有以下收获利用PopupWindow实现底部弹窗PopupWindow实现底部弹窗时的缺点解决利用Po...
Android虚拟导航栏遮挡底部的输入框的解决方法
01-20
在Android应用开发中，...通过上述方法，可以有效地解决Android虚拟导航栏遮挡底部输入框的问题，提高用户体验。在实际开发中，可能需要根据项目的具体需求和目标设备特性，组合使用这些方法，以达到最佳的适配效果。
5种方法完美解决android软键盘挡住输入框方法详解
01-20
为了解决这个问题，Android提供了多种策略，包括`adjustResize`和`adjustPan`等。本文将详细介绍5种有效的方法来解决软键盘挡住输入框的问题，并讨论它们的适用场景、优缺点以及使用注意事项。 1. **方法一：非透明...
android虚拟键盘弹出遮挡登陆按钮问题的解决方法
01-04
Android虚拟键盘的弹起会遮挡住部分ui，虽然通过在清单文件中设置，可以随着虚拟键盘的弹出，布局往上推，但是面对登陆界面时，并没有太大的作用，这样就会导致用户体验不好；开发中既然出现了就的解决；先说先解决的思路:获取到屏幕的高度、虚拟键盘的高度，布局的高度，用屏幕的高度减去布局的高度，用高度差和虚拟键盘的高度进行对比；代码实现如下； private LinearLayout logo_layout; private ImageView iv_logo; private int sh; private int layoutH; @Override protected v
解决android 软键盘在全屏下设置adjustResize无效的问题
08-18
全屏模式下，即使将activity的windowSoftInputMode的属性设置为：adjustResize，在键盘显示时它未将Activity的Screen向上推动，所以你Activity的view的根树的尺寸是没有变化的。在这种情况下，你也就无法得知键盘的尺寸，对根view的作相应的推移。全屏下的键盘无法Resize的问题从2.1就已经存在了，直到现在google还未给予解决。 感谢Ricardo提供的轮子，他在stackoverflow找到了解决方案。有人已经封装好了该类，你只需引用就OK了。 使用方法 在你的Activity的oncreate()方法里调用AndroidBug5497Workaround.assistActivity(this);即可。注意：在setContentView(R.layout.xxx)之后调用。
android 对话框 输入法遮挡,底部弹出 和输入法遮挡问题的解决
weixin_42514877的博客
05-29 739
package com.example.dialog;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.app.Dialog;import android.view.Display;import android.view.Gravity...
android底部弹出下拉菜单,Android 弹出Dialog时隐藏状态栏和底部导航栏
weixin_42306699的博客
05-26 782
上代码dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);dialog.getWindow().getDecorView().setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityCha...
Android - 解决软件弹窗遮盖View的问题
QY'UniverseSpace的博客
04-23 492
页面实现接口 implements IkeyBoardCallback，详细资料见结尾注记。 初始化： @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_xx); getWindow().setSoftInputMode(WindowManager.LayoutP
android 按钮覆盖,Android解决登录按钮被键盘覆盖的问题
weixin_42521731的博客
05-26 310
布局文件activity_login：android:id="@+id/ll_login_root"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">android:id="@+id/rel_content"android:layout_w...
安卓和iOS的兼容性问题： 键盘弹起时，固定在底部的按钮是否被弹到键盘上方
weixin_47808575的博客
05-19 686
问题描述： iOS不存在固定在底部的按钮被键盘弹起的问题，该问题出现在安卓手机上，如下图 解决方法： 1. 当键盘弹起时可以监听窗口变化（window.onresize 监听窗口变化） 2. 窗口发生变化可以拿到手机的信息 （navigator.userAgent 可以拿到手机是否是安卓手机） 3. 拿到手机信息判断是否是安卓手机，如果是安卓手机可以暂时让按钮隐藏，当键盘收起时让按钮展示 具体代码： 注意： 监听窗口变化需要挂载在onMounted周期函数中，因为在该周期函数中可以拿
android页面布局中，底部的布局被键盘顶起的连环问题解决
m0_38048084的博客
03-18 3003
android页面布局中，底部的布局被键盘顶起的连环问题解决1. 先说下遇到的几种情况 1. 先说下遇到的几种情况 （1）activity的布局 ps:为了保密，页面不能贴出来，但是也不想写个demo了，那么就展示我拙劣的画图技术吧 线性布局使用的android:layout_alignParentBottom="true"这个属性，scrollView中有一个输入框 （2）activity的配...
android解决底部导航栏遮挡问题,Android虚拟导航栏遮挡底部的输入框的解决方法...
weixin_33533797的博客
05-26 1180
1.场景还原最近忙着app的适配，在这个过程问题中，各种机型的奇葩问题都出来了，适配真尼玛痛苦！今天就oppo机型虚拟导航栏遮挡底部的输入框的问题作个记录。① 在该Activity的根layout配置如下属性：android:fitsSystemWindows="true"android:clipToPadding="false"第一个属性：如果为true，将调整系统窗口布局以适应你自定义的布局。...
RN FlatList 点击底部按钮弹出层会被遮住的问题
最新发布
08-26
在 React Native 中使用 `FlatList` 时，当在 `FlatList` 的底部放置一个按钮，并尝试弹出一个模态框或浮动层（如 `Modal` 或自定义的弹出层），可能会遇到弹出层被 `FlatList` 或页面其他内容遮挡的问题。这个问题通常与组件的层级结构（z-index）和渲染顺序有关。 ### 解决方案 #### 1. 使用 `ListFooterComponent` 并调整布局结构 将底部按钮放置在 `FlatList` 的 `ListFooterComponent` 中，并确保整个 `FlatList` 包裹在一个具有 `flex: 1` 的容器中，这样可以保证按钮始终位于屏幕底部，并且不会被内容遮挡： ```jsx <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={(item) => item.id} ListFooterComponent={this.renderFooter} contentContainerStyle={{ flexGrow: 1 }} /> ``` 在 `renderFooter` 方法中定义按钮，并确保按钮所在的容器不会被裁剪： ```jsx renderFooter = () => ( <View style={{ padding: 16 }}> <Button title="弹出层" onPress={this.showModal} /> </View> ); ``` #### 2. 使用 `Modal` 组件并确保其层级高于 `FlatList` 当使用 `Modal` 组件时，确保它被渲染在 `FlatList` 之上。可以将 `Modal` 放在与 `FlatList` 同级的层级中，并通过 `flex: 1` 和 `position: 'absolute'` 控制其显示位置： ```jsx <View style={{ flex: 1 }}> <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={(item) => item.id} ListFooterComponent={this.renderFooter} contentContainerStyle={{ flexGrow: 1 }} /> <Modal visible={this.state.modalVisible} transparent={true}> <View style={styles.modalContainer}> <View style={styles.modalContent}> <Text>这是一个弹出层</Text> <Button title="关闭" onPress={this.closeModal} /> </View> </View> </Modal> </View> ``` 样式定义如下： ```jsx const styles = StyleSheet.create({ modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, modalContent: { width: 300, padding: 20, backgroundColor: 'white', borderRadius: 10, alignItems: 'center', }, }); ``` #### 3. 使用 `zIndex` 控制层级 如果弹出层是自定义的浮动组件而非 `Modal`，可以通过 `zIndex` 控制其层级，确保它高于 `FlatList` 及其父容器： ```jsx <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 10 }}> {this.state.showPopup && ( <View style={{ backgroundColor: 'white', padding: 16, elevation: 5 }}> <Text>这是一个浮动弹出层</Text> </View> )} </View> ``` 同时，确保父容器支持 `position: absolute` 定位，可以通过设置 `position: relative` 或 `overflow: visible` 来避免内容被裁剪。 #### 4. 避免 `FlatList` 内容溢出 在某些情况下，`FlatList` 内容可能会溢出并遮挡弹出层。可以通过设置 `overflow: 'visible'` 来避免这种情况： ```jsx <FlatList style={{ overflow: 'visible' }} data={this.state.data} renderItem={this.renderItem} keyExtractor={(item) => item.id} /> ``` ### 总结 通过合理使用 `ListFooterComponent`、`Modal` 组件、`zIndex` 层级控制以及避免内容溢出等方法，可以有效解决 React Native 中 `FlatList` 底部按钮弹出层被遮挡的问题。这些方法可以单独使用，也可以结合使用，以适应不同布局需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值