效果.gif
近年来,越来越多的类似博客主页页面 顶部背景图搭配文字出现各种各样的效果,悬浮置吸顶.小飞机飞行效果,原先 使用CoordinatorLayout 控件监听 移动变化然后再给各个控件设置动画以及属性,来完成实现效果
效果
- 实现悬浮置吸顶
- 顶部滑动小飞机飞行动画效果
思路
CoordinatorLayout+ViewPager+RecyclerView(ScroolView)实现悬浮置吸顶效果,MotionLayout+MotionScene实现顶部横向滑动实现顶部小飞机飞行和背景图滑动效果
实现
1. xml布局 activity_viewpager.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 顶部布局 配置layout_scrollFlags="scroll|exitUntilCollapsed 实现吸顶-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- 顶部布局以及顶部背景图滑动小飞机滑动效果 -->
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/motion_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene_viewpager_top">
<ImageView
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/monterey" />
<ImageView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/iv_fly" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!-- tab布局 -->
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white" />
</com.google.android.material.appbar.AppBarLayout>
<!-- 底部页面布局布局(vp中fragment 必须嵌套滑动布局) -->
<androidx.viewpager.widget.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
实现吸顶效果注意:
1.CollapsingToolbarLayout中配置 app:layout_scrollFlags="scroll|exitUntilCollapsed"
2.ViewPager中配置 app:layout_behavior="@string/appbar_scrolling_view_behavior"
3.ViewPager中的fragment 根布局必须是可滑动的布局RecycerView / ScroolView
1. MotionScene布局 scene_viewpager_top.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">
<!-- 控制动画属性 duration时间 motionInterpolator 动画插值器 constraintSetStart和constraintSetEnd 开始和技术的的ConstraintSet -->
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start">
<!-- 动画中的关键点 25 50 75 注意配置旋转角度-->
<!-- percentY关键点位置属性 位置为父布局的相对百分比位置 -->
<!-- parentRelative 关键点类型 此类型是父布局的相对位置-->
<KeyFrameSet>
<!--关键点1-->
<KeyPosition
motion:framePosition="25"
motion:keyPositionType="parentRelative"
motion:motionTarget="@+id/textView"
motion:percentY=".6" />
<KeyAttribute
android:rotation="-10"
motion:framePosition="25"
motion:motionTarget="@+id/textView" />
<!--关键点2-->
<KeyPosition
motion:framePosition="50"
motion:keyPositionType="parentRelative"
motion:motionTarget="@+id/textView"
motion:percentY=".8" />
<KeyAttribute
android:rotation="40"
motion:framePosition="50"
motion:motionTarget="@+id/textView" />
<!--关键点3-->
<KeyPosition
motion:framePosition="75"
motion:keyPositionType="parentRelative"
motion:motionTarget="@+id/textView"
motion:percentY=".9" />
<KeyAttribute
android:rotation="-10"
motion:framePosition="75"
motion:motionTarget="@+id/textView" />
</KeyFrameSet>
</Transition>
<!-- 配置开始时控件的位置 控件通过id 属性关联布局中的属性-->
<ConstraintSet android:id="@+id/start">
<!-- 放大平移效果 scaleX 缩放 translationX 横向移动-->
<Constraint
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleX="1.2"
android:scaleY="1.2"
android:translationX="-10dp" />
<Constraint
android:id="@id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintLeft_toLeftOf="parent" />
</ConstraintSet>
<!-- 配置结束时控件的位置 控件通过id 属性关联布局中的属性-->
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleX="1.2"
android:scaleY="1.2"
android:translationX="10dp" />
<Constraint
android:id="@id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
motion:layout_constraintRight_toRightOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>
MotionScene 注意事项
1.KeyFrameSet 中KeyPosition关键点的配置以及关键属性的对应位置
2.背景图需要先缩放变大才能执行移动位置
3.页面代码
package com.wu.material.activity
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout
import com.wu.material.R
import com.wu.material.adapter.ViewPagerAdapter
import com.wu.material.fragment.DemoFragment
/**
* @author wkq
*
* @date 2022年01月30日 13:54
*
*@des
*
*/
class ViewPagerActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_viewpager)
initVp()
}
private fun initVp() {
var vp = ViewPagerAdapter(supportFragmentManager)
vp.addPageFragment(DemoFragment(), "List")
vp.addPageFragment(DemoFragment(), "Type2")
vp.addPageFragment(DemoFragment(), "Type3")
vp.addPageFragment(DemoFragment(), "Type4")
var pager = findViewById<ViewPager>(R.id.pager)
var tabs = findViewById<TabLayout>(R.id.tabs)
var motion_layout = findViewById<MotionLayout>(R.id.motion_layout)
pager.adapter = vp
tabs.setupWithViewPager(pager)
pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
override fun onPageScrolled(
position: Int,
positionOffset: Float,
positionOffsetPixels: Int
) {
val progress = (position + positionOffset) / (vp.count - 1)
motion_layout.progress = progress
}
override fun onPageSelected(position: Int) {
}
override fun onPageScrollStateChanged(state: Int) {
}
})
}
}
总结
实现纵向(上下)滑动吸顶效果,横向(左右)滑动顶部布局小飞机飞行以及背景图平移效果.CoordinatorLayout+CollapsingToolbarLayout+ViewPager+ScrollView实现吸顶效果,MotionLayout实现小飞机以及背景平移效果,简单的配置实现了上述各种效果简单方便,大家可以参考以下非常方便
