快捷導(dǎo)航

基于Android實(shí)現(xiàn)自動(dòng)滾動(dòng)布局

更新時(shí)間：2023年12月07日 08:37:25 作者：流浪漢kylin

在平時(shí)的開發(fā)中,有時(shí)會(huì)碰到這樣的場景,設(shè)計(jì)上布局的內(nèi)容會(huì)比較緊湊,導(dǎo)致部分機(jī)型上某些布局中的內(nèi)容顯示不完全,或者在數(shù)據(jù)內(nèi)容多的情況下,單行無法顯示所有內(nèi)容,這里給大家簡單介紹下布局自動(dòng)滾動(dòng)的一種實(shí)現(xiàn)方式,感興趣的朋友可以參考下

前言

在平時(shí)的開發(fā)中，有時(shí)會(huì)碰到這樣的場景，設(shè)計(jì)上布局的內(nèi)容會(huì)比較緊湊，導(dǎo)致部分機(jī)型上某些布局中的內(nèi)容顯示不完全，或者在數(shù)據(jù)內(nèi)容多的情況下，單行無法顯示所有內(nèi)容。這時(shí)如果要進(jìn)行處理，無非就那幾種方式：換行、折疊、縮小、截取內(nèi)容、布局自動(dòng)滾動(dòng)等。而這里可以簡單介紹下布局自動(dòng)滾動(dòng)的一種實(shí)現(xiàn)方式。

1. 布局自動(dòng)滾動(dòng)的思路

要實(shí)現(xiàn)滾動(dòng)的效果，在Android中無非兩種，吸附式的滾動(dòng)或者順滑式的滾動(dòng)，吸附式就是類似viewpager換頁的效果，如果需求上是要實(shí)現(xiàn)這樣的效果，可以使用viewpager進(jìn)行實(shí)現(xiàn)，這個(gè)類型比較簡單，這里就不過多介紹。另一種是順滑的，非常絲滑的緩慢移動(dòng)的那種，要實(shí)現(xiàn)這種效果，可以使用RecyclerView或者ScrollView來實(shí)現(xiàn)。我這里主要使用ScrollView會(huì)簡單點(diǎn)。

滑動(dòng)的控件找到了，那要如何實(shí)現(xiàn)絲滑的自動(dòng)滾動(dòng)呢？我們都知道ScrollView能用scrollTo和scrollBy去讓它滾動(dòng)到某個(gè)位置，但如何去實(shí)現(xiàn)絲滑的效果？

這里就用到了屬性動(dòng)畫

所以我這邊會(huì)使用ScrollView和屬性動(dòng)畫來實(shí)現(xiàn)這個(gè)效果

2. 最終效果

可以寫個(gè)Demo來看看最終的效果

這就是一個(gè)橫向自動(dòng)滾動(dòng)的效果。

3. 代碼實(shí)現(xiàn)

先寫個(gè)接口定義自動(dòng)滾動(dòng)的行為

interface Autoscroll {

    // 開始自動(dòng)滾動(dòng)
    fun autoStart()
    
    // 停止自動(dòng)滾動(dòng)
    fun autoStop()

}

然后自定義一個(gè)View繼承ScrollView，方便閱讀，在代碼中加了注釋

// 自定義View繼承HorizontalScrollView，我這里演示橫向滾動(dòng)的，縱向可以使用ScrollView
class HorizontalAutoscrollLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : HorizontalScrollView(context, attrs, defStyleAttr), Autoscroll {

    // 一些流程上的變量，可以自己去定義，變量多的情況也可以使用builder模式
    var isLoop = true        // 滾動(dòng)到底后，是否循環(huán)滾動(dòng)
    var loopDelay = 1000L    // 滾動(dòng)的時(shí)間
    var duration = 1000L     // 每一次滾動(dòng)的間隔時(shí)間

    private var offset: Int = 0
    val loopHandler = Handler(Looper.getMainLooper())
    var isAutoStart = false

    private var animator: ValueAnimator? = null

    override fun autoStart() {
        // 需要計(jì)算滾動(dòng)距離所以要把計(jì)算得代碼寫在post里面，等繪制完才拿得到寬度
        post {
            var childView = getChildAt(0)
            childView?.let {
                offset = it.measuredWidth - width
            }

            // 判斷能否滑動(dòng)，這里只判斷了一個(gè)方向，如果想做兩個(gè)方向的話，多加一個(gè)變量就行
            if (canScrollHorizontally(1)) {
                animator = ValueAnimator.ofInt(0, offset)
                    .setDuration(duration)
                // 屬性動(dòng)畫去緩慢改變scrollview的滾動(dòng)位置，抽象上也可以說改變scrollview的屬性
                animator?.addUpdateListener {
                    val currentValue = it.animatedValue as Int
                    scrollTo(currentValue, 0)
                }
                animator?.addListener(object : Animator.AnimatorListener {
                    override fun onAnimationStart(animation: Animator) {

                    }

                    override fun onAnimationEnd(animation: Animator) {
                        // 動(dòng)畫結(jié)束后判斷是否要重復(fù)播放
                        if (isLoop) {
                            loopHandler?.postDelayed({
                                if (isAutoStart) {
                                    scrollTo(0, 0)
                                    autoStart()
                                }
                            }, loopDelay)
                        }
                    }

                    override fun onAnimationCancel(animation: Animator) {

                    }

                    override fun onAnimationRepeat(animation: Animator) {

                    }

                })
                animator?.start()
                isAutoStart = true
            }

        }
    }

    // 動(dòng)畫取消
    override fun autoStop() {
        animator?.cancel()
        isAutoStart = false
        loopHandler.removeCallbacksAndMessages(null)
    }

}

能看到實(shí)現(xiàn)這個(gè)功能，寫的代碼不會(huì)很多。其中主要需要注意一些點(diǎn)：
(1)屬性動(dòng)畫要熟，我這里只是簡單的效果，但如果你對(duì)屬性動(dòng)畫能熟練使用的話，你還可以做到加速、減速等效果
(2)頁面關(guān)閉的時(shí)候要調(diào)用autoStop去關(guān)閉動(dòng)畫
(3)這里是用scrollTo去實(shí)現(xiàn)滾動(dòng)的效果，scrollBy也可以，但是寫法就不是這樣了

從代碼可以看出沒什么難點(diǎn)，都是比較基礎(chǔ)的知識(shí)，比較重要的知識(shí)就是屬性動(dòng)畫，熟練的話做這種效果的上限就很高。其他的像這里為什么用post，為什么用scrollTo，這些就是比較基礎(chǔ)的知識(shí)，就不擴(kuò)展講了。

最后看看使用的地方，先是Demo的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.kylin.testproject.HorizontalAutoscrollLayout
        android:id="@+id/auto_scroll"
        android:layout_width="150dp"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="小日本"
                />

            <ImageView
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:scaleType="fitXY"
                android:src="@drawable/a"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="排放核廢水污染海洋"
                />

            <ImageView
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:scaleType="fitXY"
                android:src="@drawable/b"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="，必遭天譴??！"
                />

        </LinearLayout>

    </com.kylin.testproject.HorizontalAutoscrollLayout>

</LinearLayout>

然后在開始播放自動(dòng)滾動(dòng)（注意頁面關(guān)閉的時(shí)候要手動(dòng)停止）

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val autoScroll: HorizontalAutoscrollLayout = findViewById(R.id.auto_scroll)
    autoScroll.duration = 3000
    autoScroll.loopDelay = 2000
    autoScroll.autoStart()
}