搜索框效果.gif
近年來越來越多的App首頁搜索控件添加了動(dòng)畫 什么SVG展示搜索圖標(biāo)動(dòng)畫,以及滑動(dòng)中變化搜索框的動(dòng)畫.本文就是MotionLayout 簡單實(shí)現(xiàn)收拾框的簡單平移,背景縮放,搜索框尺寸變化的效果
目標(biāo)
- 背景縮放,漸變
- 搜索框尺寸變成置頂寬度
- 搜索框懸浮
思路
CoordinatorLayout+MotionLayout +ScrollView,CoordinatorLayout關(guān)聯(lián)滑動(dòng),MotionLayout 實(shí)現(xiàn)關(guān)聯(lián)滑動(dòng)中的動(dòng)畫.滑動(dòng)中修改背景的縮放大小從 1.2 變成 1.0 透明度從 1.0 到0.2 變化 咋此期間動(dòng)態(tài)控制 搜索控件的寬度
實(shí)現(xiàn)
1.MotionScene 配置動(dòng)畫效果 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="請輸入搜索的內(nèi)容"
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>
<!-- 移動(dòng)的控件 -->
<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="請輸入搜索的內(nèi)容"
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>
<!-- 移動(dòng)的控件 -->
<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()!!
}
})
}
}
總結(jié)
滑動(dòng)搜索框動(dòng)畫簡單實(shí)現(xiàn),有興趣的可以多搞幾個(gè)控件實(shí)現(xiàn)關(guān)聯(lián)動(dòng)畫,什么頭像移動(dòng),索索圖標(biāo)切換什么的
注意!!!
MotionScene 文件放在新建的../res/xml文件夾下
