Android實(shí)現(xiàn)背景可滑動(dòng)登錄界面 (不壓縮背景彈出鍵盤)
廢話不多說,先看下實(shí)現(xiàn)后的效果:
實(shí)現(xiàn)思路
看到上邊 gif 圖的效果,主要列舉一下實(shí)現(xiàn)過程過程中遇到的難點(diǎn)。
如何使鍵盤彈出時(shí)候不遮擋底部登錄布局;
當(dāng)鍵盤彈出的時(shí)候如何不壓縮背景圖片或者背景延伸至「屏幕以外」;
從 「 windowSoftInputMode 」 說起
相信大家都清楚,Google 官方提供給開發(fā)者控制軟鍵盤顯示隱藏的方法不多,「windowSoftInputMode」算是我們可控制的軟鍵盤彈出模式的方法之一。關(guān)于其屬性的說明Google 官方和網(wǎng)上的教程說了很多,他的屬性值由兩部分組成,形如「 stateHidden|adjustResize 」的格式,其前半部分(事實(shí)上也可寫在后邊)表示所設(shè)置的 Activity 進(jìn)入時(shí)軟鍵盤的狀態(tài),后半部分表示軟鍵盤彈出的時(shí)候頁(yè)面是如何調(diào)整的。
下邊分別列出幾個(gè)可選屬性及其含義:
通過上述列表我們可以了解到 windowSoftInputMode 的幾個(gè)屬性值的含義。我們可以根據(jù)具體的需求來選擇合適屬性。However ! 產(chǎn)品需求永遠(yuǎn)比屬性來的奇葩。比如說我們想要實(shí)現(xiàn)的的這個(gè)效果:
軟鍵盤彈出不遮擋全部的輸入布局,并不是單純的留出一個(gè)輸入框控件
軟鍵盤被彈起的時(shí)候背景不能被壓縮,或者向上滑動(dòng)
首先看第一個(gè)需求:我們可以使用 adjustResize 屬性來達(dá)到效果,可以看到這樣圖片已經(jīng)被自動(dòng)向上移動(dòng)了,ok,如果效果您還算滿意,那我就沒什么好說的了,但是我們老板和產(chǎn)品以及 UI 說這樣不好,背景不能壓縮也就是我們說的第二個(gè)需求。當(dāng)時(shí)我心中就有一種 mmp 想對(duì)他們說。但是呢作為一個(gè)敢于挑戰(zhàn)的 Android 程序員來說這個(gè)小小的需求并不算什么。
對(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。
注意這里說了會(huì)調(diào)整布局的大小,根據(jù)以往的經(jīng)驗(yàn),系統(tǒng)自動(dòng)調(diào)節(jié)的布局都不是我們想要的結(jié)果,比如各種可滑動(dòng) View 嵌套的問題。那么這個(gè)需求能否依據(jù)這個(gè)思路來結(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 沒走 onSizeChanged ,我們會(huì)在之后關(guān)于軟鍵盤彈出的監(jiān)控的文章中詳細(xì)說明。
那么我們就利用其走了 onMeasure 方法,來「阻止」系統(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)過這樣的設(shè)置我們就講背景 ViewPager 的高度寫死為屏幕的高度。這樣當(dāng)鍵盤彈出的時(shí)候ViewPager 的大小就會(huì)變了。 經(jīng)過測(cè)試我們這個(gè)方法就就可以組織背景向上移動(dòng)了。其實(shí)我們并沒有組織系統(tǒng)對(duì)控件的重繪,而是改變了最終重繪的 ViewPager 的高度大小,給用戶的感覺就是我的背景沒有改變。
最后附送實(shí)現(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="請(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>
以上所述是小編給大家介紹的Android實(shí)現(xiàn)背景可滑動(dòng)登錄界面 (不壓縮背景彈出鍵盤),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Android模擬器對(duì)應(yīng)的電腦快捷鍵說明
Android模擬器對(duì)應(yīng)的電腦快捷鍵說明,需要的朋友可以參考一下2013-06-06Android編程獲取手機(jī)后臺(tái)運(yùn)行服務(wù)的方法
這篇文章主要介紹了Android編程獲取手機(jī)后臺(tái)運(yùn)行服務(wù)的方法,涉及Android針對(duì)系統(tǒng)服務(wù)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12Android中實(shí)現(xiàn)用命令行同步網(wǎng)絡(luò)時(shí)間
這篇文章主要介紹了Android中實(shí)現(xiàn)用命令行同步網(wǎng)絡(luò)時(shí)間,本文講解使用BusyBox實(shí)現(xiàn)同步網(wǎng)絡(luò)時(shí)間,并給出了詳細(xì)操作步驟,需要的朋友可以參考下2015-07-07Android計(jì)時(shí)器控件Chronometer應(yīng)用實(shí)例
這篇文章主要為大家詳細(xì)介紹了Android計(jì)時(shí)器控件Chronometer應(yīng)用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09Android Studio 3.3.2 正式版的安裝教程圖解
這篇文章主要介紹了Android Studio 3.3.2 正式版的安裝教程圖解,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2020-02-02Android-如何將RGB彩色圖轉(zhuǎn)換為灰度圖方法介紹
本文將詳細(xì)介紹Android-如何將RGB彩色圖轉(zhuǎn)換為灰度圖方法,需要了解更多的朋友可以參考下2012-11-11Android開發(fā)實(shí)現(xiàn)瀏覽器全屏顯示功能
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)瀏覽器全屏顯示功能,涉及Android布局修改及相關(guān)屬性動(dòng)態(tài)設(shè)置操作技巧,需要的朋友可以參考下2017-09-09Android TreeView實(shí)現(xiàn)帶復(fù)選框樹形組織結(jié)構(gòu)
這篇文章主要為大家詳細(xì)介紹了Android TreeView實(shí)現(xiàn)帶復(fù)選框樹形組織結(jié)構(gòu),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07