Android 5.0新特性

1. 瞭解Material Design

• 概念：融合卡片式，立體式的設計風格,強調層次感，動畫，陰影等元素
• 演示Android5.0 Demo
• Android UI樣式風格發展：2.3版本(黃色醜陋版)->4.0(Holo)->5.0(MaterialDesign)

2. 動態替換Theme

• 修改狀態列，ActionBar，介面背景，NavigationBar的顏色。讓Activity使用自定義的Theme。

  <style name="AppTheme" parent="@android:style/Theme.Material">
      <!--狀態列顏色-->
      <item name="android:colorPrimaryDark">#f00</item>
      <!--ActionBar顏色-->
      <item name="android:colorPrimary">#ff0</item>
      <!--介面背景顏色-->
      <item name="android:windowBackground">@color/colorWindowBackground</item>
      <!--導航欄顏色-->
      <item name="android:navigationBarColor">#00f</item>
  </style>
  
• 動態替換Theme的步驟：
  • 定義至少2套theme
  • 呼叫setTheme方法設定當前的theme，但是該方法要在setContentView之前，如:

    setTheme(mTheme);
    setContentView(R.layout.activity_main);
    

  • 設定了Theme，需要finish當前Activity，然後重啟當前Activity，讓Theme生效

    Intent intent = getActivity().getIntent();
    getActivity().finish();//結束當前的Activity
    getActivity().overridePendingTransition(0,0);//不要動畫
    startActivity(intent);

3. View的高度與陰影

• View新增屬性z軸，用來體現Material Design中的層次，影響因素2個：elevation 和 translationZ

  View高度 = elevation + translationZ

  • elevation表示view的高度，高度越大，陰影越大，可以在xml中直接使用屬性， 也可以在程式碼中使用view.setEvelvation();

    android:elevation="10dp"

  • transtionZ屬性表示view在Z方向移動的距離，一般用於屬性動畫中

    android:translationZ="10dp"

• 高度影響View的繪製順序，過去是按View新增順序繪製，先新增的先繪製，現在高度小的先繪製，因為高度小的，層級低，在下面， 高度相同的，按新增順序繪製
• 注意：
  • 如果View的背景色為透明，則不會顯示出陰影效果
  • 只有子View的大小比父View小時，陰影才能顯示出來

4. View的輪廓與裁剪(在Android5.1以及以上才有效果)

• View增加了輪廓概念,輪廓用來表示怎麼顯示陰影,也就是說輪廓什麼形狀，陰影就顯示什麼形狀。

  • View的輪廓可以通過outlineProvider屬性設定，預設是依據於background的，還有其他3個取值：bounds,none,paddingBounds

    android:outlineProvider="bounds"

    none：即使設定了evaluation也不顯示陰影
    background：按背景來顯示輪廓，如果background是顏色值，則輪廓就是view的大小，如果是shape，則按shape指定的形狀作為輪廓
    bounds: View的矩形大小作輪廓
    paddedBounds: View的矩形大小減去padding的值後的大小作輪廓。
    

  • 可以通過setOutlineProvider()方法自定義輪廓:

    tv_blue.setOutlineProvider(new ViewOutlineProvider() {
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0,0,
                        view.getWidth(),view.getHeight());
            }
        });

  • 注意：如果background是圖片，那隻能通過程式碼setOutlineProvider()來指定輪廓
• View的裁剪是指將View按照輪廓裁剪，能改變View的形狀，如圓形頭像：
  • 先設定輪廓:
  • 再設定根據輪廓裁剪View,目前只支援對矩形，圓形，圓角矩形的裁剪:

    //設定對View進行裁剪
    tv_clip.setClipToOutline(true);

5. Palette的使用

• 使用Palette可以讓我們從一張圖片中拾取顏色，將拾取到的顏色賦予ActionBar，StatusBar以及背景色可以讓介面色調實現統一
• 使用Palette需要新增以下依賴：

  compile 'com.android.support:palette-v7:23.0.0+'

