Material Design之UI（上）

MaterialDesign是google在Android(Lollipop/5.0)中推出的新的设计语言，谷歌希望由此来统一各种平台上的用户体验，Material Design的特点是干净的排版和简单、扁平化的布局，以此来突出内容。
一、theme
在项目中使用MaterialDesignTheme：设置应用的targetSdkVersion为21，在style.xml中自定义theme继承android:Theme.Material，AndroidManifest中设置Application或者Activity的theme。google官方提供了三种Material Design样式：Theme.Material、Theme.Material.Light、Material.Light.DarkActionBar。低版本兼容性：Material Design主题只有在API级别为21以上才可使用，低版本如果要使用需要创建value－21资源目录，使用Material Design风格主题，在其他版本使用v7的Theme.AppCompat主题。
这个网站可以生成Material ThemeColor的xml：www.materialpalette.com/teal/teal
 
二、Transition
在5.0之前，activity跳转的时候，如果需要设置一个动画，我们通常可以通过overridePendingTransition(int enterAnim, int exitAnim)来设置一个B的进入动画和A的退出动画，但是这种方式是针对页面全局的元素。所以5.0以后Api提供了Transition动画。
系统提供的四种动画场景：
(1)setExitTransition() - 当A start B时，使A中的View退出场景的transition

(2)setEnterTransition() - 当A start B时，使B中的View进入场景的transition

(3)setReturnTransition() - 当B 返回 A时，使B中的View退出场景的transition

(4)setReenterTransition() - 当B 返回 A时，使A中的View进入场景的transition
系统提供的动画效果：
explode（分解）—— 进入/退出从屏幕中间移动视图；
slide（滑动）——进入/退出从屏幕边沿石洞视图；
fade（淡出）——通过改变屏幕上视图的不透明度达到进入/退出视图的效果
过渡动画：
要使用transition需要在values-21下的style定义theme

<style 
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowEnterTransition">@android:transition/explode</item>
        <item name="android:windowExitTransition">@android:transition/explode</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

  在要退出的activity setcontentView之前设置退出动画

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode()); 

 要进入的activity里设置进入动画

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode()); 

 startActivity的时候需要加上第二个参数Bundle

startActivity(intent,ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle());

 元素共享动画:
1、需要在theme中加入windowContentTransitions=true以及共享元素进入和退出的动画windowSharedElementEnterTransition、windowSharedElementExitTransition
2、退出和进入的activity里某个元素同一个transitionName

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:foreground="?android:attr/selectableItemBackground"
    android:orientation="vertical"
    android:transitionName="CardViewTransition">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
</android.support.v7.widget.CardView>

 

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:transitionName="CardViewTransition"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg_head"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

 3、启动activity的时候传入view和transitionName

ActivityOptionsCompat options =  ActivityOptionsCompat.makeSceneTransitionAnimation(this, v, "CardViewTransition");
ActivityCompat.startActivity(this, intent, options.toBundle());

下面是我写的demo效果图
      

 三、Vector Drawable

在android5.0（API Level 21）中，我们可以支持矢量图：vector drawable,vector drawable的特点是它不会因为图像的缩放而失真。在安卓开发中也就意味着你不需要为不同分辨率的设备定义不同大小的图片资源，只需一个vectorDrawable就够了。
androidStudio创建矢量图可以右键project-new VectorAsset，可以从Material icon中选自带的或者导入svg图。

AnimatedVectorDrawable利用属性动画改变VectorDrawable的属性来实现动画效果,通过匹配Vector节点下Group和path的android:name="”

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0">
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

 

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable">
    <target      android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/rotation" />
</animated-vector>

 v7包的版本需要在23.2.0以上，build成功后会External Libraries出现animated-vector-drawable和support-vector-drawable。

四、SnackBar
snackbar是类似toast一样轻量级的反馈,可以设置一个Action事件。默认的字体颜色是对应Theme中的ColorAccent。和Toast不同的是他不依赖context，而是依赖父容器，SnackBar调用make时传进去一个View，它会顺着这个View去找父级，一直找到CoordinatorLayout或者FrameLayout，然后在它底部弹出。如果你的布局中没有包含这两个容器的一个，它就会一直找到Widnow的DecorView，效果就是在屏幕底部弹出。

Snackbar.make(view, "Change Text", Snackbar.LENGTH_LONG)
.setAction("OK", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            tv.setText("New Text");
        }
}).show();

 
五、cardView
cardView是google提供的一个卡片式控件，可以设置圆角、大小、阴影。可以通过foreground给cardview加点击后响应、波纹状的ripple效果。

<android.support.v7.widget.CardView
   android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_margin="16dp"
    android:clickable="true"       android:foreground="android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/colorAccent"
    app:cardCornerRadius="4dp"
    app:cardElevation="6dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="TextView in CardView"
        android:textStyle="bold"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="26sp" />
</android.support.v7.widget.CardView>

 可以在theme里修改自定义的ripple

<item name="android:colorControlHighlight">@android:color/holo_orange_dark</item>
       <!-- 如果你使用?android:attr/selectableItemBackground 这样的设置，直接会调用 @drawable/ripple_test-->
       <item name="selectableItemBackground">@drawable/ripple_test</item>

 六、BottomSheet
BottomSheet是design包下可以从底部弹出view的控件。

父容器必须是CoordinatorLayout，bottomSheet的几种状态：
` /**
* The bottom sheet is dragging.
*/
public static final int STATE_DRAGGING = 1;

/**
* The bottom sheet is settling.
*/
public static final int STATE_SETTLING = 2;

/**
* The bottom sheet is expanded.
*/
public static final int STATE_EXPANDED = 3;

/**
* The bottom sheet is collapsed.
*/
public static final int STATE_COLLAPSED = 4;

/**
* The bottom sheet is hidden.
*/
public static final int STATE_HIDDEN = 5;
bottomSheet的实现发现官方给出的有三种方法：
1、直接在activity中使用

这种方式showBottomSheetView调用后有的机型并不会显示但是横竖屏切换后就好了，需要postInvalidateOnAnimation。
2、使用bottomSheetDialog和bottomSheetFragment

bottomSheetDialog的父容器其实就是个CoordinatorLayout，这种方法比较实用点，项目中可以写个基类用的时候传view和回调监听事件就可以了。