Android 背景可滑動登錄界面
廢話不多說定庵，先看下實現(xiàn)后的效果：
實現(xiàn)思路
看到上邊 gif 圖的效果偶惠，主要列舉一下實現(xiàn)過程過程中遇到的難點募闲。
- 如何使鍵盤彈出時候不遮擋底部登錄布局挨厚；
- 當(dāng)鍵盤彈出的時候如何不壓縮背景圖片或者背景延伸至「屏幕以外」献宫；
從 「 windowSoftInputMode 」 說起
相信大家都清楚钥平，Google 官方提供給開發(fā)者控制軟鍵盤顯示隱藏的方法不多，「windowSoftInputMode」算是我們可控制的軟鍵盤彈出模式的方法之一姊途。關(guān)于其屬性的說明Google 官方和網(wǎng)上的教程說了很多涉瘾，他的屬性值由兩部分組成，形如「 stateHidden|adjustResize 」的格式捷兰，其前半部分（事實上也可寫在后邊）表示所設(shè)置的 Activity 進(jìn)入時軟鍵盤的狀態(tài)立叛，后半部分表示軟鍵盤彈出的時候頁面是如何調(diào)整的。
下邊分別列出幾個可選屬性及其含義：
| 屬性 | 含義 |
|---|---|
| stateUnspecified | 軟件彈出狀態(tài)為系統(tǒng)根據(jù)配置的頁面主題選擇默認(rèn)的設(shè)置贡茅，也就是說為默認(rèn)屬性值 |
| stateUnchanged | 軟鍵盤被保持無論它上次在該頁面的狀態(tài)秘蛇，也就是說退出該頁面的時候是可見或隱藏，當(dāng)主窗口出現(xiàn)在前面時仍然是值錢的狀態(tài)顶考。 |
| stateHidden | 首次創(chuàng)建進(jìn)入該頁面的時候赁还，軟鍵盤被隱藏。 |
| stateAlwaysHidden | 無論什么情況下進(jìn)入該頁面軟鍵盤總是隱藏狀態(tài)驹沿。 |
| stateVisible | 首次創(chuàng)建進(jìn)入該頁面的時候艘策，軟鍵盤顯示。 |
| stateAlwaysVisible | 無論什么情況下進(jìn)入該頁面軟鍵盤總是顯示狀態(tài)渊季。 |
| adjustUnspecified | 頁面適應(yīng)軟鍵盤彈起的時候默認(rèn)屬性朋蔫，它包括兩種情況罚渐，一種是頁面不可滾動的時候，他壓縮布局以保證獲取焦點的輸入框可見驯妄，一種是頁面可滾動的時候搅轿，他將向上滾動布局，直到輸入框可見富玷。 |
| adjustResize | 頁面總是調(diào)整屏幕的大小以便留出軟鍵盤的空間璧坟。這一屬性會重新繪制view |
| adjustPan | 設(shè)置成adjustPan的時候鍵盤會去找當(dāng)前界面的焦點，并始終焦點放在鍵盤的上方赎懦，使獲得焦點的view可見雀鹃。當(dāng)前窗口的內(nèi)容將自動移動以便當(dāng)前焦點從不被鍵盤覆蓋和用戶能總是看到輸入內(nèi)容的部分 |
通過上述列表我們可以了解到 windowSoftInputMode 的幾個屬性值的含義。我們可以根據(jù)具體的需求來選擇合適屬性励两。However ! 產(chǎn)品需求永遠(yuǎn)比屬性來的奇葩黎茎。比如說我們想要實現(xiàn)的的這個效果：
- 軟鍵盤彈出不遮擋全部的輸入布局,并不是單純的留出一個輸入框控件
- 軟鍵盤被彈起的時候背景不能被壓縮，或者向上滑動
首先看第一個需求：我們可以使用 adjustResize 屬性來達(dá)到效果当悔，可以看到這樣圖片已經(jīng)被自動向上移動了傅瞻，ok,如果效果您還算滿意，那我就沒什么好說的了盲憎，但是我們老板和產(chǎn)品以及 UI 說這樣不好嗅骄，背景不能壓縮也就是我們說的第二個需求。當(dāng)時我心中就有一種 mmp 想對他們說饼疙。但是呢作為一個敢于挑戰(zhàn)的 Android 程序員來說這個小小的需求并不算什么溺森。
對于第二個需求，首先我們要了解為什么圖片會被上滑窑眯，是因為我們配置了 adjustResize 屬性屏积，系統(tǒng)自動根據(jù)鍵盤所需要的空間向上移動整個頁面的布局，并調(diào)整頁面布局的大小以滿足不被軟鍵盤隱藏的效果磅甩。舉個栗子：
手機(jī)屏幕的高為1920px炊林，那么整個Activity的布局高度也為1920px。當(dāng)設(shè)置該屬性后點擊界面中的EditText卷要，此時彈出軟鍵盤其高度為800px渣聚。為了完整地顯示此軟鍵盤，系統(tǒng)會調(diào)整Activity布局的高度為1920px-800px=1120px却妨。
注意這里說了會調(diào)整布局的大小饵逐，根據(jù)以往的經(jīng)驗括眠，系統(tǒng)自動調(diào)節(jié)的布局都不是我們想要的結(jié)果彪标，比如各種可滑動 View 嵌套的問題。那么這個需求能否依據(jù)這個思路來結(jié)局呢掷豺？
當(dāng) windowSoftInputMode 被設(shè)置為 adjustResize 時候捞烟，當(dāng)布局調(diào)整的時候被調(diào)整的布局均會重繪制薄声，并走了
onMeasure，onSizeChanged题画，onLayout默辨。
當(dāng) windowSoftInputMode 被設(shè)置為 adjustPan 時候，當(dāng)布局調(diào)整的時候被調(diào)整的布局均會重繪制苍息，并走了onMeasure, onLayout缩幸。這里只需要注意 兩者都走了 onMeasure 方法，至于 adjustPan 沒走 onSizeChanged 竞思，我們會在之后關(guān)于軟鍵盤彈出的監(jiān)控的文章中詳細(xì)說明表谊。
那么我們就利用其走了 onMeasure 方法，來「阻止」系統(tǒ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)過這樣的設(shè)置我們就講背景 ViewPager 的高度寫死為屏幕的高度距辆。這樣當(dāng)鍵盤彈出的時候ViewPager 的大小就會變了。 經(jīng)過測試我們這個方法就就可以組織背景向上移動了暮刃。其實我們并沒有組織系統(tǒng)對控件的重繪跨算，而是改變了最終重繪的 ViewPager 的高度大小，給用戶的感覺就是我的背景沒有改變椭懊。
最后附送實現(xiàn)的布局代碼：
<?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="請輸入您的手機(jī)號碼"
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>
后來又讀者反映按照的方式鍵盤還是會將布局頂上去：
檢查自己的主題和代碼中是否設(shè)置了全屏模式（FullScreen）漂彤，因為如果設(shè)置了全屏模式的話 adjustResize 將失效，參考 Android How to adjust layout in Full Screen Mode when softkeyboard is visible 灾搏；
