基于Android實現(xiàn)自動滾動布局

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

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

前言

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

1. 布局自動滾動的思路

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

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

這里就用到了屬性動畫

所以我這邊會使用ScrollView和屬性動畫來實現(xiàn)這個效果

2. 最終效果

可以寫個Demo來看看最終的效果

這就是一個橫向自動滾動的效果。

3. 代碼實現(xiàn)

先寫個接口定義自動滾動的行為

interface Autoscroll {

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

}

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

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

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

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

    private var animator: ValueAnimator? = null

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

            // 判斷能否滑動，這里只判斷了一個方向，如果想做兩個方向的話，多加一個變量就行
            if (canScrollHorizontally(1)) {
                animator = ValueAnimator.ofInt(0, offset)
                    .setDuration(duration)
                // 屬性動畫去緩慢改變scrollview的滾動位置，抽象上也可以說改變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) {
                        // 動畫結束后判斷是否要重復播放
                        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
            }

        }
    }

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

}

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

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

最后看看使用的地方，先是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>

然后在開始播放自動滾動（注意頁面關閉的時候要手動停止）

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