1. 程式人生 > >軟鍵盤彈出頂起佈局的小技巧

軟鍵盤彈出頂起佈局的小技巧

在安卓開發中我們會很頻繁的和軟鍵盤打交道,但是軟鍵盤本來是不屬於我們的佈局的,它的出現會遮擋佈局,比如,佈局中有一個EditText是位於底部的,點選之後彈出軟鍵盤,如果我們不做任何處理,那軟鍵盤必然會將EditText遮擋,這是很糟糕的效果,該怎麼避免呢?

首先我想到了Activity的windowSoftInputMode屬性,這個屬效能影響兩件事情:
1、當有焦點產生時,軟鍵盤是隱藏還是顯示
2、是否改變活動主視窗大小以便騰出空間展示軟鍵盤
它有以下值可以設定:
1、stateUnspecified:軟鍵盤的狀態並沒有指定,系統將選擇一個合適的狀態或依賴於主題的設定
2、stateUnchanged:當這個activity出現時,軟鍵盤將一直保持在上一個activity裡的狀態,無論是隱藏還是顯示
3、stateHidden:使用者選擇activity時,軟鍵盤總是被隱藏
4、stateAlwaysHidden:當該Activity主視窗獲取焦點時,軟鍵盤也總是被隱藏的
5、stateVisible:軟鍵盤通常是可見的
6、stateAlwaysVisible:使用者選擇activity時,軟鍵盤總是顯示的狀態
7、adjustUnspecified:預設設定,通常由系統自行決定是隱藏還是顯示
8、adjustResize:該Activity總是調整螢幕的大小以便留出軟鍵盤的空間
9、adjustPan:當前視窗的內容將自動移動以便當前焦點從不被鍵盤覆蓋,並且使用者總能看到輸入內容的部分
可以設定一個或多個,多個之間用|分開。這些值中符合我們要求的是adjustResize和adjustPan。先看adjustPan,它會將當前獲取了焦點的EditText之上的佈局整體上移,以此來達到EditText不被軟鍵盤覆蓋的目的。但如果我只想讓EditText和與EditText有關的一些控制元件上移,而它們之上的控制元件保持不變呢?OK,這時候我們就需要用到adjustResize,但是光用它還是不夠的,還需要我們的佈局配合。

我的需求如下:
1、佈局的上半部分放一個視訊播放器,可以實現簡單的視訊播放功能;
2、佈局的下半部分有包括EditText在內的佈局
3、點選EditText,要求包括EditText在內的佈局均被軟鍵盤頂起,而視訊播放的佈局不被擠壓

實現效果如下
這裡寫圖片描述

