Android5.0 MaterialDesign初体验

MaterialDesign设计理念越来越普及，一直都没来得及跟进学习，趁现在的空闲学习一下。

共享元素

如今各大APP都能见到共享元素的身影，不太清楚的小伙伴看下示例效果，这是两个activity页面

• 使用共享元素的必备条件：
  1，主题需要Theme.AppCompat下的主题才能看到效果。
  2，需要在Android5.0（LOLLIPOP）及以上系统下运行。如果项目支持的最低版本低于5.0，需要进行版本判断。

• 准备工作：无论是activity的跳转还是fragment之间的跳转，都需要为两个界面中共享的元素设置上名称相同的TransitionName，两种设置方式如下。
  1，代码中设置
  view.setTransitionName(string name);
  2，xml中设置
  android:transitionName=”XXX”

• 跳转逻辑
  1，跳转Activity

  //这里有两个共享元素，一个ImageView，一个TextView，所以添加了两个Pair参数。
  if (Build.VERSION.SDK_INT >= 21)
      startActivity(
          new Intent(this, ActivityB.class),
          this,
          new Pair<View, String>(iv_share, "MaterialShare_iv"),
          new Pair<View, String>(tv_share, "MaterialShare_tv")).toBundle());
  else
      startActivity(new Intent(this, ActivityB.class));

  2，fragment切换fragment

  ///////////fragmentA中跳转代码////////////////
  
  getSupportFragmentManager()
          .beginTransaction()
          //设置了作为共享元素的控件以及transitionName
          .addSharedElement(sharedElement, transitionName)
          .replace(R.id.container, newFragment)
          //为了让fragment回栈，如果不设置，当跳转到新的fragment时，BackClick就会直接退出activity
          .addToBackStack(TAG)
          .commit();
  
  
  ///////////////fragmentB中设置动画//////////////////////
  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
          setSharedElementEnterTransition(
              TransitionInflater.from(getContext())
                  .inflateTransition(android.R.transition.move));
      }
  }

Ripple效果（水波纹）

即点击水波纹效果，只需要两步。

• xml为按钮设置ripple背景

  <Button
          android:id="@+id/material_btn_shareanimal"
          android:layout_width="200dp"
          android:layout_height="wrap_content"
          android:layout_marginTop="25dp"
          android:background="@drawable/ripple"
          android:text="水波纹" />

• 自定义ripple效果
  在drawable文件夹中定义一个名为ripple的xml文件，这里只简单设置了颜色和形状。

  <?xml version="1.0" encoding="utf-8"?>
  <ripple xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@android:color/holo_blue_bright">
  
      <item>
          <shape android:shape="rectangle">
              <solid android:color="@color/colorAccent"/>
          </shape>
      </item>
  </ripple>

OK！，看下效果（图中下面两个是接下来要说的Circular Reveal动画效果）

Circular Reveal动画

这种动画效果上面已经贴出来啦，通过ViewAnimationUtils.createCircularReveal()方法可以创建一个RevealAnimator动画，代码如下所示。

//点击执行的圆形动画
if (Build.VERSION.SDK_INT >= 21) {
    Animator animator = ViewAnimationUtils.createCircularReveal(
        iv_oval,                   //动画作用的view
        iv_oval.getWidth() / 2,    //动画开始的中心点X
        iv_oval.getHeight() / 2,   //动画开始的中心点Y
        0,                         //动画开始半径
        iv_oval.getWidth());       //动画结束半径
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(2000);
    animator.start();
}


//点击执行的矩形动画
if (Build.VERSION.SDK_INT >= 21) {
    Animator animator = ViewAnimationUtils.createCircularReveal(
         iv_rect,
         0,
         0,
         0,
         (float) Math.hypot(iv_rect.getWidth(), iv_rect.getHeight())); //计算对角线长度
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(2000);
    animator.start();
}

这里只是实现最简单的效果，之间的相互搭配使用还有待实际深入学习。