• Palette提供的API

  • 傳入Bitmap即可獲取Palette物件,以下是同步和非同步使用方式:

    //同步獲取，需要在子執行緒中使用
    Palette palette = Palette.from(drawable.getBitmap()).generate();
    //非同步獲取，可以在主執行緒中使用
    Palette.from(drawable.getBitmap()).generate(new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(Palette palette) {
            //...
        }
    });

  • 得到Palette物件後，獲取其中的顏色，顏色對應如下：

    vibrant      -  有活力的顏色
    lightVibrant -  有活力的亮色
    darkVibrant  -  有活力的暗色
    muted        -  柔和暗淡的顏色
    lightMuted   -  柔和的亮色
    darkMuted    -  柔和的暗色

  • 獲取指定顏色的取樣物件，獲取取樣得到的顏色:

    //我們可以直接使用palette獲取指定顏色：
    palette.getLightMutedColor(defaultColor);
    
    //一般也可以先獲取取樣物件Swatch,從Swatch中獲取我們需要的顏色:
    //獲取有活力顏色的取樣物件
    Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();

  • 取樣物件Swatch提供了以下方法來獲取顏色：

    //swatch.getPopulation(): the amount of pixels which this swatch represents.
    //swatch.getRgb(): the RGB value of this color.
    //swatch.getHsl(): the HSL value of this color，即色相，飽和度，明度.
    //swatch.getBodyTextColor(): the RGB value of a text color which can be displayed on top of this color.
    //swatch.getTitleTextColor(): the RGB value of a text color which can be displayed on top of this color
    //一般會將getRgb設定給控制元件背景色，getBodyTextColor()設定給文字顏色
    textView.setBackgroundColor(vibrantSwatch.getRgb());
    textView.setTextColor(vibrantSwatch.getBodyTextColor());

6. 水波紋動畫，自定義水波紋動畫以及狀態選擇器動畫

• 首先，在Android5.0以上，點選效果預設自帶水波紋效果，並且有2種選擇：

  //矩形邊框水波紋
  android:background="?android:attr/selectableItemBackground"
  //無邊框限制水波紋
  android:background="?android:attr/selectableItemBackgroundBorderless"

• 自定義水波紋動畫

  • 使用ViewAnimationUtils建立圓形水波紋動畫，注意該動畫不能在Activity的onCreate方法中執行：

    Animator circularReveal = ViewAnimationUtils.createCircularReveal(text, 0, text.getHeight() , 1f, text.getWidth()*2);
    circularReveal.setDuration(1000);
    circularReveal.start();

  • 使用ripple標籤或者RippleDrawable可以更改控制元件水波紋動畫顏色：

    <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#00ff00">
    <item android:id="@android:id/mask" ><color android:color="#0000ff" />
    

• 定義帶有屬性動畫的狀態選擇器

  • 通過stateListAnimator屬性指定狀態選擇器的動畫：

    android:stateListAnimator="@drawable/selector_anim"

  • 狀態選擇器檔案中需要加入objectAnimator標籤：

    <selector  xmlns:android = "http://schemas.android.com/apk/res/android" >
    <item  android:statepressed = "true" >
    <objectAnimator  android:propertyName = "scaleX"
            android:duration = "@android:integer/configshortAnimTime"
            android:valueTo = "0.2"
            android:valueFrom = "1"
            android:valueType = "floatType" >
    	//...
    

  • 同樣，狀態選擇器動畫可以用程式碼方式載入

    //載入動畫
    AnimatorInflater.loadStateListAnimator();
    //設定動畫
    View.setStateListAnimator();
    

• 定義帶有幀動畫的狀態選擇器，需要設定給background屬性，不是stateListAnimator，如下所示:

  <animated-selector  xmlns:android = "http://schemas.android.com/apk/res/android" > 
  <item  android:id = "@+id/pressed"  android:drawable = "@drawable/drawableP" 
      android:state_pressed = "true" /> 
  <item  android:id = "@id/default" 
      android:drawable = "@drawable/drawableD" /> 
  <!-- 指定幀動畫 - -> 
  <transition  android:fromId = "@+id/default"  android:toId = "@+id/pressed" > 
      <animation-list> 
          <item  android:duration = "15"  android:drawable = "@drawable/dt1 " /> 
          <item  android:duration = "15"  android:drawable = "@drawable/dt2" /> 
          ... 
      </animation-list> 
   </animated-selector>

