怎么在Android應(yīng)用中實(shí)現(xiàn)一個(gè)背景可滑動(dòng)的登錄界面效果

發(fā)布時(shí)間：2020-12-04 16:06:18 來(lái)源：億速云閱讀：233 作者：Leah 欄目：移動(dòng)開(kāi)發(fā)

怎么在Android應(yīng)用中實(shí)現(xiàn)一個(gè)背景可滑動(dòng)的登錄界面效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

實(shí)現(xiàn)思路

主要列舉一下實(shí)現(xiàn)過(guò)程過(guò)程中遇到的難點(diǎn)。

如何使鍵盤彈出時(shí)候不遮擋底部登錄布局；

當(dāng)鍵盤彈出的時(shí)候如何不壓縮背景圖片或者背景延伸至「屏幕以外」；

從「 windowSoftInputMode 」說(shuō)起

相信大家都清楚，Google 官方提供給開(kāi)發(fā)者控制軟鍵盤顯示隱藏的方法不多，「windowSoftInputMode」算是我們可控制的軟鍵盤彈出模式的方法之一。關(guān)于其屬性的說(shuō)明Google 官方和網(wǎng)上的教程說(shuō)了很多，他的屬性值由兩部分組成，形如「 stateHidden|adjustResize 」的格式，其前半部分（事實(shí)上也可寫在后邊）表示所設(shè)置的 Activity 進(jìn)入時(shí)軟鍵盤的狀態(tài)，后半部分表示軟鍵盤彈出的時(shí)候頁(yè)面是如何調(diào)整的。

下邊分別列出幾個(gè)可選屬性及其含義：

通過(guò)上述列表我們可以了解到 windowSoftInputMode 的幾個(gè)屬性值的含義。我們可以根據(jù)具體的需求來(lái)選擇合適屬性。However ! 產(chǎn)品需求永遠(yuǎn)比屬性來(lái)的奇葩。比如說(shuō)我們想要實(shí)現(xiàn)的的這個(gè)效果：

軟鍵盤彈出不遮擋全部的輸入布局,并不是單純的留出一個(gè)輸入框控件

軟鍵盤被彈起的時(shí)候背景不能被壓縮，或者向上滑動(dòng)

首先看第一個(gè)需求：我們可以使用 adjustResize 屬性來(lái)達(dá)到效果，可以看到這樣圖片已經(jīng)被自動(dòng)向上移動(dòng)了，ok,如果效果您還算滿意，那我就沒(méi)什么好說(shuō)的了，但是我們老板和產(chǎn)品以及 UI 說(shuō)這樣不好，背景不能壓縮也就是我們說(shuō)的第二個(gè)需求。當(dāng)時(shí)我心中就有一種 mmp 想對(duì)他們說(shuō)。但是呢作為一個(gè)敢于挑戰(zhàn)的 Android 程序員來(lái)說(shuō)這個(gè)小小的需求并不算什么。

怎么在Android應(yīng)用中實(shí)現(xiàn)一個(gè)背景可滑動(dòng)的登錄界面效果

對(duì)于第二個(gè)需求，首先我們要了解為什么圖片會(huì)被上滑，是因?yàn)槲覀兣渲昧?adjustResize 屬性，系統(tǒng)自動(dòng)根據(jù)鍵盤所需要的空間向上移動(dòng)整個(gè)頁(yè)面的布局，并調(diào)整頁(yè)面布局的大小以滿足不被軟鍵盤隱藏的效果。舉個(gè)栗子：

手機(jī)屏幕的高為1920px，那么整個(gè)Activity的布局高度也為1920px。當(dāng)設(shè)置該屬性后點(diǎn)擊界面中的EditText，此時(shí)彈出軟鍵盤其高度為800px。為了完整地顯示此軟鍵盤，系統(tǒng)會(huì)調(diào)整Activity布局的高度為1920px-800px=1120px。
注意這里說(shuō)了會(huì)調(diào)整布局的大小，根據(jù)以往的經(jīng)驗(yàn)，系統(tǒng)自動(dòng)調(diào)節(jié)的布局都不是我們想要的結(jié)果，比如各種可滑動(dòng) View 嵌套的問(wèn)題。那么這個(gè)需求能否依據(jù)這個(gè)思路來(lái)結(jié)局呢？

當(dāng) windowSoftInputMode 被設(shè)置為 adjustResize 時(shí)候，當(dāng)布局調(diào)整的時(shí)候被調(diào)整的布局均會(huì)重繪制，并走了onMeasure，onSizeChanged，onLayout 。

當(dāng) windowSoftInputMode 被設(shè)置為 adjustPan 時(shí)候，當(dāng)布局調(diào)整的時(shí)候被調(diào)整的布局均會(huì)重繪制，并走了onMeasure, onLayout 。

這里只需要注意兩者都走了 onMeasure 方法，至于 adjustPan 沒(méi)走 onSizeChanged ，我們會(huì)在之后關(guān)于軟鍵盤彈出的監(jiān)控的文章中詳細(xì)說(shuō)明。
那么我們就利用其走了 onMeasure 方法，來(lái)「阻止」系統(tǒng)自動(dòng)調(diào)整的布局大小。由于我們背景用了 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;
}

經(jīng)過(guò)這樣的設(shè)置我們就講背景 ViewPager 的高度寫死為屏幕的高度。這樣當(dāng)鍵盤彈出的時(shí)候ViewPager 的大小就會(huì)變了。經(jīng)過(guò)測(cè)試我們這個(gè)方法就就可以組織背景向上移動(dòng)了。其實(shí)我們并沒(méi)有組織系統(tǒng)對(duì)控件的重繪，而是改變了最終重繪的 ViewPager 的高度大小，給用戶的感覺(jué)就是我的背景沒(méi)有改變。

最后附送實(shí)現(xiàn)的布局代碼：

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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"
      
      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="請(qǐng)輸入您的手機(jī)號(hào)碼"
      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="請(qǐng)輸入驗(yàn)證碼"
      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="獲取驗(yàn)證碼"
      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>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

怎么在Android應(yīng)用中實(shí)現(xiàn)一個(gè)背景可滑動(dòng)的登錄界面效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