在我腦子裡還沒有Material Design這種概念，就我個人而言，PC端應用扁平化設計必須成為首選，手當其衝的兩款即時通訊旺旺和QQ早就完成UI扁平化的更新，然而客戶端扁平化的設計本身就存在天生的缺陷，手指和滑鼠箭頭最大的區別是在於前者有溫度和感覺的，好吧，能不能不要亂扯，這和Material Design有毛關係嗎，的確沒有，我想表達的還是Material Design會成為開發設計首選的一個趨勢。

關於Material Design，材料設計你大概已經知道了，它介於擬物於扁平（qq，旺旺PC端應用）之間的設計。Material Design有著自己的目標，不僅僅為了好看整體而已，它要讓不同裝置的螢幕表現出一直、美觀的視覺體驗以及互動。主要包括的控制元件有TabLayout、TextInputLayout、SwitchCompat、Card、SnackBar、BottomSheet、Shadows、FloatingActionButton、RecycleView、NavigationView....

之前知乎app的登入介面好像是這個效果。這裡我們就來體驗一下TextInputLayout的具體效果：最終的效果圖（在真機上有一定差距）如下：

這篇文章主要分為以下幾個部分

1. 首先通過nuget引入xamarin.android.design.widget 
2. TextInputLayout佈局
3. TextInputLayout文字框樣式修改
4. 通過單擊事件驗證TextInputLayout文字框錯誤的提示

nuget引入xamarin.android.design.widget 

TextInputLayout是設計相容包下的內容,Material Design僅支援android5.0及以上版本,當V7 AppCompat結合使用才能相容到android2.1。在引入design包時將自動引入V7相容包,就是引入Design即可如圖：

TextInputLayout佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:background="@color/color_primary">
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="30dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp">
    <TextView
      android:id="@+id/tvTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="50dp"
      android:gravity="center"
      android:text="登入"
      android:textSize="40sp"
      android:textColor="@color/color_white"/>
  <android.support.design.widget.TextInputLayout
    android:id="@+id/userNameContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/tvTitle"
    android:layout_marginTop="4dp">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:id="@+id/userName"
      android:inputType="textPassword"
      android:textColor="@color/color_white"
      android:textColorHint="@color/color_dedede"
      android:hint="userName"/>
  </android.support.design.widget.TextInputLayout>
    
  <android.support.design.widget.TextInputLayout
    android:id="@+id/passWordContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_below="@id/userNameContainer">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:id="@+id/passWord"
      android:inputType="textPassword"
      android:textColor="@color/color_white"
      android:hint="Password"/>
  </android.support.design.widget.TextInputLayout>
  <Button
    android:id="@+id/MyButton"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@id/passWordContainer"
    android:text="@string/Hello"/>
  </RelativeLayout>
</LinearLayout>
 

注意的是TextInputLayout內只能放TextView控制元件，並且不能單獨使用，只用佈局就可以實現這種獲取焦點hint上滑的動畫效果。當然這和你的介面要求還是有一定差距的，所以這TextView的一些樣式還需要自定義。

TextInputLayout文字框樣式修改

上面佈局的程式碼中可以發現，屬性textColorHint 並沒有效果,在style中設定才有效果。看一下Theme

  <style  name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">#ffffff</item>
    <item name="android:textColorHint">@color/color_dedede</item>
    <item name="colorControlNormal">@color/color_dedede</item> 
    <item name="colorControlActivated">@color/color_white</item>
  </style>

?colorAccent 是哪裡的顏色？是系統特定內容的顏色，類似的顏色statusBarColor、windowBackground，看這張圖你就明白了
文字沒有獲取焦點的文字顏色：android：textColorHint 下劃線沒有獲取焦點的顏色：colorControlNormal 下劃線獲取焦點的顏色：colorControlActivated TextInputLayout取值：不需要通過獲取TextView這樣的string userNameText = userName.EditText.Text;

通過事件驗證TextInputLayout文字框錯誤的提示

在客戶端必須的做欄位的驗證，所以我們通過TextView的TextChanged事件和FoucsChange事件來看看。

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            TextInputLayout userName = FindViewById<TextInputLayout>(Resource.Id.userNameContainer);
            TextInputLayout passWord= FindViewById<TextInputLayout>(Resource.Id.passWordContainer);
            passWord.EditText.TextChanged += (s, e) =>
            {
                System.Diagnostics.Debug.WriteLine(e.Start);
                System.Diagnostics.Debug.WriteLine(e.Text);
                if (e.Start > 8)
                {
                    passWord.ErrorEnabled = true;
                    passWord.Error = "密碼不能大於8位";
                }
                else
                {
                    passWord.ErrorEnabled = false;
                }
            };
            userName.EditText.FocusChange += (s, e) =>
            {
                if (!e.HasFocus)
                {
                    if (ValidateTel(userName.EditText.Text))
                    {
                        userName.ErrorEnabled = false;
                    }
                    else
                    {
                         userName.ErrorEnabled = true;
                        userName.Error = "userName不正確";
                    }
                }
            };
        }
        private bool ValidateTel(string tel)
        {
            string matchReg = "^1[3|4|5|7|8][0-9]{9}$";
            return System.Text.RegularExpressions.Regex.IsMatch(tel,matchReg);
        }

雖然你也可以在TextInputLayout自帶的屬性帶實現這個效果，那樣太死板了。如果你真的要寫在Xml檔案裡你可以這樣的，首先在根佈局中新增   xmlns:app="http://schemas.android.com/apk/res-auto" 使用自帶控制元件的屬性。常見的屬性： app:errorEnabled="true"
app:counterEnabled="true"
app:counterMaxLength="4"
app:counterTextAppearance="@style/style1" 預設的文字框顏色和大小 app:counterOverflowTextAppearance="@style/style1" 超出計數預設的文字框顏色和大小。還有一些樣式也可以通過TextInputlayout自帶的屬性設定

作者：張林

標題：仿知乎app登入介面(Material Design設計框架拿來就用TexnInputLayout

轉載隨意註明出處