Android实现登陆页logo随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题)

在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一下,好吧我妥协,毕竟我还是一只非常注重用户体验的猿。

那就做吧,初步定下的方案是输入框和登陆按钮大小不变,在键盘弹出的时候让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随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • android 自定义ScrollView实现背景图片伸缩的实现代码及思路

       用过多米音乐的都市知道, 这个UI可以上下滑动,作用嘛---无聊中可以划划解解闷,这被锤子公司老罗称谓为"情怀",其实叫"情味"更合适.嘿嘿.如今挪动互联网开展这么迅速,市场上已不再是那早期随便敲个APP放上架就能具有几十万用户的阶段了.近来苹果公司,为了怕android下载量赶超苹果商店,大势宣称:(第 500 亿个下载应用的用户就能够获得 10,000 美元的 iTunes 礼品卡,除此之外,紧随第 500 亿以后的前 50 名用户也可以获得 500 美元

  • Android进阶篇-自定义图片伸缩控件具体实例

    ZoomImageView.java: 复制代码 代码如下: /** * @author gongchaobin *  *  自定义可伸缩的ImageView */public class ZoomImageView extends View{    /** 画笔类  **/    private Paint mPaint; private Runnable mRefresh = null;    /** 缩放手势监听类  **/    private ScaleGestureDetector

  • Android ListView添加头布局和脚布局实例详解

    Android ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动布局外面套一层ScrollView(好low):3.头布局脚布局.有的时候我们用多布局并不能很好的实现,所以头布局跟脚布局就是我们最好的选择了:学过了ListView的话原理很简单,没啥理解的东西,直接贴代码了: 效果图: 正文部分布局: fragment_classify.xml <

  • Android 实现伸缩布局效果示例代码

    最近项目实现下面的图示的效果,本来想用listview+gridview实现,但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果,实现也比较简单. mainActivity 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • 探究Android中ListView复用导致布局错乱的解决方案

    首先来说一下具体的需求是什么样的: 需求如图所示,这里面有ABCD四个选项的题目,当点击A选项,如果A是正确的答案,则变成对勾的图案,如果是错误答案,则变成错误的图案,这里当时在写的时候觉得很简单,只要是在点击的时候判断我点击的选项与正确答案是否一样,是一样就将图片换成正确的样式,如果不一样就换成错误的样式,于是我便写了下面的代码(只贴出了核心Adapter中的代码) package com.fizzer.anbangproject_dahuo_test.Adapter; import andr

  • Android实现登陆页logo随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题)

    在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一下,好吧我妥协,毕竟我还是一只非常注重用户体验的猿. 那就做吧,初步定下的方案是输入框和登陆按钮大小不变,在键盘弹出的时候让logo的大小和位置进行改变,从而给键盘腾出位置,当然在键盘收起的时候还要给它还原一下,就像什么都没发生一样,嗯对,就是这样,说了这么多,放张图先感受一下效果吧: 接下来上正餐,布局上比较简单,注意给图片

  • Android解决dialog弹出时无法捕捉Activity的back事件的方法

    本文实例讲述了Android解决dialog弹出时无法捕捉Activity的back事件的方法.分享给大家供大家参考.具体分析如下: 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到back事件: 1)重写onKeyDown或者onKeyUp方法 2)重写onBackPressed方法 3)重写dispatchKeyEvent方法 这三种办法有什么区别在这里不进行阐述,有兴趣的朋友可以查阅相关资料. 然而在有dialog弹出时,

  • 基于Android实现点击某个按钮让菜单选项从按钮周围指定位置弹出

    Android Material Design:PopupMenu Android Material Design 引入的PopupMenu类似过去的上下文菜单,但是更灵活. 如图所示: 现在给出实现上图PopupMenu的代码. 本例是一个普通的Button触发弹出PopupMenu. 测试的MainActivity.java : package zhangphil.materialdesign; import android.app.Activity; import android.os.B

  • Android 解决dialog弹出时无法捕捉Activity的back事件问题

    Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到back事件: 1)重写onKeyDown或者onKeyUp方法 2)重写onBackPressed方法 3)重写dispatchKeyEvent方法 这三种办法有什么区别在这里不进行阐述,有兴趣的朋友可以查阅相关资料. 然而在有dialog弹出时,想捕捉back键的事件的话,上述三种办法都无法实现.

  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • iOS键盘弹出遮挡输入框的解决方法

    本文为大家分享了iOS键盘弹出遮挡输入框的解决方法,供大家参考,具体内容如下 问题:输入框被键盘遮挡 期望效果:输入框位于键盘上方 解决思路: 监听键盘出现和消失的状态,当键盘出现时,当前视图上移,当输入完成收起键盘时,视图回到初始状态. 难点:视图向上平移的距离 原理都差不多,oc版参考代码: self.phoneInput = [UITextField new]; self.phoneInput.placeholder = @"请输入..."; [self.view addSubv

  • android虚拟键盘弹出遮挡登陆按钮问题的解决方法

    Android虚拟键盘的弹起会遮挡住部分ui,虽然通过在清单文件中设置,可以随着虚拟键盘的弹出,布局往上推,但是面对登陆界面时,并没有太大的作用,这样就会导致用户体验不好:开发中既然出现了就的解决:先说先解决的思路:获取到屏幕的高度.虚拟键盘的高度,布局的高度,用屏幕的高度减去布局的高度,用高度差和虚拟键盘的高度进行对比:代码实现如下: private LinearLayout logo_layout; private ImageView iv_logo; private int sh; pri

  • iOS项目开发键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起.在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框.今天,我们就主要来说一

  • Android studio无法创建类和接口和提示问题的完美解决办法

    这就很尴尬了,到底是哪里出了问题,根据template报错,打开file->setting->file and templates 发现里边的templates 全部是空的,class没有模板,我就从别人那里考了一份出来粘贴上,发现可以新建类了,ok,问题得到解决. 但是过几天发现又出问题了,再次打开studio,发现templates又空了,总不能每次开IDE都重新复制一次 最终的解决办法如下: 打开studio所在的文件夹(在这之前请关闭studio), 在bin文件夹下找到这个文件stu

  • Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现

    最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现. 需求和淘宝等电商的功能大体差不多,最上面一个搜索框,下面显示搜索历史记录.在EditText里输入要搜索的关键字后,按软键盘的搜索按键/延迟xxxxms后自动搜索.然后将搜索的内容展示给用户/提示用户没有搜到相关信息. 历史记录是按时间排序的,最新的在前面,输入以前搜索过的关键字,例如牛仔裤(本来是第二条),会更新这条记录的时间,下次再看,牛仔裤的排列就在第一位了.并且有清除历史记录的功能. 整理需求,大致需

随机推荐