AdapterViewFlipper 图片文字 轮播动画控件

AdapterViewFlipper 图片文字 轮播动画控件

1. 问题/坑点

1.1 item宽高不生效问题

需要注意的是，AdapterViewFlipper 在布局时，宽高一定要用 match_parent 或者 具体dp值。

如果宽、高中使用了 wrap_content 时，会导致 AdapterViewFlipper 容器的宽高，最终变成第一个item的宽高。即使后续item的宽高超过第一个item，也不会生效，内容显示只会被限定在第一个的宽高范围内。

原理也很好理解，后续item没有绘制出来时， wrap_content 计算出来的结果，就是第一个item的宽高。当后续 item 显示的时候，没有地方去重新更新父容器 AdapterViewFlipper 的宽高。

2. 常用方法

1. AdapterViewAnimator支持的XML属性如下：
   • android:animateFirstView：设置显示组件的第一个View时是否使用动画。
   • android:inAnimation：设置组件显示时使用的动画。
   • android:loopViews：设置循环到最后一个组件时是否自动跳转到第一个组件。
   • android:outAnimation：设置组件隐藏时使用的动画。
2. 轮播控制：
   • startFlipping、stopFlipping : 开始、停止播放
   • showPrevious、showNext：上一个、下一个
3. 轮播状态与参数
   • isFlipping：是否轮播中
   • flipInterval: 动画间隔
4. 设置入场、出场动画：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)