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();
}
这里只是实现最简单的效果,之间的相互搭配使用还有待实际深入学习。