Android新控件之MotionLayout實(shí)現(xiàn)Banner循環(huán)效果:循環(huán)播放,自定義切換動(dòng)畫(huà)<十一>

Banner效果.gif

原先實(shí)現(xiàn)Banner效果無(wú)非是ViewPager,或者RecyclerView 然后再更改切換的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)Banner的切換動(dòng)畫(huà)效果,

現(xiàn)在好了MotionLayout 搭配 Carousel(旋轉(zhuǎn)木馬)提供了一個(gè)新的思路,既提供了無(wú)線旋轉(zhuǎn),又能通過(guò)MotionScene來(lái)定義動(dòng)畫(huà)效果

需求:

  • 無(wú)線旋轉(zhuǎn)
  • 選中變大
  • 取消選種便會(huì)原先
  • 還可以增加透明半透明效果(gif展示不太明顯,可以去看源碼).

需要知識(shí)點(diǎn)

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

  1. MotionLayout 知識(shí)學(xué)習(xí)(可以看前邊的博客)
  2. Carousel (旋轉(zhuǎn)木馬)

1. MotionLayout 知識(shí)點(diǎn)學(xué)習(xí)

2.Carousel 簡(jiǎn)單配置說(shuō)明

    <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>

屬性說(shuō)明

Carousel 助手還需要設(shè)置幾個(gè)屬性：

  `app:carousel_firstView`：表示輪播的第一個(gè)元素的視圖，在我們的示例中，C
   `app:carousel_previousState`:`ConstraintSet`前一個(gè)狀態(tài)的id
   `app:carousel_nextState`:`ConstraintSet`下一個(gè)狀態(tài)的id
   `app:carousel_backwardTransition`:[`Transition`](MotionScene 中 Transition 的id) 在 start -> previous 之間應(yīng)用的 id
  `app:carousel_forwardTransition`:`Transition`在 start -> next 之間應(yīng)用的 id

   app:carousel_emptyViewsBehavior="gone" Carousel 助手將這些視圖標(biāo)記為View.GONE

最后，我們還需要在代碼中設(shè)置一個(gè) 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
            }
        })

功能實(shí)現(xiàn)

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">
    <!--  設(shè)置動(dòng)畫(huà)插值器   motion:motionInterpolator="easeOut"  -->
    <!--  設(shè)置動(dòng)畫(huà)時(shí)常 motion:duration="100"  -->

    <!-- 向前(向左) -->
    <Transition
        android:id="@+id/forward"

        motion:constraintSetEnd="@+id/next"
        motion:constraintSetStart="@+id/start">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>
    <!-- 向后滑動(dòng)(向右) -->
    <Transition
        android:id="@+id/backward"
        motion:constraintSetEnd="@+id/previous"
        motion:constraintSetStart="@+id/start">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorSide="right" />
    </Transition>

    <!-- 開(kāi)始的 -->
    <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>

    <!--  向后(向左滑動(dòng))-->
    <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>


    <!--  向前(向右滑動(dòng))-->
    <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="下一個(gè)"
            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 效果(未處理 僅僅能展示頂部動(dòng)畫(huà)效果)
 *
 */

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

        }
    }


}

注意:

點(diǎn)擊下一個(gè)未實(shí)現(xiàn)循環(huán)旋轉(zhuǎn) 要想實(shí)現(xiàn)可以參考Vp無(wú)線循環(huán)的思路即是最大值然后動(dòng)態(tài)算填充的數(shù)據(jù)

總結(jié)

Banner實(shí)現(xiàn)的另一種方式,方便實(shí)現(xiàn)各種效果的Banner 新控件剛出來(lái) 可以搞一下

注意!!!
MotionScene 文件放在新建的../res/xml文件夾下

參考文獻(xiàn)

1.Google的MotionLayout介紹說(shuō)明

2.MotionLayout的文檔簡(jiǎn)介

3.MotionLayout 源碼地址

4.Carousel 旋轉(zhuǎn)木馬Google介紹

5. 源碼地址

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容