Android的MaterialDesign應用方法有哪些

這篇文章主要介紹“Android的MaterialDesign應用方法有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Android的MaterialDesign應用方法有哪些”文章能幫助大家解決問題。

1:上滑 頂部背景圖片緩慢消失，標題懸浮

1.1：CoordinatorLayout中設置

　　前面的添加依賴，在上一篇中已經說過，在這就不在重復了，協調者布局中這次又加入了一個新的布局CollapsingToolbarLayout（折疊工具欄布局），很明顯上面的效果圖中的工具欄上滑的同時把圖片折疊進去了，這是一個動畫效果，如果不是MaterialDesign庫的強大，這都是我們自己寫。我們來分析一下效果圖中都用到了什么，只看帶顏色的有文字，和一個蘋果背景圖、還有一個懸浮按鈕（吸附在CollapsingToolbarLayout的右下角）。我們來分析一下主要代碼

最外層-->里層還是：CoordinatorLayout-->AppBarLayout-->CollapsingToolbarLayout。竟然折疊的部分是toolbar和背景圖片，這就理所應當的把這兩個空間寫在CollapsingToolbarLayout中，因為上面協調者布局和appbar布局很簡單，這里就不在寫了，只貼出折疊布局代碼（里面的注釋有貼出后加的，用該代碼時要注意語法）。這里可以看出我在ImageView中加入了高度180dp，這里是一定要加上的，否側toolbar的會出現以下幾種錯誤，1:文字不顯示。2：只顯示標題欄。3：圖片過大充滿整個屏幕。當然這些問題不是每個人都有的。

<!--折疊toolbar布局--><android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/toolbar_layout"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"><!--這里ContentScrim是實現上滑后由什么顏色作為標題背景色--><ImageView
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:scaleType="fitXY"    //圖片顯示方式，鋪滿xy軸
                android:src="@drawable/img1" /><android.support.v7.widget.Toolbar
                android:id="@+id/id_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize" /></android.support.design.widget.CollapsingToolbarLayout>

寫到這才是我們的折疊布局了，還有我們的懸浮按鈕FloatingActionButton，標紅的是重點。

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/add"app:layout_anchor="@id/toolbar_layout"//固定在哪個控件
        app:layout_anchorGravity="bottom|right"//的具體位置/>

 寫到這里基本上完成了，代碼少，效果好正是該庫的強大，在Activity中的使用基本和上一篇是一樣的。對于這個懸浮按鈕里面也有很多屬性，這里就不在一一寫出了，這里只是作為一個輔助，讓我們在視覺更舒服所加的。

2：在標題 上欄加入布局，放一些搜索框

2.1：布局書寫

這里的布局和上面是一樣的，只是把imageview換成了LinearLayout布局，在該布局中寫上我們熟悉的輸入框和圖片按鈕即可，

最外層-->里層還是：CoordinatorLayout-->AppBarLayout-->CollapsingToolbarLayout-->LinearLayout。

3:輸入框TextInputEditText的使用

在最平常的時候，我們寫輸入框，要加正則表達式來判斷是哪一行出現不符合要求的數據，然后用一個toast來提示用戶，這就顯得用戶體驗極差，有的用戶還沒看完toast就關掉了，而且具體哪一行錯誤也沒有標紅，這就很尷尬了，那么今天這個控件也是一個輸入框，但是外層加一個布局（TextInputLayout），就可以達到精確到一行提示具體錯誤。

TextInputLayout是22.2.0新添加的控件， 要和EditText(或EditText的子類）結合使用，并且只能包含一個EditText(或EditText的子類）。

一般情況下，EditText獲得光標的時候hint會自動隱藏，這樣不是很友好。這時候TextInputLayout則是顯示錯誤，TextInputLayout是LinearLayout的子類，用于輔助顯示提示信息。當EditText獲取得光標的時候，EditText的hint會自己顯示在上方，并且有動畫過渡。

現在僅僅是過度效果，還沒有加提示信息，用法很簡單，但注意一點TextInputLayout只能包含一個TextInputEditText，如果寫用戶名和密碼那就寫兩個TextInputLayout，哦，對了這個最外層布局倒和協調者布局沒多大關系，隨便一個線性布局即可。

  <android.support.design.widget.TextInputLayout        android:id="@+id/id_inputtext"android:layout_width="match_parent"
        android:layout_height="wrap_content"><android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="用戶名" /></android.support.design.widget.TextInputLayout>

這里要注意的是Id是加在 TextInputLayout上，在Activity中獲取也是獲取的layout，那么怎么獲取edittext輸入的數據呢，有方法的。

viewById.getEditText().addTextChangedListener(this);

 獲取里面的text文本并且添加文本變化監(jiān)聽，這里要實現三個方法

public void afterTextChanged(Editable s) //內容改變后調用

 這兩個方法簡單demo上都用不到，這里就不過多解釋了。

@Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

 這里我們重點看afterTextChanged方法,這里只給第一個控件加上了該監(jiān)聽(對比)。

 @Override
    public void afterTextChanged(Editable s) {
        if(s.length()<4){
            viewById.setError("必須大于4位");
            viewById.setErrorEnabled(true);
        }else {
            viewById.setErrorEnabled(false);
        }
    }

關于“Android的MaterialDesign應用方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。