Material Design 經常使用控件

Material Design

Material Design (原質化/材料化設計) 是在2014年Google I/O大會上推出的一套全新的界面設計語言。

意在解決Android平臺界面風格不統一調的問題。

1.SwipeRefreshLayout (下拉刷新)

SwipeRefreshLayout 用來實現下拉刷新

把要實現下拉刷新的控件放置到 SwipeRefreshLayout 中，eg:

<android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/activity_main_swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ListView
                android:id="@+id/activity_main_lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </android.support.v4.widget.SwipeRefreshLayout>

刷新事件：

swipeRefresh.setColorSchemeResources(R.color.colorPrimaryDark); //設置進度條顏色
        //刷新事件
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                /**
                 * 更新操做
                */
              
                //當執行完更新操做後，隱藏進度條
                swipeRefresh.setRefreshing(false);
            }
        });

SwipeRefreshLayout 的 set Refreshing() 方法傳入 false，用於表示刷新事件結束，並隱藏刷新進度條

2.Toolbar

優勢：繼承了ActionBar的全部功能，並且靈活性很高。

Android studio 建立的項目默認是帶ActionBar的，咱們須要修改 res>values>styles.xml 文件，來不使用ActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

佈局文件中添加Toolbar：

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

?attr/actionBarSize :》》 ？attr 表示使用當前樣式(主題)中定義的對應屬性值，默認值是56dp, 能夠點進去看看

android :theme : 》》 toolbar 使用深色主題

app:popupTheme :》》 menu菜單設置爲淡色主題 ；app 目的是爲了兼容低版本手機

獲取實例傳入實例 ： setSupportActionBar(toolbar) 很重要要否則不顯示

Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
        toolbar.setTitle("Title");
        setSupportActionBar(toolbar);

2.2Toolbar 來顯示更多內容:

右擊res目錄 ->New->Directory, 建立一個menu 菜單。右擊menu文件夾->New->Menu resource file, 建立一個toolbar.xml文件，並寫入以下代碼：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/item_back"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item_delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/item_setting"
        android:icon="@drawable/ic_settings"
        android:title="Setting"
        app:showAsAction="never"/>
</menu>

showAsAction 有如下幾種值能夠選則：

always表示永遠顯示在Toolbar中，若是屏幕空間不夠則不顯示；

if Room表示屏幕空間足夠的話顯示在Toolbar中，不夠的話就顯示在菜單當中；

never 則表示永遠顯示在菜單當中。默認是never。

注意：Toolbar 中的action按鈕只會顯示圖標，菜單中的action按鈕只會顯示文字

重寫 onCreateOptionsMenu 和 onOptionsItemSelected 方法來實現建立菜單和菜單點擊事件：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //MenuInflater 菜單填充器
        getMenuInflater().inflate(R.menu.main,menu);
        return true; //表示是否顯示菜單
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //根據不一樣的 itemId 執行不一樣操做
        switch (item.getItemId()){
            case R.id.item_delete:
                toast("You clicked delete!");
                break;
            case R.id.item_setting:
                toast("You clicked setting!");
                break;
        }
        return true;
    }

效果圖：

另外還有一個就是Home箭頭顯示 和 Icon 顯示

//顯示Home箭頭(返回箭頭)
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        
        //設置圖標
        getSupportActionBar().setIcon(R.mipmap.ic_launcher);

點擊事件：

@Override
    public boolean onSupportNavigateUp() {
        toast("Back!");
        return super.onSupportNavigateUp();
    }

效果圖：

Menu 也能夠顯示 Submenu：

效果圖：

實現的時候只須要在Item中在嵌套一層 Menu就能夠，Menu：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:id="@+id/menu_item1" android:title="Item1">
        <menu>
            <group android:checkableBehavior="none">
                <item
                    android:id="@+id/menu_item1_item1"
                    android:title="Item1_submenu1"/>
                <item
                    android:id="@+id/menu_item1_item2"
                    android:title="Item1_submenu1"/>
            </group>
        </menu>
    </item>

    <item android:id="@+id/menu_item2" android:title="Item2"/>
    <item android:id="@+id/menu_item3" android:title="Item3"/>
