当前位置： 移动技术网 > 移动技术>移动开发>Android > Android实现背景可滑动登录界面 (不压缩背景弹出键盘)

Android实现背景可滑动登录界面 (不压缩背景弹出键盘)

2019年07月24日  | 移动技术网移动技术  | 我要评论

废话不多说，先看下实现后的效果：

这里写图片描述

实现思路

看到上边 gif 图的效果，主要列举一下实现过程过程中遇到的难点。

如何使键盘弹出时候不遮挡底部登录布局；

当键盘弹出的时候如何不压缩背景图片或者背景延伸至「屏幕以外」；

从 「 windowsoftinputmode 」 说起

相信大家都清楚，google 官方提供给开发者控制软键盘显示隐藏的方法不多，「windowsoftinputmode」算是我们可控制的软键盘弹出模式的方法之一。关于其属性的说明google 官方和网上的教程说了很多，他的属性值由两部分组成，形如「 statehidden|adjustresize 」的格式，其前半部分（事实上也可写在后边）表示所设置的 activity 进入时软键盘的状态，后半部分表示软键盘弹出的时候页面是如何调整的。

下边分别列出几个可选属性及其含义：

通过上述列表我们可以了解到 windowsoftinputmode 的几个属性值的含义。我们可以根据具体的需求来选择合适属性。however ! 产品需求永远比属性来的奇葩。比如说我们想要实现的的这个效果：

软键盘弹出不遮挡全部的输入布局,并不是单纯的留出一个输入框控件

软键盘被弹起的时候背景不能被压缩，或者向上滑动

首先看第一个需求：我们可以使用 adjustresize 属性来达到效果，可以看到这样图片已经被自动向上移动了，ok,如果效果您还算满意，那我就没什么好说的了，但是我们老板和产品以及 ui 说这样不好，背景不能压缩也就是我们说的第二个需求。当时我心中就有一种 mmp 想对他们说。但是呢作为一个敢于挑战的 android 程序员来说这个小小的需求并不算什么。

这里写图片描述

对于第二个需求，首先我们要了解为什么图片会被上滑，是因为我们配置了 adjustresize 属性，系统自动根据键盘所需要的空间向上移动整个页面的布局，并调整页面布局的大小以满足不被软键盘隐藏的效果。举个栗子：

手机屏幕的高为1920px，那么整个activity的布局高度也为1920px。当设置该属性后点击界面中的edittext，此时弹出软键盘其高度为800px。为了完整地显示此软键盘，系统会调整activity布局的高度为1920px-800px=1120px。
注意这里说了会调整布局的大小，根据以往的经验，系统自动调节的布局都不是我们想要的结果，比如各种可滑动 view 嵌套的问题。那么这个需求能否依据这个思路来结局呢？

当 windowsoftinputmode 被设置为 adjustresize 时候，当布局调整的时候被调整的布局均会重绘制，并走了onmeasure，onsizechanged，onlayout 。

当 windowsoftinputmode 被设置为 adjustpan 时候，当布局调整的时候被调整的布局均会重绘制，并走了onmeasure, onlayout 。

这里只需要注意 两者都走了 onmeasure 方法，至于 adjustpan 没走 onsizechanged ，我们会在之后关于软键盘弹出的监控的文章中详细说明。
那么我们就利用其走了 onmeasure 方法，来「阻止」系统自动调整的布局大小。由于我们背景用了 viewpager，所以我们需要重写 viewpager 的 onmeasure 方法。

public class autoviewpager extends viewpager {
 private int mscreenheight;
 public autoviewpager(context context) {
  this(context,null);
 }
 public autoviewpager(context context, attributeset attrs) {
  super(context, attrs);
  mscreenheight = densityutil.getheight(getcontext());
 }
 @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  heightmeasurespec = measurespec.makemeasurespec(mscreenheight, measurespec.exactly);
  super.onmeasure(widthmeasurespec, heightmeasurespec);
 }
}

densityutil.getheight 方法是获取屏幕高度的方法。

public static int getheight(context context) {
  displaymetrics dm = new displaymetrics();
  windowmanager mwm = (windowmanager) context.getsystemservice(context.window_service);
  mwm.getdefaultdisplay().getmetrics(dm);
  int screenheight = dm.heightpixels;
  return screenheight;
}

经过这样的设置我们就讲背景 viewpager 的高度写死为屏幕的高度。这样当键盘弹出的时候viewpager 的大小就会变了。 经过测试我们这个方法就就可以组织背景向上移动了。其实我们并没有组织系统对控件的重绘，而是改变了最终重绘的 viewpager 的高度大小，给用户的感觉就是我的背景没有改变。

