基于Android实现自动滚动布局_Android

前言

在平时的开发中，有时会碰到这样的场景，设计上布局的内容会比较紧凑，导致部分机型上某些布局中的内容显示不完全，或者在数据内容多的情况下，单行无法显示所有内容。这时如果要进行处理，无非就那几种方式：换行、折叠、缩小、截取内容、布局自动滚动等。而这里可以简单介绍下布局自动滚动的一种实现方式。

1. 布局自动滚动的思路

要实现滚动的效果，在android中无非两种，吸附式的滚动或者顺滑式的滚动，吸附式就是类似viewpager换页的效果，如果需求上是要实现这样的效果，可以使用viewpager进行实现，这个类型比较简单，这里就不过多介绍。另一种是顺滑的，非常丝滑的缓慢移动的那种，要实现这种效果，可以使用recyclerview或者scrollview来实现。我这里主要使用scrollview会简单点。

滑动的控件找到了，那要如何实现丝滑的自动滚动呢？我们都知道scrollview能用scrollto和scrollby去让它滚动到某个位置，但如何去实现丝滑的效果？

这里就用到了属性动画

所以我这边会使用scrollview和属性动画来实现这个效果

2. 最终效果

可以写个demo来看看最终的效果

这就是一个横向自动滚动的效果。

3. 代码实现

先写个接口定义自动滚动的行为

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        // 滚动到底后，是否循环滚动
    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)
    }

}

能看到实现这个功能，写的代码不会很多。其中主要需要注意一些点：
(1)属性动画要熟，我这里只是简单的效果，但如果你对属性动画能熟练使用的话，你还可以做到加速、减速等效果
(2)页面关闭的时候要调用autostop去关闭动画
(3)这里是用scrollto去实现滚动的效果，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()
}