Android新控件之MotionLayout+CoordinatorLayout+TabLayout+ViewPager 悬浮置顶和顶部滑动动画<八>

效果.gif

近年来,越来越多的类似博客主页页面 顶部背景图搭配文字出现各种各样的效果,悬浮置吸顶.小飞机飞行效果,原先 使用CoordinatorLayout 控件监听 移动变化然后再给各个控件设置动画以及属性,来完成实现效果

效果

1. 实现悬浮置吸顶
2. 顶部滑动小飞机飞行动画效果

思路

CoordinatorLayout+ViewPager+RecyclerView(ScroolView)实现悬浮置吸顶效果,MotionLayout+MotionScene实现顶部横向滑动实现顶部小飞机飞行和背景图滑动效果

实现

1. xml布局 activity_viewpager.xml

实现吸顶效果注意:

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

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(R.id.pager)
        var tabs = findViewById(R.id.tabs)
        var motion_layout = findViewById(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实现小飞机以及背景平移效果,简单的配置实现了上述各种效果简单方便,大家可以参考以下非常方便

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址