</menu>

3.DrawerLayout (側滑菜單)

經過 DrawerLayout 來實現滑動菜單 ，這個控件由 support-v4庫提供。

這個佈局容許放入兩個直接子控件(佈局),第一個是主屏幕中顯示的內容，第二個是滑動菜單中的顯示內容。

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tiger.materialdesigntest.MainActivity">

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:titleTextColor="@color/myWhite"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

  </RelativeLayout>

  <LinearLayout
      android:layout_gravity="left"
      android:orientation="vertical"
      android:background="#fff"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <TextView
        android:text="Text1"
        android:textSize="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="Text2"
        android:textSize="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  </LinearLayout>

</android.support.v4.widget.DrawerLayout>

效果圖：

須要注意：

第二個子控件(佈局) 必須指定 layout_gravity 屬性(沒有智能提示)，來設置側滑菜單實在屏幕的那邊顯示。

3.2 顯示和隱藏側滑菜單

final DrawerLayout  mDrawerLayout=(DrawerLayout)findViewById(R.id.activity_main_drawerLayout);
        //顯示側滑菜單
        mDrawerLayout.openDrawer(Gravity.LEFT);
        //隱藏側滑菜單
        mDrawerLayout.closeDrawer(Gravity.LEFT);

4.NavigationView

5.SwitchCompat

屬性	描述
showText： true/false	決定是否顯示開關按鈕上的文字
switchPadding	文字和開關的最小距離
trackTintMode	軌道樣式
trackTint	軌道顏色
thumb	引用主題顏色
switchMinWidth	開關寬度
thumbTint	開關上按鈕的顏色
textOff	設置按鈕關閉狀態顯示的文字
textOn	設置按鈕打開狀態顯示的文字
thumbTintMode	按鈕樣式
theme	主題

關於主題：

在styles.xml 添加新的style ，再經過 app:theme="@style/MySwitch"，指定主題

<style name="MySwitch" parent="Theme.AppCompat.Light">
        <!--開啓時的顏色-->
        <item name="colorControlActivated">@color/colorPrimary</item>
        <!--關閉時的顏色-->
        <item name="colorSwitchThumbNormal">@color/switch_color</item>
        <!--關閉時的軌跡顏色取30%的顏色-->
        <item name="android:colorForeground">@color/switch_color</item>
    </style>

注意：有些 屬性不能正常顯示，須要使用 app:attribute 的形式來賦值

6. FloatingActionButton (懸浮按鈕)

FloatingActionButton 看起來有立體效果的按鈕 ,

<android.support.design.widget.FloatingActionButton
    android:id="@+id/faBtn"
    android:src="@drawable/ic_done"
    app:elevation="8dp"
    android:layout_margin="20dp"
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

屬性	描述
app:elevation	陰影大小，默認6dp
backgroundTint	背景色

app:elevation ： 陰影大小

指定一個高度值，高度值越大，投影範圍也越大，可是投影效果越淡，高度值越小，投影範圍也越小，可是投影效果越濃。其實看起來差異也不大。

7.Snackbar

更好的提示工具-----Snackbar

Snackbar並非Toast 的替代品，他們二者之間各有個的特色。

Toast更多的是提示信息，告訴用戶發生了什麼，而Snackbar則擴展了更多的功能，它容許在提示當中加入一個可交互的按鈕，以便執行一些額外的邏輯操做。

應用場景：當刪除一條記錄後，若是用戶想要撤銷，那就能夠用到Snackbar。
​ 效果圖：

var snackbar = Snackbar.make(v!!, "Delete successfully.", Snackbar.LENGTH_LONG)
        .setAction("Undo") {
            toast("Data restored!")
        }

