Android基於AdapterViewFlipper實現的圖片/文字輪播動畫控制元件

2021-04-26 10:01:03

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

文字item佈局：item_flipper_text.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_weight="1"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:maxLines="1"
        android:textSize="22sp" />
</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" />

參考

https://www.jb51.net/article/210687.htm

以上就是Android基於AdapterViewFlipper實現的圖片/文字輪播動畫控制元件的詳細內容，更多關於Android 實現圖片/文字輪播動畫控制元件的資料請關注it145.com其它相關文章！