学习AdapterViewFlipper 图片、文字 轮播动画控件
1. 问题/坑点
1.1 item宽高不生效问题
需要注意的是,AdapterViewFlipper 在布局时,宽高一定要用 match_parent
或者 具体dp值。
如果宽、高中使用了 wrap_content
时,会导致 AdapterViewFlipper
容器的宽高,最终变成第一个item的宽高。即使后续item的宽高超过第一个item,也不会生效,内容显示只会被限定在第一个的宽高范围内。
原理也很好理解,后续item没有绘制出来时, wrap_content
计算出来的结果,就是第一个item的宽高。当后续 item 显示的时候,没有地方去重新更新父容器 AdapterViewFlipper
的宽高。
2. 常用方法
AdapterViewAnimator支持的XML属性如下:
android:animateFirstView:设置显示组件的第一个View时是否使用动画。
android:inAnimation:设置组件显示时使用的动画。
android:loopViews:设置循环到最后一个组件时是否自动跳转到第一个组件。
android:outAnimation:设置组件隐藏时使用的动画。
轮播控制:
startFlipping
、stopFlipping
: 开始、停止播放showPrevious
、showNext
:上一个、下一个轮播状态与参数
isFlipping
:是否轮播中flipInterval
: 动画间隔设置入场、出场动画:
setInAnimation
、setOutAnimation
3. 文字/图片 轮播 Demo
/** * 图片/文字轮播 * 坑点:text_flipper height 如果设置wrap_content 导致item宽度只会以第一个item的为准 */ class FlipperAnimActivity : AppCompatActivity(), View.OnClickListener { private var textFlipper: AdapterViewFlipper? = null private var imgFlipper: AdapterViewFlipper? = null private var preBtn: Button? = null private var nextBtn: Button? = null private var autoBtn: Button? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_flipper_anim) initTextFlipper() initImgFlipper() } // 文字轮播 private fun initTextFlipper() { textFlipper = findViewById(R.id.text_flipper) val list = listOf("文字轮播测试0", "文字轮播测试02...") textFlipper?.adapter = TextFlipperAdapter(this, list) textFlipper?.setInAnimation(this, R.animator.text_flipper_in_from_bottom) textFlipper?.setOutAnimation(this, R.animator.text_flipper_out_to_top) // textFlipper?.flipInterval // textFlipper?.startFlipping() } // 图片轮播 private fun initImgFlipper() { imgFlipper = findViewById(R.id.img_flipper) val list = listOf("http://www.nicesoso.com/test/file/img/test.jpg", "http://www.nicesoso.com/test/file/img/test_h_1.jpg", "http://www.nicesoso.com/test/file/img/test_h_2.jpg") imgFlipper?.adapter = ImgFlipperAdapter(this, list) imgFlipper?.setInAnimation(this, R.animator.img_flipper_in) preBtn = findViewById(R.id.prev_btn) nextBtn = findViewById(R.id.next_btn) as Button autoBtn = findViewById(R.id.auto_btn) as Button preBtn?.setOnClickListener(this) nextBtn?.setOnClickListener(this) autoBtn?.setOnClickListener(this) } override fun onClick(v: View?) { when (v?.id) { R.id.prev_btn -> { imgFlipper?.showPrevious() imgFlipper?.stopFlipping() } R.id.next_btn -> { imgFlipper?.showNext() imgFlipper?.stopFlipping() } R.id.auto_btn -> { imgFlipper?.startFlipping() } } } override fun onDestroy() { super.onDestroy() textFlipper?.takeIf { it.isFlipping }?.stopFlipping() imgFlipper?.takeIf { it.isFlipping }?.stopFlipping() } }复制代码
3.1 文字轮播:TextFlipperAdapter
class TextFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() { override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View { val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.item_flipper_text, parent, false) val textView = view?.findViewById<TextView?>(R.id.text) textView?.text = datas.get(position) return view } override fun getItem(position: Int): Any { return datas.get(position) } override fun getItemId(position: Int): Long { return position.toLong() } override fun getCount(): Int { return datas.size } }复制代码
3.2 图片轮播:ImgFlipperAdapter
class ImgFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() { override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View { val view = convertView ?: ImageView(context) (view as? ImageView)?.scaleType = ImageView.ScaleType.FIT_XY view.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT) (view as? ImageView)?.let { Glide.with(context).load(datas.get(position)).into(it) } return view } override fun getItem(position: Int): Any { return datas.get(position) } override fun getItemId(position: Int): Long { return position.toLong() } override fun getCount(): Int { return datas.size } }复制代码
3.3 布局:activity_flipper_anim.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:background="@android:color/holo_red_light" android:orientation="vertical"> <!--宽高要必须设置填充满,否则wrap_content时,大小变成第一个item的大小--> <AdapterViewFlipper android:id="@+id/text_flipper" android:layout_width="match_parent" android:layout_height="match_parent" android:autoStart="true" android:flipInterval="2000" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <AdapterViewFlipper android:id="@+id/img_flipper" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:flipInterval="5000" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:gravity="center" android:text="图片轮播测试(5s)" android:textSize="24sp" /> <Button android:id="@+id/prev_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" android:text="上一个" /> <Button android:id="@+id/next_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="下一个" /> <Button android:id="@+id/auto_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:text="自动播放" /> </RelativeLayout> </LinearLayout>复制代码
3.4 动画
文字轮播,入场动画:res/animator/text_flipper_in_from_bottom.xml
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="100" android:valueTo="0" android:valueType="floatType" />复制代码
文字轮播,出场动画:res/animator/text_flipper_out_to_top.xml
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="0" android:valueTo="-100" android:valueType="floatType" />复制代码
图片轮播,入场动画:res/animator/img_flipper_in.xml
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="x" android:valueFrom="500" android:valueTo="0" android:valueType="floatType" />复制代码
文末 您的点赞收藏就是对我最大的鼓励! 欢迎关注我的简书,分享Android干货,交流Android技术。 对文章有何见解,或者有何技术问题,欢迎在评论区一起留言讨论!
作者:Misdirection
链接:https://juejin.cn/post/7038426069048754207
伪原创工具 SEO网站优化 https://www.237it.com/