snackbar.setActionTextColor(Color.BLUE) // Action Button 文本顏色
snackbar.view.setBackgroundColor(Color.RED) // 背景色
snackbar.view.findViewById<TextView>(R.id.snackbar_text).setTextColor(Color.YELLOW) //文本顏色
snackbar.view.findViewById<Button>(R.id.snackbar_action).setAllCaps(false) // Action Button 顯示小寫

snackbar.show() // 彈出

在設置顏色時，大部分是不可以直接設置的，都是經過獲取整個View而後在獲取單個控件進行賦值。

8.CoordinatorLayout

CoordinatorLayout 是一個增強版的FrameLayout，由Design Support 提供。

**實現了多種Material Design中提到的滾動效果**

CoordinatorLayout 會自動監聽全部子控件的各類事件，而後自動幫助咱們作出最爲合理的相應。

eg: 只須要改變外部佈局爲CoordinatorLayout

注意到效果了吧，懸浮按鈕自動向上偏移了Snackbar的同等高度，從而保證不會被遮擋住。當Snackbar消失時，懸浮按鈕會回到原先位置。

更多請參考：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

---

---

9.CardView

CardView是實現卡片式佈局的重要控件，由appcompat-v7庫提供。

實際上CardView也是一個FrameLayout ，知識額外提供了圓角和陰影等效果，看上去會有立體的感受。

**添加依賴引用 compile 'com.android.support:cardview-v7:25.3.1'**

<android.support.v7.widget.CardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    app:cardCornerRadius="4dp"
    app:cardElevation="5dp">
    <TextView
        android:text="TextView"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>

app:cardCornerRadius="4dp" 圓角弧度，數值越大哦，弧度越大

app:cardElevation="5dp" 陰影大小，數值越大，陰影越大

效果圖：

10.TextInputLayout

使用：直接將EdieText放到 TextInputLayout 中就能夠，

意在解決Android平臺界面風格不統一調的問題。

<android.support.design.widget.TextInputLayout
    android:id="@+id/activity_test_textinputlayoutusername"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/activity_test_scrollView">
    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"/>
</android.support.design.widget.TextInputLayout>

效果圖：

11.BottomNavigationView

它是官方提供的底部導航欄，最大支持顯示5個Item。

添加控件：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/layout_weChat_bnv"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="#f5f2f2"
    android:layout_alignParentBottom="true"
    app:menu="@menu/navigationview_menu"/>  //指定Menu

建立Menu指定Items：

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

選中項改變事件：

bnv.setOnNavigationItemSelectedListener(  ...)

設置選中項：

bnv.setSelectedItemId(R.id.bnv_chat);  //須要指定Menu  Id

經常使用屬性：

屬性	描述
app:itemBackground	導航欄的背景色
app:itemIconTint	導航欄中圖片的顏色
app:itemTextColor	導航欄文字顏色
app:menu	使用Menu的形式爲指定導航欄元素

當Item 超過3個時會出現動畫，經過反射取消動畫：

學習自：https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode

// 超過三個Menu後取消動畫
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {

            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);

            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

13.TabLayout

TabLayout 提供了一個水平的佈局來展現Tabs.

屬性	描述
app:tabSelectedTextColor	選中項字體顏色
app:tabTextColor	未選中項字體顏色·
app:tabIndicatorColor	指示器下標顏色
app:tabIndicatorHeight	指示器下標顏色
app:tabMode	Tab模式：默認fixed(固定的)，scrollable(能夠滑動的)
app:tabMinWidth	每一個 Tab 最小寬度
app:tabMaxWidth	每一個 Tab 最大寬度

13.1 添加 Tab：

(1) 直接在佈局文件中添加 android.support.design.widget.TabItem

(2) con_tabLayout.addTab(con_tabLayout.newTab().setText("Tab 1").setIcon(R.drawable.me_press))

13.2 設置默認選中

con_tabLayout.getTabAt(3)!!.select()

13.3 事件監聽

con_tabLayout.addOnTabSelectedListener(object:TabLayout.OnTabSelectedListener{

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
    }
})