Android

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

复制代码

参考

AdapterViewFlipper轻松完成图片轮播

作者：小明code
链接：https://juejin.cn/post/6954741671531642910
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

0

2021-04-25

0 个评论

要回复文章请先登录或注册

AdapterViewFlipper 图片/文字轮播动画控件

1. 问题/坑点

1.1 item宽高不生效问题

2. 常用方法

3. 文字/图片轮播 Demo

3.1 文字轮播：TextFlipperAdapter

3.2 图片轮播：ImgFlipperAdapter

3.3 布局：activity_flipper_anim.xml

3.4 动画

参考

0 个评论

发起人

推荐内容

AdapterViewFlipper 图片/文字 轮播动画控件

1. 问题/坑点

1.1 item宽高不生效问题

2. 常用方法

3. 文字/图片 轮播 Demo

3.1 文字轮播：TextFlipperAdapter

3.2 图片轮播：ImgFlipperAdapter

3.3 布局：activity_flipper_anim.xml

3.4 动画

参考

0 个评论

发起人

推荐内容

AdapterViewFlipper 图片/文字轮播动画控件

3. 文字/图片轮播 Demo