最后附送实现的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<relativelayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/rl_root"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <relativelayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <com.goldenalpha.stock.master.views.autoviewpager
   android:id="@+id/login_bg_banner"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>
  <linearlayout
   android:id="@+id/ll_dot"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerhorizontal="true"
   android:layout_gravity="center_horizontal">
   <imageview
    android:id="@+id/iv_dot_1"
    android:layout_width="7dp"
    android:layout_height="7dp"
    android:layout_marginright="8dp"
    android:background="@drawable/banner_dot_shape_select"/>
   <imageview
    android:id="@+id/iv_dot_2"
    android:layout_width="7dp"
    android:layout_height="7dp"
    android:layout_marginright="8dp"
    android:background="@drawable/bander_dot_shape_noselect"/>
   <imageview
    android:id="@+id/iv_dot_3"
    android:layout_width="7dp"
    android:layout_height="7dp"
    android:background="@drawable/bander_dot_shape_noselect"/>
  </linearlayout>
 </relativelayout>
 <relativelayout
  android:id="@+id/activity_login"
  android:layout_width="match_parent"
  android:layout_height="270dp"
  android:layout_alignparentbottom="true"
  android:paddingbottom="@dimen/login_margin_bottom"
  android:layout_marginleft="10dp"
  android:layout_marginright="10dp"
  android:background="@drawable/login_shape"
  android:orientation="vertical">
  <linearlayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <relativelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <relativelayout
     android:id="@+id/rl_phone_name"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
     <textview
      android:id="@+id/tv_area_code"
      style="@style/text.normal"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centervertical="true"
      android:layout_marginleft="@dimen/login_tv_margin_left"
      android:padding="5dp"
      android:text="+86">
      <requestfocus/>
     </textview>
     <view
      android:layout_width="0.3dp"
      android:layout_height="10dp"
      android:layout_centerhorizontal="true"
      android:layout_centervertical="true"
      android:layout_marginleft="@dimen/login_line_margin"
      android:layout_torightof="@id/tv_area_code"
      android:background="@color/gray"/>
     <edittext
      android:id="@+id/et_phone_num"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginleft="@dimen/login_et_margin_left"
      android:background="@null"
      android:hint="请输入您的手机号码"
      android:inputtype="phone"
      android:maxlength="11"
      android:maxlines="1"
      android:paddingbottom="20dp"
      android:paddingtop="20dp"
      android:textcolor="@color/black"
      android:textcolorhint="@color/gray"
      android:textcursordrawable="@null"
      android:textsize="@dimen/font_normal">
      <requestfocus/>
     </edittext>
    </relativelayout>
    <view
     android:id="@+id/line_phone_num"
     android:layout_width="match_parent"
     android:layout_height="0.5dp"
     android:layout_below="@+id/rl_phone_name"
     android:layout_centerhorizontal="true"
     android:layout_marginleft="@dimen/login_line_margin"
     android:layout_marginright="@dimen/login_line_margin"
     android:background="@color/gray"/>
    <relativelayout
     android:id="@+id/rl_check_num"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignleft="@+id/line_phone_num"
     android:layout_alignright="@+id/line_phone_num"
     android:layout_below="@+id/line_phone_num">
     <edittext
      android:id="@+id/et_check_num"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerinparent="true"
      android:layout_toleftof="@+id/btn_get_check"
      android:background="@null"
      android:hint="请输入验证码"
      android:inputtype="number"
      android:maxlength="4"
      android:maxlines="1"
      android:paddingbottom="20dp"
      android:paddingleft="120dp"
      android:paddingtop="20dp"
      android:textcolor="@color/black"
      android:textcolorhint="@color/gray"
      android:textcursordrawable="@null"
      android:textsize="@dimen/font_normal"/>
     <com.goldenalpha.stock.master.views.countdownbutton
      android:id="@+id/btn_get_check"
      android:layout_width="@dimen/login_btn_check_width"
      android:layout_height="@dimen/login_btn_check_height"
      android:layout_alignparentright="true"
      android:layout_centervertical="true"
      android:layout_marginbottom="@dimen/login_btn_check_margin_bottom"
      android:layout_margintop="@dimen/login_btn_check_margin_top"
      android:gravity="center"
      android:text="获取验证码"
      android:textcolor="@color/gray"
      android:textsize="@dimen/font_normal"
      app:defaultbackgroundresource="@drawable/btn_check_gray_shape"/>
    </relativelayout>
    <view
     android:id="@+id/line_check_num"
     android:layout_width="match_parent"
     android:layout_height="0.5dp"
     android:layout_below="@+id/rl_check_num"
     android:layout_centerhorizontal="true"
     android:layout_marginleft="25.3dp"
     android:layout_marginright="25.3dp"
     android:background="@color/driver_color"/>
   </relativelayout>
   <com.goldenalpha.stock.master.views.loadingbutton
    android:id="@+id/btn_phone_login"
    android:layout_width="@dimen/login_btn_phone_width"
    android:layout_height="@dimen/login_btn_phone_height"
    android:layout_gravity="center_horizontal"
    android:layout_margintop="23dp"/>
   <framelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margintop="23dp">
    <imageview
     android:id="@+id/tv_wx_login"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
     android:src="@drawable/wx_login_selector"/>
   </framelayout>
  </linearlayout>
 </relativelayout>
</relativelayout>

清单文件中的配置

<activity
  android:name=".activities.loginactivity"
  android:launchmode="singletask"
  android:screenorientation="portrait"
  android:theme="@style/apptheme"
  android:windowsoftinputmode="statehidden|adjustresize">
 </activity>

以上所述是小编给大家介绍的android实现背景可滑动登录界面 (不压缩背景弹出键盘)，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网