Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕

我與bug不得不說的故事發表於2019-04-11
繼上文juejin.im/post/5caf30…Android Material Design控制元件使用(一)——ConstraintLayout 約束佈局

直接開衝

FloatingActionButton

1. 使用FloatingActionButton的情形

FAB代表一個App或一個頁面中最主要的操作,如果一個App的每個頁面都有FAB,則通常表示該App最主要的功能是通過該FAB操作的。

為了突出FAB的重要性,一個頁面最好只有一個FAB
使用的時候需要匯入desgin包,Android Studio 新版本都已經自動匯入了,這裡就不多說

 compile 'com.android.support:design:25.1.0'
複製程式碼

2. FloatingActionButton的大小一般有兩種大小(官方)

  1. 56 * 56dp :預設的大小,最常用的尺寸。
  2. 40 * 40 dp :Mini版。
    當然也是可以改變大小,不過一般使用

按鈕中間圖示大小官方推薦為

2424d*p

3.FloatingActionButton的屬性

FloatingActionButton是繼承ImageView,包含了ImageView的所有屬性,除此之外,還有幾個新增加的特殊屬性,需要使用名稱空間來使用。

引入名稱空間:xmlns:app="http://schemas.android.com/apk/res-auto"

屬性名說明
elevation陰影的高度
fabSizeFAB的大小,為normal時,大小為:56 * 56dp ,為mini時,大小為: 40 * 40 dp
backgroundTintFAB的背景顏色
rippleColor點選FAB時,形成的波紋顏色

TextInputEditText

介紹

TextInputEditTextEditText的子類,相當於完善了有些EditText的缺點

當我們的介面處於全屏時,點選一個EditText,預設情況下不是在它下面彈出鍵盤,而是進入到輸入法的一個全屏的輸入介面(通過配置android:imeOptions=”flagNoExtractUi”可以設為直接在當前介面顯示)

如果我們給EditText 套上了一個TextInputLayout時,TextInputLayout會拿到EditTexthint顯示出來並把EditText本身的hint設為空.這樣我們在全屏的輸入介面上,就顯示不出來我們設定hint,因此TextInputEditText重寫了EditText

TextInputLayout

介紹

這個佈局其實是與EditText連用,可以實現密碼框的顯示與隱藏,和點選輸入的時候,會將提示文字浮現在上方

Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕
屬性
屬性名說明
app:Theme設定下劃線或其他的顏色屬性
android.support.design:counterEnabled是否顯示計數器
android.support.design:counterMaxLength設定計數器的最大值,與counterEnabled同時使用
android.support.design:counterTextAppearance計數器的字型樣式
android.support.design:counterOverflowTextAppearance輸入字元大於我們限定個數字符時的字型樣式
android.support.design:errorEnabled是否顯示錯誤資訊
android.support.design:errorTextAppearance錯誤資訊的字型樣式
android.support.design:hintAnimationEnabled是否顯示hint的動畫,預設true
android.support.design:hintEnabled是否使用hint屬性,預設true
android.support.design:hintTextAppearance設定hint的文字樣式(指執行動畫效果之後的樣式)
android.support.design:passwordToggleDrawable設定密碼開關Drawable圖片,於passwordToggleEnabled同時使用
android.support.design:passwordToggleEnabled是否顯示密碼開關圖片,需要EditText設定inputType
android.support.design:passwordToggleTint設定密碼開關圖片顏色
android.support.design:passwordToggleTintMode設定密碼開關圖片(混合顏色模式),與passwordToggleTint同時使用

總結:大概就是這樣的,有問題歡迎留言討論;


相關文章