Material component/ transition

1. Button

https://material.io/develop/android/components/buttons

原来Button设置不同的style就可以有不同的效果啊,以前一直都自定义的。


image.png

1.1 Text button

还可以加Icon,之前以为只有MaterialButton里才支持这个

    

2.2 Outlined button
are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

style="@style/Widget.MaterialComponents.Button.OutlinedButton"

//or

style="?attr/materialButtonOutlinedStyle"

3.3 Contained button
默认的就这种,背景是colorPrimary颜色

3.4 Toggle button
带状态切换的,需要一个容器


image.png

    

圆角选项卡的实现方法

image.png

1.1 使用button

    

        

        

        

        
    

用到的style

    

    
    

用到的colors
select_trans_primary.xml



    
    

文本,icon颜色 select_tab_text_color.xml




    

1.2 使用TabLayout ,外边套个CardView来处理圆角,分割线用divider

不过了TabLayout 只有文字上的icon,没有左边的,我们可能要拿到textview设置drawableLeft了?
或者用自定义view来设置tab

MaterialContainerTransform

A shared element {@link Transition} that transforms one container to another.
MaterialContainerTransform can be used to morph between two Activities, Fragments, Views or a View to a Fragment.

public final class MaterialContainerTransform extends Transition {

//指出是入场还是出厂动画
  @IntDef({TRANSITION_DIRECTION_AUTO, TRANSITION_DIRECTION_ENTER, TRANSITION_DIRECTION_RETURN})
  @Retention(RetentionPolicy.SOURCE)
  public @interface TransitionDirection {}

//淡入淡出模式
  @IntDef({FADE_MODE_IN, FADE_MODE_OUT, FADE_MODE_CROSS, FADE_MODE_THROUGH})
  @Retention(RetentionPolicy.SOURCE)
  public @interface FadeMode {}

//匹配宽或者高
  @IntDef({FIT_MODE_AUTO, FIT_MODE_WIDTH, FIT_MODE_HEIGHT})
  @Retention(RetentionPolicy.SOURCE)
  public @interface FitMode {}

1.1 在两个fragment之间进行转场动画
①首先在共享view加上一样的transitionName名字,比如






②给即将跳转的FragmentB 设置sharedElementEnterTransition ,可以在new出来的fragment b对象上设置,也可以直接在Fragment b里设置,如下两种都行.

// FragmentA.kt
val fragmentB = FragmentB()
fragmentB.sharedElementEnterTransition = MaterialContainerTransform()


/*** OR ***/


// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?)  {
  super.onCreate(savedInstanceState)
  sharedElementEnterTransition = MaterialContainerTransform()
}

③设置共享元素


childFragmentManager
  .beginTransaction()
  // Map the start View in FragmentA and the transitionName of the end View in FragmentB
  .addSharedElement(view, "shared_element_container")
  .replace(R.id.fragment_container, fragmentB, FragmentB.TAG)
  .addToBackStack(FragmentB.TAG)
  .commit()

方法源码注解

    /**
     * Used with custom Transitions to map a View from a removed or hidden
     * Fragment to a View from a shown or added Fragment.
     * sharedElement must have a unique transitionName in the View hierarchy.
     *
     * @param sharedElement A View in a disappearing Fragment to match with a View in an
     *                      appearing Fragment.
     * @param name The transitionName for a View in an appearing Fragment to match to the shared
     *             element.
     * @see Fragment#setSharedElementReturnTransition(Object)
     * @see Fragment#setSharedElementEnterTransition(Object)
     */
    @NonNull
    public FragmentTransaction addSharedElement(@NonNull View sharedElement, @NonNull String name) 

然后测试结果还凑合,不过尝试修改FragmentB里sharedElementEnterTransition的duration时间,改长点,比如2秒,然后就发现,从A到B变化的时候,会先出现一个浅灰色的背景,然后动画在这个灰色的背景上发生,看着效果不太好,后退的时候动画没啥问题.
1.2 activity 之间跳转动画
Note: Activity and Window transitions require using Android Framework Transitions provided in the com.google.android.material.transition.platform package and are only available on API level 21 and above.
transition目录下的类ABC等,在platform下都有同名的ABC,这里意思是用platform下的

image.png

另外对于viedeoview,surfaceView之类的,不要用这个跳转,效果不行还可能出现异常.因为他们都不在ui线程更新的,有自己的线程处理,会出问题.

使用步骤,假设从A跳到B

① AB 都需要 activity transition feature,可以在代码里设置,也可以在style里设置.

override fun onCreate(savedInstanceState: Bundle?) {
  // Enable Activity Transitions. Optionally enable Activity transitions in your
  // theme with true.
  window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

另外A 需要如下设置,也是在onCreate里,跟在上边的requestFeature下面即可

  // Attach a callback used to capture the shared elements from this Activity to be used
  // by the container transform transition
  setExitSharedElementCallback(MaterialContainerTransformSharedElementCallback())

  // Keep system bars (status bar, navigation bar) persistent throughout the transition.
  window.sharedElementsUseOverlay = false

② A 跳转代码

sharedView.setTransitionName("xxxx")//在A里是唯一的就行
        val options = ActivityOptions.makeSceneTransitionAnimation(
            this,
            sharedView,//A 里要进行动画的view
            "shared_element_container" // The transition name to be matched in Activity B.
        )
        startActivity(Intent(this, B.class),options.toBundle())

③ B里的设置
下边默认的是用的B整个布局做为跳转对象的,你也可以用B里边的某些view或viewgroup来作为跳转对象,

override fun onCreate(savedInstanceState: Bundle?) {

  // Enable Activity Transitions. Optionally enable Activity transitions in your
  // theme with true.
  window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

  // Set the transition name, which matches Activity A’s start view transition name, on
  // the root view.
  findViewById(android.R.id.content).transitionName = "shared_element_container"

  // Attach a callback used to receive the shared elements from Activity A to be
  // used by the container transform transition.
  setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())

  // Set this Activity’s enter and return transition to a MaterialContainerTransform
  window.sharedElementEnterTransition = MaterialContainerTransform().apply {
    addTarget(android.R.id.content)
    duration = 300L
setAllContainerColors(Color.WHITE)//activity B 可能没有设置背景,跳转的时候有可能看到底层,不太好看
  }
  window.sharedElementReturnTransition = MaterialContainerTransform().apply {
    addTarget(android.R.id.content)
    duration = 250L
setAllContainerColors(Color.WHITE)// startView 可能没有背景,透明的不太好看,可以加个这个
  }

  super.onCreate(bundle)
  setContentView(R.layout.activity_b)
  ...
}

