Android新控件之MotionLayout实现Banner循

作者: 没有了遇见 | 来源:发表于2022-02-05 11:20 被阅读0次

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 新控件刚出来可以搞一下

Android新控件之MotionLayout实现Banner循

需求:

需要知识点

1. MotionLayout 知识点学习

2.Carousel 简单配置说明

功能实现

1.MotionScene 的xml scene_carousel.xml

2.布局 xml activity_carousel.xml

3.代码

注意:

总结

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4.Carousel 旋转木马Google介绍

5. 源码地址

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

动画