简单利用横向HorizontalScrollView实现按tab下标自动滑动到指定tab的tabs效果

直接上代码：

实例xml代码

        android:id="@+id/horizontalSv"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:scrollbars="none"

        >

   

            android:id="@+id/topTabLl"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            >

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是1"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是2"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是3"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是4"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是5"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是6"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginRight="25dp"

                android:text="我是7"

        />

       

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="我是8"

        />

   

 

kotlin中代码实例

入口代码：

var num = 0

下面这几行写在函数内传num值进来，在goitem中做处理

if (num == 8) {

    num = 0

}

goItem(num)

num++

 

页面不能滑的代码

override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {

    if (ev?.action == MotionEvent.ACTION_MOVE) return true

    return super.dispatchTouchEvent(ev)

}

 

goitem函数中的代码，主要是利用每个tab的宽度+属性动画+布局重绘实现

fun goItem(index: Int){

    Logger.i("--------当前下标：$index，位移开始值：$startNum")

    var currentNum = 0

    for (position in 0 until topTabLl.childCount){

        (topTabLl.getChildAt(position) as TextView).setTextColor(Color.BLACK)

        if (index > position){

            currentNum += (topTabLl.getChildAt(position).measuredWidth + topTabLl.getChildAt(position).marginRight)

            if(position == index - 1){

                currentNum -= (topTabLl.getChildAt(index - 1).measuredWidth + topTabLl.getChildAt(index - 1).marginRight) / 2

            }

        }

    }

    (topTabLl.getChildAt(index) as TextView).setTextColor(Color.RED)

    if (index == 0 || index == topTabLl.childCount){

        currentNum = 0

        startNum = 0

    }

    Logger.i("--------当前动画的开始值：$startNum，当前动画的结束数值：$currentNum，当前往x轴负方向位移的值：${-currentNum}")

    var anim = ValueAnimator.ofInt(startNum, currentNum)

    anim.addUpdateListener {

        var params = horizontalSv.layoutParams as LinearLayout.LayoutParams

        params.setMargins(-(it.animatedValue as Int),0,0,0)

        horizontalSv.requestLayout()

    }

    anim.addListener(

        onEnd = {

            startNum = currentNum

        }

    )

    anim.duration = 500

    anim.start()

}