1. Button
https://material.io/develop/android/components/buttons
原来Button设置不同的style就可以有不同的效果啊,以前一直都自定义的。
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
带状态切换的,需要一个容器
圆角选项卡的实现方法
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下的
另外对于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
- 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)