效果.gif
近年來,越來越多的類似博客主頁頁面 頂部背景圖搭配文字出現各種各樣的效果,懸浮置吸頂.小飛機飛行效果,原先 使用CoordinatorLayout 控件監(jiān)聽 移動變化然后再給各個控件設置動畫以及屬性,來完成實現效果
效果
- 實現懸浮置吸頂
- 頂部滑動小飛機飛行動畫效果
思路
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.背景圖需要先縮放變大才能執(zhí)行移動位置
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實現小飛機以及背景平移效果,簡單的配置實現了上述各種效果簡單方便,大家可以參考以下非常方便
