在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一下,好吧我妥协,毕竟我还是一只非常注重用户体验的猿。
那就做吧,初步定下的方案是输入框和登陆按钮大小不变,在键盘弹出的时候让logo的大小和位置进行改变,从而给键盘腾出位置,当然在键盘收起的时候还要给它还原一下,就像什么都没发生一样,嗯对,就是这样,说了这么多,放张图先感受一下效果吧:
接下来上正餐,布局上比较简单,注意给图片外边套上一个合身的linearlayout就好,因为待会要靠它改变logo的位置,布局代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context=".login.LoginActivity" android:orientation="vertical" android:id="@+id/ll_login_root"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="90dp" android:id="@+id/ll_login_logobg" android:layout_marginBottom="50dp"> <ImageView android:layout_width="160dp" android:layout_height="160dp" android:id="@+id/iv_login_logo" android:background="@mipmap/login_logo" android:layout_gravity="center_horizontal" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="50dp" android:layout_marginRight="50dp"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp"> <ImageView android:layout_width="45dp" android:layout_height="45dp" android:background="@mipmap/login_phone" android:id="@+id/imageView2" android:layout_gravity="bottom" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="phone" android:ems="10" android:id="@+id/et_login_phone" android:layout_gravity="center" android:hint="请输入手机号" android:background="@null" android:maxLength="11"/> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/text_gray"></LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp" > <ImageView android:layout_width="45dp" android:layout_height="45dp" android:background="@mipmap/login_password" android:id="@+id/imageView3" android:layout_gravity="bottom" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="phone" android:ems="10" android:id="@+id/et_login_code" android:layout_gravity="center" android:layout_weight="1" android:hint="请输入验证码" android:background="@null" android:maxLength="6"/> <Button android:layout_width="90dp" android:layout_height="30dp" android:text="获取验证码" android:textColor="@color/white" android:id="@+id/bt_login_getcode" android:background="@mipmap/login_button_blue" android:layout_gravity="center_vertical" android:textSize="14dp" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/text_gray" android:layout_marginBottom="10dp" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="20dp" android:id="@+id/ll_login_warning" android:visibility="gone"> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:background="@mipmap/login_warning" android:id="@+id/imageView" android:layout_gravity="center_vertical" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="请输入验证码" android:id="@+id/tv_login_wraning" android:layout_gravity="center_vertical" android:textColor="@color/text_red" android:textSize="13dp" /> </LinearLayout> <Button android:layout_width="match_parent" android:layout_height="40dp" android:textColor="@color/white" android:id="@+id/bt_login_submit" android:background="@mipmap/login_button_gray" android:text="登 录" android:textSize="18dp" android:layout_marginTop="10dp" /> </LinearLayout> </LinearLayout>
主代码如下,我会把注释添加到代码中,因为是整个模块的代码所以也会有一些其他功能在里边:
package com.millionideas.cm.login; import android.app.ProgressDialog; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.text.Editable; import android.text.TextWatcher; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import com.millionideas.cm.R; import com.millionideas.cm.home.HomeActivity; import com.millionideas.cm.main.BaseActivity; import com.millionideas.cm.tools.TimeCountUtils; import org.xutils.view.annotation.ContentView; import org.xutils.view.annotation.Event; import org.xutils.view.annotation.ViewInject; import java.util.regex.Matcher; import java.util.regex.Pattern; @ContentView(R.layout.activity_login) public class LoginActivity extends BaseActivity implements View.OnLayoutChangeListener{ //用xUtils进行控件绑定 @ViewInject(R.id.iv_login_logo) ImageView iv_login_logo; @ViewInject(R.id.ll_login_logobg) LinearLayout ll_login_logobg; @ViewInject(R.id.et_login_phone) EditText et_login_phone; @ViewInject(R.id.et_login_code) EditText et_login_code; @ViewInject(R.id.ll_login_warning) LinearLayout ll_login_warning; @ViewInject(R.id.tv_login_wraning) TextView tv_login_wraning; @ViewInject(R.id.bt_login_getcode) Button bt_login_getcode; @ViewInject(R.id.bt_login_submit) Button bt_login_submit; @ViewInject(R.id.ll_login_root) LinearLayout activityRootView;//需要操作的布局 private TimeCountUtils timeCountUtils; private Matcher phone_num; private Pattern phonenumber; private ProgressDialog progressDialog; private Handler handler; private int screenHeight = 0;//屏幕高度 private int keyHeight = 0; //软件盘弹起后所占高度 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); screenHeight = this.getWindowManager().getDefaultDisplay().getHeight(); //获取屏幕高度 keyHeight = screenHeight / 3;//弹起高度为屏幕高度的1/3 timeCountUtils = new TimeCountUtils(LoginActivity.this, 60000, 1000, bt_login_getcode);//时间工具类用以实现倒计时 progressDialog=new ProgressDialog(this);//对话框 handler=new Handler(); bt_login_submit.setClickable(false); et_login_phone.addTextChangedListener(new TextWatcher() {//为edittext添加文本改变监听,根据是否有文本输入更改确认按钮的背景颜色 @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { if (!et_login_phone.getText().toString().equals("")){ bt_login_submit.setClickable(true); bt_login_submit.setBackgroundResource(R.drawable.login_button); }else { bt_login_submit.setClickable(false); bt_login_submit.setBackgroundResource(R.mipmap.login_button_gray); } } }); } //xUtils的事件处理 @Event(value = {R.id.bt_login_submit, R.id.bt_login_getcode}, type = View.OnClickListener.class) private void onClick(View view) { switch (view.getId()) { case R.id.bt_login_submit://确认按钮事件 if (!CheckPhone(et_login_phone).matches()) {//判断手机号格式 ll_login_warning.setVisibility(View.VISIBLE); tv_login_wraning.setText("手机号码格式不正确"); } else if (!et_login_code.getText().toString().equals("000")) {//验证码判断,为方便测试设置了默认值 ll_login_warning.setVisibility(View.VISIBLE); tv_login_wraning.setText("验证码不正确"); } else {//条件全部满足,开始登陆 ll_login_warning.setVisibility(View.GONE); progressDialog.setMessage("正在登录…"); progressDialog.show();//弹出加载对话框 handler.postDelayed(new Runnable() {//设置一个1s的延时操作模拟登陆的过程 @Override public void run() {//登陆成功关掉对话框,跳转页面,关掉本页 progressDialog.dismiss();//不能用hide Intent intent=new Intent(LoginActivity.this, HomeActivity.class); startActivity(intent); LoginActivity.this.finish(); } },1000); } break; case R.id.bt_login_getcode: if (CheckPhone(et_login_phone).matches()) {//手机号正确则获取验证码,开启倒计时 ll_login_warning.setVisibility(View.GONE); bt_login_getcode.setBackgroundResource(R.mipmap.login_button_gray); timeCountUtils.start(); } else { ll_login_warning.setVisibility(View.VISIBLE); tv_login_wraning.setText("手机号码格式不正确"); } break; } } public Matcher CheckPhone(EditText editText) {//判断手机号格式 phonenumber = Pattern .compile("^[1][3-8][0-9]{9}$"); phone_num = phonenumber.matcher(editText.getText() .toString()); return phone_num; } @Override protected void onResume() { super.onResume(); activityRootView.addOnLayoutChangeListener(this);//给需要操作的布局设置监听 } @Override public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) { /* old是改变前的左上右下坐标点值,没有old的是改变后的左上右下坐标点值 现在认为只要控件将Activity向上推的高度超过了1/3屏幕高,就认为软键盘弹起*/ if (oldBottom != 0 && bottom != 0 && (oldBottom - bottom > keyHeight)) { ViewGroup.LayoutParams params = iv_login_logo.getLayoutParams();//获取布局,设置键盘弹起后logo的宽高 params.height = 300; params.width = 300; iv_login_logo.setLayoutParams(params); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ll_login_logobg.getLayoutParams()); lp.setMargins(0, 90, 0, 50);//设置包含logo的布局的位置 ll_login_logobg.setLayoutParams(lp); } else if (oldBottom != 0 && bottom != 0 && (bottom - oldBottom > keyHeight)) {//键盘收回后,logo恢复原来大小,位置同样回到初始位置 ViewGroup.LayoutParams params = iv_login_logo.getLayoutParams(); params.height = 480; params.width = 480; iv_login_logo.setLayoutParams(params); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ll_login_logobg.getLayoutParams()); lp.setMargins(0, 270, 0, 150); ll_login_logobg.setLayoutParams(lp); } } }
以上所述是小编给大家介绍的Android实现登陆页logo随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍Android开发软键盘遮挡登陆按钮的完美解决方案,包括了Android开发软键盘遮挡登陆按钮的完美解决方案的使用技巧和注意事项,需要的朋友参考一下 在应用登陆页面我们需要填写用户名和密码。当填写这些信息的时候,软键盘会遮挡登陆按钮,这使得用户体验较差,所以今天就来解决这个问题 1:登陆布局界面如下 需要注意的是: 1:层级关系 RelativeLayout----- LinearL
本文向大家介绍Android软键盘遮挡的四种完美解决方案,包括了Android软键盘遮挡的四种完美解决方案的使用技巧和注意事项,需要的朋友参考一下 一、问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操
本文向大家介绍解决react-native软键盘弹出挡住输入框的问题,包括了解决react-native软键盘弹出挡住输入框的问题的使用技巧和注意事项,需要的朋友参考一下 这是效果: 代码: 有无用的代码,可自行删除,我不会弄gif的图 ,要不就配一个图了。 总结 以上所述是小编给大家介绍的解决react-native软键盘弹出挡住输入框的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小
本文向大家介绍Android实现弹出键盘的方法,包括了Android实现弹出键盘的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android实现弹出键盘代码,是一个非常实用的功能。代码非常简洁。分享给大家供大家参考。 具体功能代码如下: 希望本文所述对大家Android程序设计的学习有所帮助。
本文向大家介绍解决Android软键盘弹出覆盖h5页面输入框问题,包括了解决Android软键盘弹出覆盖h5页面输入框问题的使用技巧和注意事项,需要的朋友参考一下 之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软
本文向大家介绍5种方法完美解决android软键盘挡住输入框方法详解,包括了5种方法完美解决android软键盘挡住输入框方法详解的使用技巧和注意事项,需要的朋友参考一下 在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好。像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常