Android新控件之MotionLayout实现Banner循
2022-02-05 本文已影响0人
没有了遇见
Banner效果2.gif
原先实现Banner效果无非是ViewPager,或者RecyclerView 然后再更改切换的动画来实现Banner的切换动画效果,
现在好了MotionLayout 搭配 Carousel(旋转木马)提供了一个新的思路,既提供了无线旋转,又能通过MotionScene来定义动画效果
需求:
- 无线旋转
- 退出变小进入变大
- 取消选种便会原先
- 还可以增加透明半透明效果(gif展示不太明显,可以去看源码).
需要知识点
基于 'androidx.constraintlayout:constraintlayout:2.+' 的新控件
- MotionLayout 知识学习(可以看前边的博客)
- Carousel (旋转木马)
1. MotionLayout 知识点学习
<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
}
})
功能实现
位置说明.jpg
1.MotionScene 的xml scene_carousel2.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.6"
android:id="@+id/one"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="1.0"
android:id="@+id/two"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/three"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.6"
android:id="@+id/three"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<!-- 向后(向左滑动)-->
<ConstraintSet android:id="@+id/next">
<Constraint
android:id="@+id/one"
android:alpha="0.6"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/two"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
android:alpha="0.6"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/three"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:alpha="1.0"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@+id/four"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent"
/>
<Constraint
android:alpha="0.6"
android:id="@+id/four"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<!-- 向前(向右滑动)-->
<ConstraintSet android:id="@+id/previous">
<Constraint
android:alpha="1.0"
android:id="@+id/one"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/two"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.6"
android:id="@+id/two"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:alpha="0.6"
android:id="@+id/three"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="@+id/two"
motion:layout_constraintTop_toTopOf="parent"
/>
</ConstraintSet>
</MotionScene>
2.布局 xml activity_carousel2.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_carousel2">
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/one"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:scaleType="centerCrop"
android:src="@drawable/goldengate"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:round="8dp" />
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/two"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:src="@drawable/bryce_canyon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/three"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:round="8dp" />
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/three"
android:layout_width="60dp"
android:layout_height="200dp"
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_constraintTop_toTopOf="parent"
app:round="8dp" />
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/four"
app:round="8dp"
android:layout_width="60dp"
android:layout_height="200dp"
android:layout_marginStart="16dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
android:src="@drawable/death_valley"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/three"
app:layout_constraintTop_toTopOf="parent" />
<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="one,two,three,four" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</layout>
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<ActivityCarousel2Binding>(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文件夹下
*写作不容易,且赞且珍惜!!!*
