Android新控件之MotionLayout 個人主頁頁面懸浮,縮放,平移,旋轉(zhuǎn)效果<六>

效果.gif

近年來,越來越多的類似博客主頁頁面 頂部背景圖搭配文字出現(xiàn)各種各樣的效果,例如頂部懸浮,背景色變換 文字移動,控件移動等效果,原先 使用CoordinatorLayout 控件監(jiān)聽 移動變化然后再給各個控件設(shè)置動畫以及屬性,來完成實(shí)現(xiàn)效果

期望:

  1. 背景透明度隨滑動變化
  2. 名字隨滑動變化
  3. 頭像隨滑動變化

思路

CoordinatorLayout+MotionLayout +MotionScene

實(shí)現(xiàn)

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()!!
            }
        })
    }


}

總結(jié)

參考Google的 Demo 實(shí)現(xiàn)了隨著頁面滑動頂部背景圖,名字以及頭像的簡單動畫

參考文獻(xiàn)

1.Google的MotionLayout介紹說明

2.MotionLayout的文檔簡介

3.MotionLayout 源碼地址

4. 源碼地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容