美文网首页动画
Android新控件之MotionLayout实现Banner循

Android新控件之MotionLayout实现Banner循

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

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

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

需求:

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

需要知识点

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

  1. MotionLayout 知识学习(可以看前边的博客)
  2. 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文件夹下

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4.Carousel 旋转木马Google介绍

5. 源码地址

相关文章

网友评论

    本文标题：Android新控件之MotionLayout实现Banner循

    本文链接：https://www.haomeiwen.com/subject/smbekrtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    动画

    关于我们|服务条款|联系我们|Android新控件之MotionLayout实现Banner循|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！