7. CardView的使用

• CardLayout擁有高度和陰影，以及輪廓裁剪，圓角等功能
• 各屬性說明:

  1.設定圓角：card_view:cardCornerRadius="10dp"
  2.設定高度：card_view:cardElevation="10dp"
  3.設定內邊距：card_view:contentPadding="10dp"
  4.設定背景色：card_view:cardBackgroundColor="?android:attr/colorPrimary"

8. RecyclerView的使用

• 先新增依賴 compile 'com.android.support:recyclerview-v7:23.1.1'
• 設定LayoutManager：控制RecyclerView如何顯示佈局,系統提供3個佈局管理器：
  • LinearLayoutManager：線性佈局，有橫向和豎直方向顯示
  • GridLayoutManager：網格佈局，有橫向和豎直方向顯示
  • StaggeredGridLayoutManager： 瀑布流佈局，有橫向和豎直方向顯示
• 然後給RecyclerView設定Adapter<RecyclerView.ViewHolder>
• 設定點選事件，由於RecyclerView沒有setOnItemClickListener，只能在Adapter中給View設定Click事件

9. ToolBar的使用

• 它用來代替ActionBar，但是比ActionBar更加靈活，相當於可以寫在佈局檔案中的ActionBar；與DrawerLayout的使用的時候，DrawerLayout可以覆蓋在ToolBar上，並且ToolBar和ActionBar不能同時使用
• 使用ToolBar的步驟：
  • 先隱藏ActionBar，可以繼承一個不帶ActionBar的Theme，如:

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

  • 然後在Activity中設定ToolBar替代ActionBar：

    setSupportActionBar(toolBar);

  • 最後設定ToolBar的顯示內容：

    toolBar.setTitle("ToolBar");//設定標題
    toolBar.setNavigationIcon(iconRes);//設定圖示
    toolBar.setOnMenuItemClickListener();//設定Menu Item點選

10. Android 5.0新特性的向下相容

• 可以通過Support Library使用的新特性可以向下相容，如：
  • RecyclerView (recyclerview-v7)
  • CardView (cardview-v7)
  • Palette顏色識別 (palette-v7)
  • ToolBar (appcompat-v7)
  • SwipeRefreshLayout (v4)
• 定義針對版本的資源目錄
  • layout：使用新API的佈局放在res/layout-v21中，其他的放res/layout
  • drawable：使用新屬性的drawable檔案放到 res/drawable-v21，其他的放 res/drawable
  • values: 新的主題放到 res/values-v21, 其他的放 res/values
• 在程式碼中對系統Version做判斷，使用對應的效果，如:

  if(Build.VERSION.SDK_INT> 21){
          //使用新動畫
          ...
      }

Android 6.0新控制元件

1. TextInputLayout的使用

• 高階炫酷帶有提示的輸入框，相當於輸入框中的戰鬥框
• 使用需要依賴design類庫：

  compile 'com.android.support:design:23.0.0+'

• 使用步驟：

  • 先在TextInputLayout中包裹一個EditText，如：

  • 然後給EditText新增文字變化監聽器：

     editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
    }
    
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    
    }
    
    @Override
    public void afterTextChanged(Editable s) {
        if(s.length() > 5){
            //設定錯誤提示資訊
            inputLayout.setError("不能超過5個");
            //啟用錯誤提示
            inputLayout.setErrorEnabled(true);
        }else{
            //關閉錯誤提示
            inputLayout.setErrorEnabled(false);
        }
    }
    });

2. FloatingActionButton的使用

• 總是能懸浮在介面上的Button，可以設定點選事件
• 使用需要依賴design類庫：

  compile 'com.android.support:design:23.0.0+'

