用 ConstraintLayout 解決鍵盤擋住輸入框及按鈕

Joe Tsai
Joe Blog
Published in
2 min readNov 28, 2017

前言

當你的產品需要輸入帳號密碼時,設計師又不想把輸入框做在鍵盤之上,沒ㄧ這時候必須處理推 View 的問題,網路上有太多種不能用的方法,這邊介紹一套自己實測可行的解法,主要就是設定 Manifest 及 佈局 XML 的時候有一些小撇步需要注意。

調整 Manifest 屬性

登入頁面通常不會使用 ActionBar/Toolbar,因此我們需要將 ActionBar 隱藏起來,並調整鍵盤佈局模式,將 manifest 設定如下:

Manifest 主要需要設定兩個屬性:

  1. theme:設定成 AppTheme.NoActionBar,注意不能使用全螢幕 Full Screen,不然這套方法是沒有用的!

也可以直接將 AppTheme 改為 Theme.AppCompat.Light.NoActionBar

2. windowSoftInputMode這個屬性是用來控制鍵盤彈跳的時機和佈局模式,把它調成 ”adjustResize|stateAlwaysHidden“。

XML 佈局

作法

如上圖,將 UI 佈局分為上下兩部分:

  • 上半部 Header:
    跟隨下半部移動,設定 layout_constraintBottom_toTopOf = “下半部“
  • 下半部 Footer:
    置底並設定 marginBottom

XML

這樣鍵盤彈起時,下半部的 View 就會顯示在鍵盤之上可用的區塊,不會再被隱藏在鍵盤之下了。

範例

簡單做了一個的範例:ShowEditText,有興趣的可以自行參考。

總結

以上就是我實際測試多種解法中,唯一可行的方法,希望有幫助到有這種需求的人,如果你有其他解法也歡迎留言提出來一起討論唷!

--

--