对于android的界面来说,在Material Design问世之前,作为一个android开发人员,不得不承认,ios的某些控件带来的画面感要略胜一筹,但是自从Material Design出现,我们仿佛看到了android界面上的一大进步,首先我们来看看TextInputLayout的特点。
这个控件的意图很简单,它类似于scrollview,只能容许包含一个子布局,而且是EditText,它相当于是对EditText的一个动画的优化了,一方面是当我们点击EditText时,如果设置了hint,那么这个hint则会以动画的形式挤到输入的内容的上方,这对界面来说是一个很大的优点,它既保留了输入框应该有的提示,有添加了动画,下面我们看看具体怎么用。
首先,添加依赖:
compile 'com.android.support:appcompat-v7:25.2.0' compile 'com.android.support:design:25.2.0'
然后在这里界面的使用布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#e3e3e3" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/activity_horizontal_margin" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0.5" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:text="Welcome" android:textSize="30sp" android:textColor="#333333"/> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0.5" android:orientation="vertical"> <android.support.design.widget.TextInputLayout android:id="@+id/usernameWrapper" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/username" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="Username"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/passwordWrapper" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/usernameWrapper" android:layout_marginTop="4dp"> <EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:hint="Password"/> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/btn" android:layout_marginTop="4dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login"/> </LinearLayout> </LinearLayout>
要实现动画效果,我们需要在代码中调用sethint,如下:
TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper); TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper); usernameWrapper.setHint("Username"); passwordWrapper.setHint("Password");
最后的效果图如下: