Android Design支援包控件介紹

Android5.0是有史以來最重要的安卓版本之一，這其中有很大部分要歸功于material design的引入，這種新的設計語言讓整個安卓的使用者體驗煥然一新。歌官方推出Material Design 設計理念已經有段時間了，為支援更友善的實作Material Design設計效果，官方給出了Android support design library 支援庫，讓開發者更容易的實作材料設計的效果。這篇文章将介紹常用的一下幾種控件。

1、CoordinatorLayout

用新的思路通過協調排程子布局的形式實作觸摸影響布局的形式産生動畫效果。繼承自framlayout，是framlayout的擴充類，比他功能更加強大，能夠支援很多絢麗的效果，一般作為父布局。

2、CollapsingToolbarLayout

用來對Toolbar進行再次包裝的ViewGroup,主要是用于實作折疊，伸縮的App Bar效果。它需要放在AppBarLayout布局裡面，并且作為AppBarLayout的直接子View，主要是提供一個可折疊的Toolbar容器，對容器中的不同View設定layout_collapseMode折疊模式，來達到不同的折疊效果。作為AppBarLayout的子布局進行配合使用。通常有兩個子控件，一個是ImageView，一個是Toobar，Toobar主要是用來替換ActionBar的，是以在使用之前首先要隐藏掉。可以通過代碼的方式隐藏，也可以通過配置檔案的方式，還可以通過清單檔案配置隐藏：

（1）在我們的styles.xml檔案中的AppTheme标簽中加入如下兩行：

<item name="windowActionBar">false</item>

<item name="windowNoTitle">true</item>

（2）在清單檔案中加入

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

相關屬性設定如下：

app:contentScrim="@android:color/holo_blue_dark";//titebar的背景顔色

app:title="趙麗穎";//titlebar所展示的字型

app:scrimAnimationDuration="50";//該屬性控制toolbar收縮時，顔色變化的動畫持續時間。即顔色變為contentScrim所指定的顔色進行的動畫所需要的時間。

app:expandedTitleGravity="bottom|right";//titebar展開後字型顯示的位置

app:collapsedTitleGravity="center_horizontal";//titlebar到最上邊時候的顯示位置

app:titleEnabled="true";//是否顯示标題文本

app:expandedTitleMargin="20dp";//展開之後的文字margin

android:fitsSystemWindows="true";//預留白間，能夠實作沉浸式狀态欄效果

app:layout_collapseParallaxMultiplier="0.7";//設定視差的系數，介于0.0-1.0之間。越大視差越大

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar";//主題顔色

app:layout_scrollFlags="scroll|exitUntilCollapsed";//支援滑動收縮效果

子類可收縮的View:

app:layout_collapseMode="parallax";//View随着控件的滑動而收縮

Toolbar：

app:layout_collapseMode="pin";//pin收縮後固定于最頂端，parallax随着控件滑動收縮而收縮

3、AppBarLayout

AppBarLayout主要用來設定頭布局，繼承自linearlayout，他包含CollapsingToolbarLayout子布局和其他布局，CollapsingToolbarLayout能夠實作視差伸縮滑動效果，其他子布局一般是導航欄，例如TabLayout。

4、TabLayout

TabLayout：類似于viewpagerindicator，radiobutton+viewpager，實作葉簽滑動效果http://blog.csdn.net/yoonerloop/article/details/70766002點選打開連結

5、CardView

CardView是在安卓5.0提出的卡片式控件。

app:cardBackgroundColor="#6699FF";//設定頁籤的背景

app:cardCornerRadius="7dp";//設定頁籤的圓角大小

app:cardElevation="7dp";//設定頁籤的陰影背景大小

app:cardMaxElevation="10dp"//設定z軸的最大高度值

app:cardUseCompatPadding="true";//相容android5.0以上版本兩個卡片之間的距離失效問題

android:clickable="true";//點選産生水波紋效果

padding設定：

app:contentPadding 設定内容的padding

app:contentPaddingLeft 設定内容的左padding

app:contentPaddingTop 設定内容的上padding

app:contentPaddingRight 設定内容的右padding

app:contentPaddingBottom 設定内容的底padding

6、FloatingActionButton

android:layout_gravity="end|bottom";//在布局上的顯示 位置

app:borderWidth="0dp";//按鈕内邊框陰影帶邊框大小

app:backgroundTint="#f00";//按鈕圖檔外圍顔色

app:elevation="6dp";//按鈕外邊框陰影帶的大小

app:pressedTranslationZ="52dp";//點選後陰影擴散的效果

app:rippleColor="#33728dff";//按鈕邊框陰影的顔色,預設取的是theme中的colorControlHighlight。

android:clickable="true";//點選産生水波紋效果

7、NestedScrollView

和ScrollView一樣，差別是對新的控件做了一些相容，類似于listview與recycleView。

8、NavigationView

NavitationView就是DrawerLayout側邊欄的那個菜單。這個菜單整體上分為兩部分，上面一部分叫做HeaderLayout，下面的那些點選項都是menu。HeaderLayout是一個布局，根據需求設定，menu主要是每個item。

android:layout_gravity="left"屬性表示該View是左邊的滑出菜單。

app:headerLayout="@layout/header_layout";//表示引用一個頭布局檔案。

app:menu="@menu/main";//表示引用一個menu作為下面的點選項item。

app:itemIconTint="@color/blue";//辨別為圖檔設定顔色，預設是灰色。

navigationView.setItemIconTintList(null); //設定圖檔顔色為圖檔顯示的預設顔色

app:theme="@style/MenuTextStyle";//設定item字型大小，背景顔色等等主題

menu設定：

<item

    android:id="@+id/file"

    android:icon="@mipmap/ic_launcher"

    android:title="設定"/>

android:icon="@mipmap/ic_launcher";//設定item的左邊圖示

android:title="設定";//設定item右側文字

預設沒有分割線，如果需要分割線則需要在item外層嵌套一個<group android:id="@+id/g1"></group>，并加上id.

 View headerView = navigationView.getHeaderView(0);//擷取頭布局的第一個控件

//設定item點選事件

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {  

    @Override  

    public boolean onNavigationItemSelected(MenuItem item) {  

        //在這裡處理item的點選事件  

        return true;  

    }  

});  

9、BottomNavigationView

BottomNavigationView是Google推出的底部導航欄元件,在沒有這些底部導航元件之前,開發者多使用的是RadioGroup，他的用法和上面的NavitationView比較類似，看看他的屬性：

app:itemIconTint是設定底部導航按鈕圖示顔色的屬性

app:itemTextColor是設定底部導航按鈕文字顔色的屬性

xml中的布局如下：

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.glidedemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:itemIconTint="@drawable/tab_text_color_selector"
        app:itemTextColor="@drawable/tab_text_color_selector"
        app:menu="@menu/navigation">
    </android.support.design.widget.BottomNavigationView>
</LinearLayout>
           

menu檔案夾和上面的也很類似：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_one"
        android:icon="@drawable/tab_text_color_selector"
        android:title="綜合"/>

    <item
        android:id="@+id/tab_two"
        android:icon="@drawable/tab_text_color_selector"
        android:title="本地"/>

    <item
        android:id="@+id/tab_three"
        android:icon="@drawable/tab_text_color_selector"
        android:title="我的"/>
</menu>
           

在Activity中點選事件的切換的監聽如下：

mNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        mTextView.setText(item.getTitle().toString().toUpperCase());
                        return true;
                    }
                });
    }
           

注意：這控件有以下坑：

1、底部導航欄高度預設是 56dp。

2、菜單元素隻能是 3~5 個。如果個數少于3個或者多于5個，則會報錯。

3、菜單元素如果大于3個，會出現切換時選中菜單的放大效果，無法設定，隻能通過反射取消。

4、底部導航欄背景顔色預設是目前樣式的背景色（白色/黑色），你可以使用 app:itemBackground="@android:color/black" 來更改。

10、TextInputLayout

它是一種新的繼承自LinearLayout的布局,讓我們使用時裡面隻能包含一個EditText或者其子類的控件,該布局可以通過設定hint和Error顯示浮動标簽。如下：

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="呵呵哒"
            android:inputType="phone"/>
    </android.support.design.widget.TextInputLayout>
           

android:hint="呵呵哒";//浮動的标簽設定，可以設定在EditText上面，也可以用設定在TextIn；putLayout上面，但是隻能設定一個；

app:hintEnable="false"；//關閉浮動标簽(預設是開啟的)

app:hintAnimationEnabled="boolean";//設定浮動标簽顯示與隐藏之間的過渡動畫(預設是開啟的)

app:counterEnabled="true";

app:counterMaxLength="11";//兩個結合可以讓使用者看到自己目前輸入的長度，當超過指定長度會提示

app:passwordToggleEnabled="true" //設定密碼可見與否的圖示，預設是關閉的

app:passwordToggleDrawable="@mipmap/ic_launcher"；//設定指定密碼可見與否的圖示

app:passwordToggleTint="@color/colorAccent"；//給圖示加顔色

app:hintTextAppearance="@style/hint"；//自定義浮動标簽顔色大小等

app:errorTextAppearance="@style/error"；//自定義錯誤标簽顔色大小等

以上均在TextInputLayout标簽下面添加，而不是EditText

監聽虛拟鍵盤，輸入法下一項，光标定位到密碼輸入框：

使用者名EditText中加入：

android:imeActionId="@+id/password" 

android:imeOptions="actionNext"

密碼EditText中加入：

android:imeActionId="@+id/button"

android:imeOptions="actionDone"

監聽：

  mPasswordEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {

            @Override

            public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {

                if ( id == EditorInfo.IME_ACTION_DONE) {

                    startLogin();

                    return true;

                }

                return false;

            }

        });

以上就是material design包中常用的控件，以後還會陸續補充，關于這些新控件的應用見下一篇博文：點選打開連結

http://blog.csdn.net/yoonerloop/article/details/71411499