Android 用HorizontalScrollView实现滑动标签tabView

最新推荐文章于 2022-01-20 15:39:11 发布

原创

最新推荐文章于 2022-01-20 15:39:11 发布 · 5.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#android #Android TabView #SlideTabView #HorizontalScrollView #滑动tab标签

这篇博客介绍了如何在Android中使用HorizontalScrollView创建类似今日头条的滑动标签tabView，结合viewpager实现功能，虽然实现过程有些复杂，但通过自定义view、绘制指示器和页面监听，可以达到理想效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顶部滑动tabView,配合viewpager使用，类似于今日头条类那种效果，功能虽小，但是实现起来确实有点麻烦，我也是来回搞了半下午，才达到想要的效果。

大体思路：

1.自定义view，实现HorizontalScrollView。

2.在onDraw方法里绘制指示器，（当然也可以用动画的方式实现这个效果）

3.绑定page监听，根据偏移百分比来确定指示器滑动横坐标

4.刷新view.

OK，废话不多说，直接上代码，注释写的很详细，就不多说了。

package com.lcworld.tab;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * 创建： dongshuaijun .
 * 日期：2016/6/21.
 * 注释：顶部滑动标签栏
 */
public class SlideTabView extends HorizontalScrollView implements ViewPager.OnPageChangeListener {
    //标签布局容器
    private LinearLayout linearLayout;
    //指示器画笔
    private Paint paint;
    //tab容器
    private List<String> list;
    //text容器
    private List<TextView> textViews;
    //当前位置
    private int currIndex = 0;
    //上一次位置
    private int lastIndex = 0;
    //满屏显示数量
    private float maxCount = 3.5f;
    //偏移百分比
    private float offSet;
    //非选中字体颜色
    private int noCurrColor = R.color.noCurrColor;
    //选中字体颜色
    private int currColor = R.color.currColor;
    //指示器颜色
    private int offLineColor = R.color.currColor;
    //背景色
    private int background = R.color.colorPrimary;
    //字体大