Banner效果.gif
原先实现Banner效果无非是ViewPager,或者RecyclerView 然后再更改切换的动画来实现Banner的切换动画效果,
现在好了MotionLayout 搭配 Carousel(旋转木马)提供了一个新的思路,既提供了无线旋转,又能通过MotionScene来定义动画效果
需求:
- 无线旋转
- 选中变大
- 取消选种便会原先
- 还可以增加透明半透明效果(gif展示不太明显,可以去看源码).
需要知识点
基于 'androidx.constraintlayout:constraintlayout:2.+' 的新控件
- MotionLayout 知识学习(可以看前边的博客)
- Carousel (旋转木马)
1. MotionLayout 知识点学习
2.Carousel 简单配置说明
<androidx.constraintlayout.motion.widget.MotionLayout ... >
<ImageView android:id="@+id/imageView0" .. />
<ImageView android:id="@+id/imageView1" .. />
<ImageView android:id="@+id/imageView2" .. />
<ImageView android:id="@+id/imageView3" .. />
<ImageView android:id="@+id/imageView4" .. />
<androidx.constraintlayout.helper.widget.Carousel
android:id="@+id/carousel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:carousel_forwardTransition="@+id/forward"
app:carousel_backwardTransition="@+id/backward"
app:carousel_previousState="@+id/previous"
app:carousel_nextState="@+id/next"
app:carousel_infinite="true"
app:carousel_firstView="@+id/imageView2"
app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />
</androidx.constraintlayout.motion.widget.MotionLayout>
属性说明
Carousel 助手还需要设置几个属性：
`app:carousel_firstView`：表示轮播的第一个元素的视图，在我们的示例中，C
`app:carousel_previousState`:`ConstraintSet`前一个状态的id
`app:carousel_nextState`:`ConstraintSet`下一个状态的id
`app:carousel_backwardTransition`:[`Transition`](MotionScene 中 Transition 的id) 在 start -> previous 之间应用的 id
`app:carousel_forwardTransition`:`Transition`在 start -> next 之间应用的 id
app:carousel_emptyViewsBehavior="gone" Carousel 助手将这些视图标记为View.GONE
最后，我们还需要在代码中设置一个 Carousel 适配器：
carousel.setAdapter(object : Carousel.Adapter {
override fun count(): Int {
// need to return the number of items we have in the carousel
}
override fun populate(view: View, index: Int) {
// need to implement this to populate the view at the given index
}
override fun onNewItem(index: Int) {
// called when an item is set
}
})
功能实现
1.MotionScene 的xml scene_carousel.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">
<!-- 设置动画插值器 motion:motionInterpolator="easeOut" -->
<!-- 设置动画时常 motion:duration="100" -->
<!-- 向前(向左) -->
<Transition
android:id="@+id/forward"
motion:constraintSetEnd="@+id/next"
motion:constraintSetStart="@+id/start">
<OnSwipe
motion:dragDirection="dragLeft"
motion:touchAnchorSide="left" />
</Transition>
<!-- 向后滑动(向右) -->
<Transition
android:id="@+id/backward"
motion:constraintSetEnd="@+id/previous"
motion:constraintSetStart="@+id/start">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorSide="right" />
</Transition>
<!-- 开始的 -->
<ConstraintSet android:id="@+id/start">
<Constraint
android:alpha="0.8"
android:id="@+id/show_left"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/center"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:alpha="1.0"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="@+id/guideline_right"
motion:layout_constraintStart_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.8"
android:id="@+id/show_right"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="@+id/guideline_right"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<!-- 向后(向左滑动)-->
<ConstraintSet android:id="@+id/next">
<Constraint
android:alpha="0.8"
android:id="@+id/show_left"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@+id/center"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.8"
android:id="@+id/center"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/show_right"
android:layout_width="200dp"
android:layout_height="100dp"
android:alpha="1.0"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="@+id/guideline_right"
motion:layout_constraintStart_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.8"
android:id="@+id/right"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="@+id/show_right"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<!-- 向前(向右滑动)-->
<ConstraintSet android:id="@+id/previous">
<Constraint
android:id="@+id/left"
android:alpha="0.8"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="1.0"
android:id="@+id/show_left"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="@+id/guideline_right"
motion:layout_constraintStart_toStartOf="@+id/guideline_left"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.8"
android:id="@+id/center"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="@+id/guideline_right"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.8"
android:id="@+id/show_right"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="@+id/center"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>
2.布局 xml activity_carousel.xml
<?xml version="1.0" encoding="utf-8"?>
<layout>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene_carousel">
<ImageView
android:id="@+id/left"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/goldengate"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/show_left"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/show_left"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/bryce_canyon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline_left"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/center"
android:layout_width="200dp"
android:layout_height="600dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/fitzgerald_marine_reserve"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/show_right"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/death_valley"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/guideline_right"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/right"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/goldengate"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/show_right"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="80dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="80dp" />
<androidx.constraintlayout.helper.widget.Carousel
android:id="@+id/carousel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:carousel_backwardTransition="@id/backward"
app:carousel_firstView="@id/show_left"
app:carousel_forwardTransition="@id/forward"
app:carousel_infinite="true"
app:carousel_nextState="@id/next"
app:carousel_previousState="@id/previous"
app:constraint_referenced_ids="left,show_left,center,show_right,right" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:text="下一个"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</layout>
3.代码
package com.wu.material.activity
import android.annotation.SuppressLint
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.helper.widget.Carousel
import androidx.databinding.DataBindingUtil
import com.wu.material.R
import com.wu.material.databinding.ActivityCarouselBinding
/**
* @author wkq
*
* @date 2022年01月24日 13:56
*
*@des Banner 效果(未处理 仅仅能展示顶部动画效果)
*
*/
class CarouselActivity : AppCompatActivity() {
var binding: ActivityCarouselBinding? = null
var images = intArrayOf(
R.drawable.bryce_canyon,
R.drawable.cathedral_rock,
R.drawable.death_valley,
R.drawable.fitzgerald_marine_reserve,
R.drawable.goldengate,
R.drawable.golden_gate_bridge,
R.drawable.shipwreck_1,
R.drawable.shipwreck_2,
R.drawable.grand_canyon,
R.drawable.horseshoe_bend,
R.drawable.muir_beach,
R.drawable.rainbow_falls
)
@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView<ActivityCarouselBinding>(
this,
R.layout.activity_carousel
)
initView()
}
var position: Int = -1
private fun initView() {
binding!!.carousel.setAdapter(object : Carousel.Adapter {
override fun count(): Int {
return images.size
}
override fun populate(view: View, index: Int) {
if (view is ImageView) {
view.setImageResource(images[index])
}
}
override fun onNewItem(index: Int) {
position = index
Log.e("位置:",index.toString())
}
})
position = binding!!.carousel.currentIndex
binding!!.button.setOnClickListener {
if (position==images.size-1){
binding!!.carousel.transitionToIndex(0, 200)
}else{
binding!!.carousel.transitionToIndex(position + 1, 200)
}
}
}
}
注意:
点击下一个未实现循环旋转 要想实现可以参考Vp无线循环的思路即是最大值然后动态算填充的数据
总结
Banner实现的另一种方式,方便实现各种效果的Banner 新控件刚出来 可以搞一下
注意!!!
MotionScene 文件放在新建的../res/xml文件夹下