本人技術粗糙,佈局寫的不太好,但基本效果算是實現了(這裡有用到點選EditText外部,隱藏鍵盤的小技巧,想要理解的請移步我的另一篇部落格http://blog.csdn.net/k_bb_666/article/details/78805971),還有需要優化的地方,希望各位看官多提意見!直接上程式碼吧!
1、在清單檔案中給相應的Activity設定windowSoftInputMode屬性

        <activity
            android:name=".activity.VideoPublishActivity"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustResize|stateHidden" />

2、佈局檔案

<?xml version="1.0" encoding="utf-8"?>
//最外層必須是RelativeLayout,才能保證佈局被頂起
<RelativeLayout
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="#fff" tools:context="com.daishu.copperman.activity.VideoPublishActivity">
//軟鍵盤彈出時,這個佈局不動,且視訊播放正常,不被擠壓變形 //這層套FrameLayout是為了防止播放視訊的佈局被擠壓 <FrameLayout android:id="@+id/fl_video_play" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/rl_title"> //我在這裡動態添加了播放器 <RelativeLayout android:id="@+id/rl_video_play" android:layout_width="match_parent" android:layout_height="360dp" android:background="#f2f2f2"> </RelativeLayout> </FrameLayout> //以下是需要被軟鍵盤頂起的佈局 <LinearLayout android:id="@+id/ll_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" //想要頂起的佈局必須居於底部 android:background="#fff" android:orientation="vertical"> <EditText android:id="@+id/et_publish_title" android:layout_width="match_parent" android:layout_height="50dp" android:background="@null" android:gravity="start" android:hint="請輸入標題(30字以內)" /> <com.zhy.view.flowlayout.TagFlowLayout android:id="@+id/id_flowlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="15dp" zhy:max_select="1" /> <Button android:id="@+id/btn_publish" style="?android:attr/borderlessButtonStyle" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="3" android:background="@drawable/shape_publish_btn" android:gravity="center" android:text="釋出" android:textColor="#2e2e2e" android:textSize="14sp" /> </LinearLayout> </RelativeLayout>

我們總結一下(敲黑板!劃重點!)
1、最外層佈局必須是相對佈局RelativeLayout(保證只頂起部分佈局,而不是將整個介面上移);
2、需要在承載視訊播放器的佈局外套一層FrameLayout(保證佈局頂起時視訊不被擠壓);
3、將想要頂起的佈局居於底部(保證此部分佈局被全部頂起);

做到這三點就可以簡單實現軟鍵盤彈出,將佈局頂起,且不擠壓視訊播放的效果了,本人文筆不好,且技術比較糙,希望寫下的東西能幫助到大家!也希望大家多提意見!謝謝!

相關推薦

鍵盤佈局技巧

在安卓開發中我們會很頻繁的和軟鍵盤打交道,但是軟鍵盤本來是不屬於我們的佈局的,它的出現會遮擋佈局,比如,佈局中有一個EditText是位於底部的,點選之後彈出軟鍵盤,如果我們不做任何處理,那軟鍵盤必然會將EditText遮擋,這是很糟糕的效果,該怎麼避免呢?

鍵盤佈局

我這個情況比較單一,可能跟某些需求不一樣,僅供參考; 我的需求是這樣的,底部放一個按鈕,點選的時候,從底部彈出一個佈局,點選佈局中的輸入框的時候軟鍵盤彈起,但是軟鍵盤不能遮擋這個佈局,需要將這個佈局頂上去,就是第三張圖的效果; 但是經過我測試後發現結果是隻

HTML 在手機鍵盤影響頁面佈局

H5在手機端,尤其是安卓手機,如果用了定位或者用了百分比的元素,很容易在鍵盤彈起後引起頁面錯亂,其中分2種情況: **情況1:**在頁面中用了position: fixed; bottom: 0;。把元素定位在頁面的底部,可是這時候鍵盤彈起後,該定位元素也會跟著鍵盤一起彈起。網上大多數答

h5頁面 在安卓手機端鍵盤頁面佈局的解決辦法

var oHeight = $(document).height();     $(window).resize(function(){ //ios軟鍵盤彈出不會觸發resize事件         if($(document).height() < oHeight){             $("#

Android 鍵盤時把佈局上去,控制元件亂套解決方法

解決辦法:方法一:在你的activity中的oncreate中setContentView之前寫上這個程式碼getWindow().setSoftInputMode(WindowManager.Lay

Android鍵盤時把佈局頂上去的解決方法

轉載: 解決Andriod軟鍵盤出現把原來的佈局給頂上去的方法(轉) 連結:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 決方法,在mainfest.xml中,對那個Activity加: <acti

轉載2——Android鍵盤時把佈局頂上去的解決方法

女神鎮樓 原文: 解決Andriod軟鍵盤出現把原來的佈局給頂上去的方法(轉) 連結:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 決方法,在mainfest.xml中,對那個Activity加: <ac

Android鍵盤時把佈局控制元件頂上去的解決方法

在有的佈局中,軟體盤輸入內容時,會把底下的佈局控制元件給頂上去。如何不讓其被頂上去呢?android:windowSoftInputMode activity主視窗與軟體盤的互動模式,可以用來避免輸入法面板遮擋問題,Android1.5後的一個新特性。 它的設定必須

關於android鍵盤將edittext問題

最近在做即時通訊型別的app,介面搭建發現的難點: 1.專案需求,軟鍵盤自動將edittext控制元件所在佈局頂起; 2.類似於微信,點選右下角的加號,彈出軟鍵盤並不會將功能佈局頂起; 3.監聽edittext,當有內容的時候,改變加號圖示為傳送; 4.監聽軟鍵盤的

android 鍵盤 佈局上移動

這是軟體盤和actiivty主視窗搶空間造成的,需在AndroidManifest.xml裡為activity配置windowSoftInputMode屬性併為其選擇屬性值。 如下: <activity android:name="...Activity" a

Android筆記:鍵盤遮蓋原來介面的佈局控制元件

給Activity設定軟鍵盤出現與Activity之間的互動模式: 1.在onCreat中的setContent方法之前寫入: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJ

鍵盤佈局與edittext一起上移

 Androidmanifest的activity設定成 <activity android:name="com.lvcaiye.yingji.im.ChattingActivity" android:windowSoftInputMo

Android 鍵盤佈局位置改變

具體情況如下: ScrollView 裡面有EditText RelativeLayout 裡面有按鈕button 點選Edittext發現button頂上去了 查了網路資料,大家的方法大多是android:windowSoftInputMode="adjustPan" 

android 鍵盤 佈局上移動

這是軟體盤和actiivty主視窗搶空間造成的,需在AndroidManifest.xml裡為activity配置windowSoftInputMode屬性併為其選擇屬性值。 如下: <act

Android聊天介面監聽鍵盤聊天記錄跟著上去

專案中做了個聊天介面,就一個介面懶得扒框架,順手擼了。 最後被提了個Bug,彈出輸入法鍵盤擋住了一部分聊天記錄,如下 看了微信就不會這樣,尋思是不是改改佈局就可以。 結果,一直以為是動態改變recyclerview的高度,配合佈局,把recyclerview頂上去。 各種

關於html頁面移動端鍵盤時影響頁面佈局的問題

html頁面在手機上寫了input框的時候,手機的軟鍵盤會彈出,會將頁面推上去,頁面佈局會改變,要在頁面寫如下程式碼: $(document).ready(function () {   $('body').height($('body')[0].clientHeight)

安卓移動端鍵盤問題解決方案

log logs 情況 sel clas scrollto refs ext 題解 移動端開發難免拿到輸入框居中或者位於底部的情況,ios 端,軟鍵盤能夠按正常預期向上滑動(這裏有個問題,當 input 聚焦時,彈出軟鍵盤,input 上滑,此時屏幕是具有滾動效果的,還沒找

解決 安卓手機 鍵盤 布局的問題

bsp doc html document 軟鍵盤 cti nbsp lur script 一、 js <script type="text/javascript">$(‘body,html‘).height(document.body.clientHeig

解決安卓手機上鍵盤擠壓背景的問題

彈出 鍵盤 color col 軟鍵盤 func class div res demo: // 解決本頁面軟鍵盤彈窗背景擠壓的問題 var clientHeight = document.documentElement.clientHeight || documen

Android鍵盤,覆蓋h5頁面輸入框問題

問題 過多 繼承 col 鍵盤 代碼 chrom 技術 fff 之前我們在使用vue進行 h5 表單錄入的過程中,遇到了Android軟鍵盤彈出,覆蓋 h5頁面 輸入框 問題,在此進行回顧並分享給大家: 系統:Android 條件:當輸入框在可視區底部或者偏下的位置 觸發