Android新控件之MotionLayout实现Banner循环效果:循环播放,自定义切换动画<十一>

Banner效果.gif

原先实现Banner效果无非是ViewPager,或者RecyclerView 然后再更改切换的动画来实现Banner的切换动画效果,

现在好了MotionLayout 搭配 Carousel(旋转木马)提供了一个新的思路,既提供了无线旋转,又能通过MotionScene来定义动画效果

需求:

• 无线旋转
• 选中变大
• 取消选种便会原先
• 还可以增加透明半透明效果(gif展示不太明显,可以去看源码).

需要知识点

基于 'androidx.constraintlayout:constraintlayout:2.+' 的新控件

1. MotionLayout 知识学习(可以看前边的博客)
2. Carousel (旋转木马)

1. MotionLayout 知识点学习

2.Carousel 简单配置说明

属性说明

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

2.布局 xml activity_carousel.xml

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(
            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文件夹下

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4.Carousel 旋转木马Google介绍

5. 源码地址