横向滚动导航栏（点击+滑动+横线）

最新推荐文章于 2024-08-22 15:31:06 发布

半把秋风

最新推荐文章于 2024-08-22 15:31:06 发布

阅读量1.3w

点赞数 2

分类专栏：自定义控件文章标签：移动

本文链接：https://blog.csdn.net/qq_27899045/article/details/53199791

版权

本文介绍如何实现一个具有横向滑动、点击显示更多标签以及红线跟随标签移动功能的导航栏。通过HorizontalScrollView实现滑动，自定义控件HorizontalScrollTabStrip处理标签点击和动画，同时在MainActivity中处理滚动事件。点击标签时，若未完全显示会进行位移动画，滚动监听则确保红线始终跟随激活的标签。

摘要由CSDN通过智能技术生成

项目出现新的需求
需求截图
具体是：
1. 可左右滑动
2. tab初始显示4.5个，点击到未显示的需要显示出来，点击tag后面（如果是点击左侧的，指前面）还存在未显示的tag，显示出半个来，并且地下红线需要跟着标签移动（后来实现后发现当前高亮的tag如果被滑出屏幕，红线还在屏幕内，自己又添加了滚出屏幕的实现）;

思路
1. 首先实现上需要可滑动，那么一般性的会选择 HorizontalScrollView，而不适用其他的ViewGroup，以下简称sv
2. 首先向sv中添加一个LinearLayout，横向，然后添加子tag
3. 子tag的点击效果的实现，并同步“线”的动画（在此，红线适用了单独的布局，并未整合到自定义控件中）
4. 实现滚动事件，并同步线的动画

实现后的效果
完成后的效果图

代码

布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.qiufeng.horizontalscrolltabstrip.weight.HorizontalScrollTabStrip
        android:id="@+id/id_horizontal_view"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="@android:color/white" >
    </com.qiufeng.horizontalscrolltabstrip.weight.HorizontalScrollTabStrip>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:orientation="horizontal" >

        <View
            android:id="@+id/id_line"
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@android:color/holo_red_light" />
    </LinearLayout>


</LinearLayout>

自定义控件HorizontalScrollTabStrip.java

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

import android.annotation.SuppressLint;
import android.app.Service;
import android.content.Context;
import android.graphics.Color;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 自定义滚动横向导航
 * 
 * @author 秋风
 * 
 */
@SuppressLint("HandlerLeak")
public class HorizontalScrollTabStrip extends HorizontalScrollView {
   
    /** tag标题 */
    private List<String> mTitles;
    /** 标签容器 */
    private LinearLayout tabsContainer;
    /** 屏幕宽度 */
    private int mScreenWidth;
    /** 默认显示的标签数量 */
    public int mDefaultShowTagCount = 4;
    /** 标签数量 */
    private in