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

Banner效果2.gif

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

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

需求:

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

需要知识点

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

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

1. 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
            }
        })

功能实现

位置说明.jpg

1.MotionScene 的xml scene_carousel2.xml

2.布局 xml activity_carousel2.xml

3.代码

package com.wu.material.activity

import android.annotation.SuppressLint
import android.os.Bundle
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.ActivityCarousel2Binding
import com.wu.material.databinding.ActivityCarouselBinding

/**
 * @author wkq
 *
 * @date 2022年01月24日 13:56
 *
 *@des  Banner实现2(未处理 仅仅能展示顶部动画效果)
 *
 */

class Carousel2Activity : AppCompatActivity() {
    var binding: ActivityCarousel2Binding? = 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_carousel2)
        initView()
    }

    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) {
            }
        })
    }


}

总结

Banner实现的第二种效果,参考第一种实现 第二种改变布局位置就可以实现不同的效果

注意!!!
MotionScene 文件放在新建的../res/xml文件夹下
*写作不容易,且赞且珍惜!!!*

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4.Carousel 旋转木马Google介绍

5. 源码地址