Android实现登陆页logo随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题)
程序员文章站
2024-03-06 20:37:14
在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一...
在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一下,好吧我妥协,毕竟我还是一只非常注重用户体验的猿。
那就做吧,初步定下的方案是输入框和登陆按钮大小不变,在键盘弹出的时候让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随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题),希望对大家有所帮助