android.support.design.widget包下的CoordinatorLayout、AppBarLayout、TextInputLayout、FloatingActionButton、

          在前不久的谷歌2015 I/O大會上，釋出了Android新版本M，在這次的I/O大會上谷歌對Android并沒有很大的改變，主要是修改完善之前Android L版本。不過在谷歌推出Material Design設計風格之後，還是做了很多風格上的相容，比如v7包的 RecyclerView，CardView，Palette等，這次的I/O大會上也繼續完善了MD設計支援庫，這次谷歌推出了Android Design Support Library 庫，全面支援MD設計風格的UI效果。Design Support Library庫吸收了8 個新的 material design 元件！最低支援 Android2.1，其實很多元件都是Github上比較火的，隻是谷歌把它官方化了，便于開發者使用。今天我們來學習FloatingActionButton，TextInputLayout，Snackbar，TabLayout 四種控件。

使用android.support.design下的類要在build.gradle中配置如下代碼

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.android.support:cardview-v7:22.2.0'
    compile 'com.android.support:palette-v7:22.2.0'
    compile 'de.hdodenhof:circleimageview:1.3.0'
}      

代碼如下：

package com.example.administrator.test;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LinearLayout layout;
    private FloatingActionButton button;
    private Button button_tableLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = (LinearLayout) findViewById(R.id.layout);
        button = (FloatingActionButton) findViewById(R.id.button);
        button_tableLayout = (Button) findViewById(R.id.button_tableLayout);

        button.setOnClickListener(this);
        button_tableLayout.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.button: //FloatingActionButton and Snackbar

                //Snackbar提供了一個介于Toast和AlertDialog之間輕量級控件，它可以很友善的提供消息的提示和動作回報
                Snackbar.make(layout, "Hello,I am Snackbar................................." +
                        "....................................................................." +
                        ".................osfjalkjlkjflkjxzlkjlk", Snackbar.LENGTH_LONG).setAction(

                        "取消", new View.OnClickListener() {

                            @Override
                            public void onClick(View v) {

                            }
                        }
                ).show();
                break;

            case R.id.button_tableLayout: //TabLayout

                Intent intent = new Intent(this,TabLayoutActivity.class);
                startActivity(intent);
                break;
        }

    }
}      

Xml布局如下：

<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:orientation="vertical"
              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=".MainActivity"
    android:id="@+id/layout">

    <!-- -->
    <android.support.design.widget.TextInputLayout
        style="@style/textInputlayout"
        app:hintTextAppearance="@style/edit_hint">

        <EditText
            style="@style/edit"
            android:hint="使用者名"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        style="@style/textInputlayout"
        android:layout_marginTop="10dp"
        app:hintTextAppearance="@style/edit_hint">

        <EditText
            style="@style/edit"
            android:hint="手機号碼"/>
    </android.support.design.widget.TextInputLayout>

    <!-- -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:fabSize="mini"
        app:backgroundTint="#0000FF"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:fabSize="normal"
        app:backgroundTint="#FF0000"/>

    <Button
        android:id="@+id/button_tableLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TableLayout"/>

</LinearLayout>
      

Style如下：

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- 标題欄顔色 -->
    <item name="colorPrimary">#FFFFFF</item>
    <!--狀态欄背景色-->
    <item name="colorPrimaryDark">#3A5FCD</item>
    <!-- EditText光标和原始邊框顔色 -->
    <item name="colorAccent">#FF0000</item>
    <!-- 整個應用中編輯框字型提示的顔色 -->
    <item name="android:textColorHint">#AEAEAE</item>
    <!--Activity背景色-->
    <item name="android:windowBackground">@android:color/white</item>
</style>

<!-- TextInputLayout布局樣式 -->
<style name="textInputlayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:background">@drawable/shape_edit_grey</item>
    <item name="android:textSize">16sp</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:paddingLeft">10dp</item>
    <item name="android:paddingRight">10dp</item>
    <item name="android:paddingTop">5dp</item>
</style>

<!-- EditText 布局樣式 -->
<style name="edit">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <!--<item name="android:textCursorDrawable">@null</item>-->
    <item name="android:background">@null</item>
</style>      

有不懂的可以和我交流 QQ：619285112