• 可以設定以下屬性：

  app:fabSize="normal"//2個取值，normal=56dp,mini=48dp
  app:elevation="10dp"//高度
  app:rippleColor="#0000ff"//按下水波紋顏色
  app:pressedTranslationZ="20dp"//按下Z軸移動距離  
  注意：設定android:clickable="true"才有按下的效果
  

3. Snackbar的使用

• 一個介於Toast和Dialog之間的和使用者互動的控制元件，顯示在介面底部，並且可以設定點選行為，也可以滑動出去
• 在和FloatingActionButton一起使用時，需要讓CoordinatorLayout作為父佈局才能使FloatingActionButton給SnackBar騰出空間

4. TabLayout的使用

• 相當於ViewPagerIndicator的指示器效果，一般用來跟ViewPager結合使用
• 使用需要依賴design類庫：

  compile 'com.android.support:design:23.0.0+'

• 單獨使用TabLayout的步驟：
  • 先新增Tab，使用tabLayout.newTab()方法建立Tab：

    //1.新增Tab
    tabLayout.addTab(tabLayout.newTab().setText("Tab1"));

  • 給tabLayout設定tab改變的監聽器：

     //2.給tabLayout新增tab改變的監聽器
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            Log.e("TAG", "onTabSelected: "+tab.getText());
        }
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }
        @Override
        public void onTabReselected(TabLayout.Tab tab) {
        }
    });

  • 在xml中給TabLayout設定屬性：

    app:tabIndicatorColor="#00f"//橫線顏色
    app:tabSelectedTextColor="#f00"//選中字型顏色
    app:tabTextColor="#0f0"//預設字型顏色
    app:tabMode="fixed"//fixed：不能滑動，每個Tab平分寬度，scrollable:可以滑動tab，每個tab寬度很小，適用於tab很多的情景
    app:tabGravity="fill"//fill:平分寬度，center:讓tab居中,如果tabMode是scrollable，那tabGravity會被忽略
    

• 和ViewPager關聯使用步驟：
  • 先給ViewPager填充資料，然後關聯TabLayout和ViewPager：

    //給ViewPager填充資料
    viewpager.setAdapter(new MyAdapter());
    //關聯TabLayout和ViewPager
    tabLayout.setupWithViewPager(viewpager);

  • 需要注意的是，ViewPager的adapter的getPageTitle()方法的返回值將會設定給Tab的標題

5. CoordinatorLayout的使用

• 協調佈局，能夠協調多個佈局的位置關係，可以實現讓FAB上下滑動，展開或摺疊ToolBar，控制View擴充套件收縮以及放大縮小
• 使用需要依賴design類庫：

  compile 'com.android.support:design:23.0.0+'

• 使用它結合AppBarLayout實現向上滑動隱藏ToolBar的效果：
  • AppBarLayout會將包裹的所有子View作為一個整體的AppBar，有著統一的介面著色;
  • app:layout_scrollFlags屬性介紹：

    scroll:表示該View可以被滑動出CoordinatorLayout的範圍，所有想滾動出螢幕的view都需要設定這個flag， 沒有設定這個flag的view將被固定在螢幕頂部。例如，TabLayout 沒有設定這個值，將會停留在螢幕頂部
    enterAlways:表示任意向下的滾動都會導致該View可見
    exitUntilCollapsed:滾動退出螢幕，最後摺疊在頂端
    enterAlwaysCollapsed:當你的檢視已經設定minHeight屬性又使用此標誌時，你的檢視只能以最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度
    

  • 給想滑動出範圍的View設定屬性，比如ToolBar：

    app:layout_scrollFlags=”scroll|enterAlways

  • 給發出滑動行為的View設定屬性，比如ViewPager：

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

  • 實現步驟：

    1.CoordinatorLayout作根控制元件，包裹AppBarLayout和可滾動的控制元件，比如ViewPager  
    2.AppBarLayout包裹 ToolBar 及TabLayout，  
      ToolBar要滑動，給其設定app:layout_scrollFlags  
    3.ViewPager是發出滑動行為的控制元件，設定屬性 app:layout_behavior  
    注意：帶layout_scrollFlags的view需要放在固定View的前面，這樣滑動的view才能夠正常退出，而固定的view繼續留在頂部