融云即时通讯集成和textinputlayout登录界面

1. 实现 TextInputLayout
第一步: 创建一个新的项目

在Android Studio中 选择New > New project 。填入所需的信息然后创建项目。我的例子的target api是17，这是Design Support Library支持的最小api版本。这个级别的api基本上已经支持绝大多数设备了。我把主activity命名为LoginActivity，它的布局文件命名为activity_login.xml。

创建完项目之后，在主activity中把Android Studio自动产生的onCreateOptionsMenu 和onOptionsItemSelected方法删掉。我们要创建的登陆界面不需要菜单所以删掉这些方法是ok的。记得也删掉res/menu目录中的XML 菜单文件。
第二步 :导入Support Library

要使用TextInputLayout控件，你需要导入两个Library。第一个是appcompat-v7,它确保material style可以向后兼容。第二个是Design Support Library。在你的build.gradle文件中，添加如下依赖：

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])

        compile 'com.android.support:design:22.2.0'
        compile 'com.android.support:appcompat-v7:22.2.0'
    }
第三步 :设计用户界面

这个项目的用户界面非常简单。它显示了一个“欢迎”文字（可以很容易替换成logo什么的）与两个EditText元素，一个是为用户名准备的，一个是为密码准备的。布局中还包含了一个触发登陆流程的按钮。背景颜色是扁平风格的灰色。

另一个重要的细节是记得正确设置EditText的inputType属性。第一个EditText的inputType应该设置成textEmail，而第二个应该设置成textPassword。下面是布局的样子：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:background="#e3e3e3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/activity_horizontal_margin"
        tools:context=".LoginActivity"
        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">

            <EditText
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"/>

            <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"/>

            <Button
                android:id="@+id/btn"
                android:layout_marginTop="4dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Login"/>

        </LinearLayout>

    </LinearLayout>
你可能还想去掉app bar，也就是过去说的actionbar，编辑style.xml文件：

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
第四步: 使用TextInputLayout

我们总算到了本教程最有趣的部分。TextInputLayout控件和LinearLayout完全一样，它只是一个容器。跟ScrollView一样，TextInputLayout只接受一个子元素。子元素需要是一个EditText元素。

    <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>
注意这里我在EditText中指定了另一个参数，hint。就如你知道的，这个属性允许你在EditText的内容为空的时候显示一个自定义的提示。一旦用户开始输入，hint会消失。这并不理想，因为用户丢失了他们输入信息的上下文提示。

有了TextInputLayout，这将不再是问题。一个单一的EditText 在输入文字的时候会隐藏hint，而被包含在TextInputLayout中的EditText则会让hint变成一个在EditText上方的浮动标签。同时还包括一个漂亮的material动画。

接下来，我们对password输入框做同样的事情。

    <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>
第五步: 设置 Hints

下面是setContentView方法，初始化对theTextInputLayout视图的引用。

    final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
    final TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);
要让浮动标签动起来，你只需设置一个hint，使用setHint方法：

    usernameWrapper.setHint("Username");
    passwordWrapper.setHint("Password");