CardView卡片式登录界面

【楔子】我们常为基本所有开发都要遇到的登录界面快速设计而犯愁，那么可以尝试一下卡片式控件，将需要的控件用卡片圈起来，使整个界面看起来十分舒爽。卡片式设计似乎天生就是为了应用程序而存在着的一种独特的设计风格。

如下就是卡片控件的功劳。

【准备工作】：在buildgradle（Modole:app）依赖添加

implementation 'com.android.support:cardview-v7:27.1.1'

【基本属性】：

app:cardBackgroundColor这是设置背景颜色 
app:cardCornerRadius这是设置圆角大小 
app:cardElevation这是设置z轴的阴影 
app:cardMaxElevation这是设置z轴的最大高度值 
app:cardUseCompatPadding是否使用CompatPadding 
app:cardPreventCornerOverlap是否使用PreventCornerOverlap 
app:contentPadding 设置内容的padding 
app:contentPaddingLeft 设置内容的左padding 
app:contentPaddingTop 设置内容的上padding 
app:contentPaddingRight 设置内容的右padding 

app:contentPaddingBottom 设置内容的底padding

【在布局里面使用】：

我们设计简单版卡片如下，同学们可以给卡片加一些点缀的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/backgd"
    android:gravity="center_horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Activity.LoginActivity">

    <!-- Login progress -->
    <android.support.v7.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="300dp"
        android:layout_height="350dp"
        android:layout_marginTop="50dp"
        app:contentPaddingTop="50dp"
        app:contentPaddingLeft="10dp"
        app:contentPaddingRight="10dp"
        android:orientation="vertical"
        app:cardCornerRadius="6dp"
        app:cardElevation="3dp"


        app:cardUseCompatPadding="true">


        <LinearLayout
            android:id="@+id/email_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <AutoCompleteTextView
                    android:id="@+id/email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_email"
                    android:inputType="textEmailAddress"
                    android:maxLines="1"
                    android:singleLine="true" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_password"
                    android:imeActionId="6"
                    android:imeActionLabel="@string/action_sign_in_short"
                    android:imeOptions="actionUnspecified"
                    android:inputType="textPassword"
                    android:maxLines="1"
                    android:singleLine="true" />

            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/email_sign_in_button"
                style="?android:textAppearanceSmall"
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                android:background="@drawable/bt_shape"
                android:text="@string/action_login"
                android:stateListAnimator="@drawable/state_listz"
                android:textStyle="bold" />

        </LinearLayout>
    </android.support.v7.widget.CardView>


    <ProgressBar
        android:id="@+id/login_progress"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:visibility="gone" />
</LinearLayout>

【使用TextInputLayout】TextInputLayout就是一个容器，里面只允许EditText子元素，它的动画效果是EditText里面的hint也就是提示字在输入的时候会漂浮到上头，看起来很动感。

【如何引入】添加依赖：

 implementation 'com.android.support:design:27.1.1'

目前之前添加依赖的compile全部在AS3.1里面过时，所以全部采用

 implementation

【现在我们来看下效果】：

可以看到Email上浮，提示字眼。而且卡片式的布局让界面清爽不会散落。