關聯滑動效果.gif
近年來,越來越多的類似博客主頁頁面 頂部背景圖搭配文字出現各種各樣的效果,例如頂部懸浮,背景色變換 文字移動,控件移動等效果,原先 使用CoordinatorLayout 控件監聽 移動變化然后再給各個控件設置動畫以及屬性,來完成實現效果
MotionLayout 出現后更方便控制各個動畫的聯動,處理多個動畫以及屬性的協調變化更舒暢,更方便的實現這種頁面的效果.
期望:類似博客首頁 伴隨滑動實現如下效果
- 頭像北京漸變透明,
- 文字旋轉90°
- 指定寬度懸浮
1. Layout.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="300dp">
<!-- 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="60dp"
android:theme="@style/AppTheme.AppBarOverlay"
app:layoutDescription="@xml/scene_coordinator_layout01"
app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
tools:ignore="MotionLayoutInvalidSceneFileReference">
<ImageView
android:id="@+id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@mipmap/roard" />
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="測試文字,旋轉了90°"
android:textColor="#FFF"
android:textSize="16dp"
android:transformPivotX="0dp"
android:transformPivotY="0dp" />
</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>
2. MotionScene scene_coordinator_layout01.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"></Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="1.0"
motion:layout_constraintBottom_toBottomOf="parent">
</Constraint>
<Constraint
android:layout_marginLeft="20dp"
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="-90.0"
android:layout_marginStart="18dp"
android:layout_marginBottom="18dp"
motion:layout_constraintBottom_toBottomOf="@+id/backgroundIcon"
motion:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/backgroundIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.2"
motion:layout_constraintBottom_toBottomOf="parent"></Constraint>
<Constraint
android:id="@id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginBottom="18dp"
android:rotation="0.0"
motion:layout_constraintBottom_toBottomOf="@+id/backgroundIcon"
motion:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
</MotionScene>
3.代碼
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 CoordinatorLayoutActivity : AppCompatActivity() {
@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_mothion_coordinator_layout)
//顯示路徑
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()!!
}
})
}
}
總結
實現了博客頁面一些常見的聯動動畫,代碼簡單 執行流暢.要實現博客頁面面的需求可以參考這種實現方式
