搜索框效果.gif

近年来越来越多的App首页搜索控件添加了动画 什么SVG展示搜索图标动画,以及滑动中变化搜索框的动画.本文就是MotionLayout 简单实现收拾框的简单平移,背景缩放,搜索框尺寸变化的效果

目标

• 背景缩放,渐变
• 搜索框尺寸变成置顶宽度
• 搜索框悬浮

思路

CoordinatorLayout+MotionLayout +ScrollView,CoordinatorLayout关联滑动,MotionLayout 实现关联滑动中的动画.滑动中修改背景的缩放大小从 1.2 变成 1.0 透明度从 1.0 到0.2 变化 咋此期间动态控制 搜索控件的宽度

实现

1.MotionScene 配置动画效果 scene_search.xml(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_search"
            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" />


            <RelativeLayout
                android:id="@+id/search"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@drawable/shape_10dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/iv_search"
                    android:hint="请输入搜索的内容"
                    android:padding="10dp"
                    android:textColorHint="@color/tintImage"
                    android:textSize="14dp" />

                <ImageView
                    android:id="@+id/iv_search"
                    android:layout_width="23dp"
                    android:layout_height="23dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:src="@mipmap/iv_search" />
            </RelativeLayout>

        </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.页面布局 activity_search_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_search"
            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" />


            <RelativeLayout
                android:id="@+id/search"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@drawable/shape_10dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/iv_search"
                    android:hint="请输入搜索的内容"
                    android:padding="10dp"
                    android:textColorHint="@color/tintImage"
                    android:textSize="14dp" />

                <ImageView
                    android:id="@+id/iv_search"
                    android:layout_width="23dp"
                    android:layout_height="23dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:src="@mipmap/iv_search" />
            </RelativeLayout>

        </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.页面代码

package com.wu.material.activity

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
import com.wu.material.R

/**
 * @author wkq
 *
 * @date 2022年01月24日 13:56
 *
 *@des
 *
 */

class SearchLayoutActivity : AppCompatActivity() {

    @SuppressLint("RestrictedApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_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()!!
            }
        })
    }


}

总结

滑动搜索框动画简单实现,有兴趣的可以多搞几个控件实现关联动画,什么头像移动,索索图标切换什么的

注意!!!
MotionScene 文件放在新建的../res/xml文件夹下

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址