Material component/ transition

1. Button

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

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


image.png

1.1 Text button

<Button
    android:id="@+id/textButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text button"
    style="@style/Widget.MaterialComponents.Button.TextButton"
/>

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

    <Button
            <Button
        app:icon="@drawable/ic_volume"
        app:iconSize="30dp"
        app:iconTint="@color/colorAccent"
        app:iconGravity="textStart"
        app:iconPadding="5dp"
        style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

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
<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        style="?attr/materialButtonOutlinedStyle"
    />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        style="?attr/materialButtonOutlinedStyle"
    />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        style="?attr/materialButtonOutlinedStyle"
    />
</com.google.android.material.button.MaterialButtonToggleGroup>

圆角选项卡的实现方法

image.png

1.1 使用button

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="20dp"
        app:checkedButton="@id/btn_1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:selectionRequired="true"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_1"
            style="@style/TabSingleCheckedForSettings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="car"
            app:icon="@drawable/ic_vpi_car_d"
            app:shapeAppearanceOverlay="@style/TabLeftShapeRoundCornerTop" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_2"
            style="@style/TabSingleCheckedForSettings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="suv"
            app:icon="@drawable/ic_vpi_suv_d" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_3"
            style="@style/TabSingleCheckedForSettings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="towing"
            app:icon="@drawable/ic_vpi_towing_d" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_4"
            style="@style/TabSingleCheckedForSettings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="truck"
            app:icon="@drawable/ic_vpi_truck_d"
            app:shapeAppearanceOverlay="@style/TabRightShapeRoundCornerTop" />
    </com.google.android.material.button.MaterialButtonToggleGroup>

用到的style

    <style name="TabSingleCheckedForSettings">
        <item name="strokeColor">@color/colorPrimary2</item>
        <item name="strokeWidth">@dimen/mtrl_btn_stroke_size</item>
        <item name="backgroundTint">@color/select_trans_primary</item>
        <item name="android:textColor">@color/select_tab_text_color</item>
        <item name="iconTint">@color/select_tab_text_color</item>
        <item name="iconSize">25dp</item>
        <item name="iconGravity">textStart</item>
        <item name="iconPadding">5dp</item>
        <item name="android:textSize">26sp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:stateListAnimator">@null</item>
    </style>

    <style name="TabLeftShapeRoundCornerTop">
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomLeft">50%</item>
    </style>
    <style name="TabRightShapeRoundCornerTop">
        <item name="cornerSizeTopRight">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
    </style>

用到的colors
select_trans_primary.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary2" android:state_checked="true" />
    <item android:color="@color/transparent" android:state_checked="false"/>
</selector>

文本，icon颜色 select_tab_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/content_black_color" android:state_checked="true"/>
    <item android:color="@color/colorPrimary2" android:state_checked="false"/>
</selector>

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名字，比如

<!--fragment_a.xml-->
<View
  android:id="@+id/start_view"
  android:transitionName="shared_element_container" />

<!--fragment_b.xml-->
<View
  android:id="@+id/end_view"
  android:transitionName="shared_element_container" />

②给即将跳转的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.
     * <var>sharedElement</var> 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 <item name=”android:windowActivityTransitions”>true</item>.
  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 <item name=”android:windowActivityTransitions”>true</item>.
  window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

  // Set the transition name, which matches Activity A’s start view transition name, on
  // the root view.
  findViewById<View>(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.
 *
 * <p>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)
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,651评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,468评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,931评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,218评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,234评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,198评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,084评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,926评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,341评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,430评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,036评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2赞 354