效果.gif
近年来,越来越多的类似博客主页页面 顶部背景图搭配文字出现各种各样的效果,例如顶部悬浮,背景色变换 文字移动,控件移动等效果,原先 使用CoordinatorLayout 控件监听 移动变化然后再给各个控件设置动画以及属性,来完成实现效果
期望:
- 背景透明度随滑动变化
- 名字随滑动变化
- 头像随滑动变化
思路
CoordinatorLayout+MotionLayout +MotionScene
实现
1. MotionScene scene_coordinator_layout02.xml 布局
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:motionInterpolator="linear" />
<ConstraintSet android:id="@+id/start">
<!-- 背景透明度变化 alpha -->
<Constraint
android:id="@+id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleX="1.1"
android:scaleY="1.1"
android:alpha="1.0" />
<Constraint
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名"
android:textColor="#FFF"
android:textSize="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintLeft_toLeftOf="parent"
motion:layout_constraintRight_toRightOf="parent"
motion:layout_constraintTop_toTopOf="parent"
motion:layout_constraintVertical_bias="0.26" />
<Constraint
android:id="@+id/icon"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="@mipmap/roard"
motion:layout_constraintLeft_toLeftOf="parent"
motion:layout_constraintRight_toRightOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/name"
motion:shapeAppearanceOverlay="@style/circleImageStyle" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:translationY="100dp"
android:translationX="0dp"
android:alpha="0.2" />
<!-- 文字靠左展示 -->
<Constraint
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="用户名"
android:textColor="#FFF"
android:textSize="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
<!-- 头像靠右展示 -->
<Constraint
android:id="@+id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="@mipmap/roard"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:shapeAppearanceOverlay="@style/circleImageStyle" />
</ConstraintSet>
</MotionScene>
2. 页面布局 activity_mothion_coordinator_layout2.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">
<!-- 顶部布局 -->
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="180dp">
<!-- minHeight: 最小高度 -->
<!-- background: 背景色 -->
<!-- layoutDescription : 配置文件-->
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/ml"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:fitsSystemWindows="false"
android:minHeight="40dp"
android:theme="@style/AppTheme.AppBarOverlay"
app:layoutDescription="@xml/scene_coordinator_layout02"
app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
tools:ignore="MotionLayoutInvalidSceneFileReference">
<ImageView
android:id="@+id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/sea" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名"
android:textColor="#FFF"
android:textSize="16dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/icon"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@mipmap/roard"
app:shapeAppearanceOverlay="@style/circleImageStyle" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- 移动的控件 -->
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollable"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="@string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3. Activity 代码
package com.wu.material
import android.annotation.SuppressLint
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import com.google.android.material.appbar.AppBarLayout
/**
* @author wkq
*
* @date 2022年01月24日 13:56
*
*@des
*
*/
class CoordinatorLayout2Activity : AppCompatActivity() {
@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_mothion_coordinator_layout2)
//显示路径
var motionLayout = findViewById<MotionLayout>(R.id.ml)
motionLayout.setDebugMode(MotionLayout.DEBUG_SHOW_PATH)
var appBarLayout = findViewById<AppBarLayout>(R.id.app_layout)
appBarLayout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
//绑定 MotionLayout偏移量
motionLayout.progress = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
}
})
}
}
总结
参考Google的 Demo 实现了随着页面滑动顶部背景图,名字以及头像的简单动画