1.3 view 之间的转换
试了下,不知道啥用,关键是动画前啥样子,动画结束后又还原了,比如demo里,startView从可见到不可见,endView相反,可动画结束又成老样子了.
我把代码复制到别的demo是正常的,后来发现这里出问题是因为容器是MotionLayout,不知道这个为啥会影响这个,可能motionlayout自己就能管理动画吧

val transform = MaterialContainerTransform().apply {
  // Manually tell the container transform which Views to transform between.
  startView = fab
  endView = bottomToolbar

  // Ensure the container transform only runs on a single target
  addTarget(endView)

  // Optionally add a curved path to the transform
  pathMotion = MaterialArcMotion()

  // Since View to View transforms often are not transforming into full screens,
  // remove the transition's scrim.
  scrimColor = Color.TRANSPARENT
}

// Begin the transition by changing properties on the start and end views or
// removing/adding them from the hierarchy.
TransitionManager.beginDelayedTransition(container, transform)
fab.visibility = View.GONE
bottomToolbar.visibility = View.VISIBLE

Motion

  1. transition
    相关的一些类学习,至于啥用再说
    1.1 VisibilityAnimatorProvider
    接口名字基本就说明了它是干啥的了,为可见性提供动画的,出现和消失的animator
public interface VisibilityAnimatorProvider {

  /**
   * Should return an Animator that animates in the appearing target {@code view}.
   *
   * @param sceneRoot The root of the transition hierarchy, which can be useful for checking
   *     configurations such as RTL
   * @param view The view that is appearing
   */
  @Nullable
  Animator createAppear(@NonNull ViewGroup sceneRoot, @NonNull View view);

  /**
   * Should return an Animator that animates out the disappearing target {@code view}.
   *
   * @param sceneRoot The root of the transition hierarchy, which can be useful for checking
   *     configurations such as RTL
   * @param view The view that is disappearing
   */
  @Nullable
  Animator createDisappear(@NonNull ViewGroup sceneRoot, @NonNull View view);
}

系统有4个实现类
FadeProvider
就是透明度的变化,默认appear是从0到incomingEndThreshold【defautlvalue是1,可修改】,disappear是从1到0不可修改

/** A class that configures and is able to provide an {@link Animator} that fades a view. */
public final class FadeProvider implements VisibilityAnimatorProvider {


}

FadeThroughProvider
和上边的差不多,不过这个有个固定的阀值,透明度是从0.35到1 ,从1到0.35

/**
 * A class that configures and is able to provide an {@link Animator} that fades out or in a view.
 *
 * 

FadeThroughProvider differs from FadeProvider in that it fades out and in views sequentially. */ public final class FadeThroughProvider implements VisibilityAnimatorProvider { static final float PROGRESS_THRESHOLD = 0.35f; }

ScaleProvider
就是提供拉伸动画,出现的时候是从0.8到1 ,消失的时候是从1到1.1

public final class ScaleProvider implements VisibilityAnimatorProvider {

  private float outgoingStartScale = 1f;
  private float outgoingEndScale = 1.1f;
  private float incomingStartScale = 0.8f;
  private float incomingEndScale = 1f;

SlideDistanceProvider
这个是平移动画,构造方法里需要一个Gravity的参数,指明最终停留的边界,当然是从另一边移动过来的,
上下左右,还可以设置移动距离,如果不设置有个默认的距离30dp

/**
 * A class that can configure and create an {@link Animator} that slides a view vertically or
 * horizontally slide over a specific distance.
 */
public final class SlideDistanceProvider implements VisibilityAnimatorProvider {

public SlideDistanceProvider(@GravityFlag int slideEdge) {
    this.slideEdge = slideEdge;
  }

  private static Animator createTranslationAppearAnimator(
      View sceneRoot, View view, @GravityFlag int slideEdge, @Px int slideDistance) {
    switch (slideEdge) {
      case Gravity.LEFT:
        return createTranslationXAnimator(view, slideDistance, 0);
      case Gravity.TOP:
        return createTranslationYAnimator(view, -slideDistance, 0);
      case Gravity.RIGHT:
        return createTranslationXAnimator(view, -slideDistance, 0);
      case Gravity.BOTTOM:
        return createTranslationYAnimator(view, slideDistance, 0);
      case Gravity.START:
        return createTranslationXAnimator(
            view, isRtl(sceneRoot) ? slideDistance : -slideDistance, 0);
      case Gravity.END:
        return createTranslationXAnimator(
            view, isRtl(sceneRoot) ? -slideDistance : slideDistance, 0);
      default:
        throw new IllegalArgumentException("Invalid slide direction: " + slideEdge);
    }
  }

2. Transition

A Transition holds information about animations that will be run on its targets during a scene change

public abstract class Transition implements Cloneable {
public Transition addTarget(@NonNull View target) 

你可能感兴趣的:(Material component/ transition)