Android自定义控件---导航栏SlideTab(Fragment+ViewPager)

一、前言

好久没有更新过博客了，趁今天有空分享一个导航栏的自定义控件。有关此控件的demo相信在网上已经烂大街了，一搜一大把。

我现在只着重分享一些我认为比较难理解的知识点。整个控件的难点大概有三个

1、游标的绘制。

2、ViewPager监听器的理解。

3、游标的移动。

本文将注重这三个方面重点分析。

先上Demo的最终效果

二、Demo结构图和知识点

样例Module，有四个java文件和两个xml文件



总结一下此控件的主要知识点

1、ViewGroup绘制流程。

2、ViewPager的用法。

3、OnPageChangeListener接口的用法。

4、scrollTo方法的使用。

需要完整代码，请看底部链接，谢谢！(^_^)。下面我直接讲核心代码。

三、SlideTab导航栏控件

（1）SlideTab继承了HorizontalScrollView控件之后，咋们需要重写onDraw方法。接下来需要看个图了解SlideTab控件的内部组成



整个SlideTab控件就是由这三个类型的控件组成。假设SlideTab控件已经初始化完成了。第一次由系统开始调用onDraw方法。

/**
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取当前Tab的左右两边的横坐标值
View currentTabView = horizontalContainer.getChildAt(currentPosition);
float currentTabLeftX = currentTabView.getLeft();
float currentTabRightX = currentTabView.getRight();
int childCount = horizontalContainer.getChildCount();
//ViewPager在滑动的过程中会重复调用onDraw方法。下面if语句的内容是用来计算游标的起点坐标和终点坐标
if (currentPositionOffset > 0f && currentPosition < childCount - 1) {
//获取下一个Tab左右两边的横坐标值
View nextTab = horizontalContainer.getChildAt(currentPosition + 1);
float nextTabLeftX = nextTab.getLeft();
float nextTabRightX = nextTab.getRight();
//计算起点
currentTabLeftX = (currentPositionOffset * nextTabLeftX + (1f - currentPositionOffset)
* currentTabLeftX);
//计算终点
currentTabRightX = (currentPositionOffset * nextTabRightX + (1f - currentPositionOffset)
* currentTabRightX);
}
//绘制下划线
//        drawUnderline(canvas, horizontalContainer);
//绘制指示器
drawIndicator(canvas, currentTabLeftX, currentTabRightX);
}

currentPosition变量的初始值为0。

第8行代码View currentTabView = horizontalContainer.getChildAt(currentPosition);获取到LinearLayout容器里面第一个View（实际是TextView）视图。

第9,10行分别得到View视图的左上角坐标和右上角坐标。

第11行获取LinearLayout容器中TextView控件的总数。

第13行的判断语句。currentPositionOffset 这是一个记录着当前页面滑动过程中的偏移量（如果不理解先放下，后面再讲）初始值为0，很明显，currentPositionOffset 不大于 0f，if语句不成立，略过（if语句里面的内容稍后再分析）。继续往下走。

来到底28行执行drawIndicator方法，开始绘制游标。

（2）现在来解决此控件的第一个难点，游标的绘制。

这个游标实际上是一条线。要画一条先就必须得确定两点的坐标值（初中知识，两点才能确定一条直线嘛）。

/**
* 绘制游标
*
* @param canvas        SlideTab控件的画板
* @param currentLeftX  标题控件的左坐标
* @param currentRightX 标题控件的右坐标
*/
private void drawIndicator(Canvas canvas, float currentLeftX, float currentRightX) {
float indicatorMiddle = (indicatorPaint.getStrokeWidth() / 2);
float indicatorY = getHeight() - indicatorMiddle;
canvas.drawLine(currentLeftX, indicatorY, currentRightX, indicatorY, indicatorPaint);
}

为了更好的理解这几段代码，还是画个图。下图黑色框是LinearLayout容器，绿色框是游标。



绿色框高度的值就是indicatorPaint.getStrokeWidth()。接下的工作就是计算下图左右两边的橙色点。



红色横线表示currentLeftX变量。

蓝色横线表示currentRightX变量。

红色竖线表示indicatorMiddle变量。

粉色竖线表示indicatorY变量。

由第9,10行的计算方法得到

左边橙色坐标点（currentLeftX，indicatorY）。

右边橙色坐标点（currentRightX，indicatorY）。

在第11行调用canvas.drawLine方法（这是一个绘制直线的方法）绘制游标。这个方法的最后的参数indicatorPaint是一个画笔（用来描述这个直线的状态，例如颜色，宽度，直线末端是否圆角等等。）

以上的内容就是游标绘制的流程。

（3）绘制好游标之后如何让导航栏控件跟随着ViewPager的滑动而滑动呢？现在我们需要写一个setViewPager方法，将(Fragment+ViewPager)与SlideTab控件关联起来。这个方法是提供给用户（使用你控件的程序猿）调用。他们只需要传来一个ViewPager的实例和一个标题名称数组即可完成此控件的调用。

/**
* @param viewPager   用户传进来的ViewPager
* @param titleString 标题名称
*/
public void setViewPager(ViewPager viewPager, String[] titleString) {
this.viewPager = viewPager;
addTab(titleString);
//设置ViewPager监听事件
viewPager.addOnPageChangeListener(new SlideTabPageViewListener());
}
/**
* 添加Tab
*
* @param titleString 标题数组
*/
private void addTab(String[] titleString) {
//清空所有控件
horizontalContainer.removeAllViews();
for (int i = 0; i < viewPager.getAdapter().getCount(); i++) {
//创建垂直容器，用来包裹住下面TextView
tabVerticalContainer = new LinearLayout(context);
tabVerticalContainer.setOrientation(LinearLayout.VERTICAL);
tabVerticalContainer.setHorizontalGravity(Gravity.CENTER_HORIZONTAL);
//设置点击事件
tabVerticalContainer.setOnClickListener(new ViewPagerClickListener(i));
tabVerticalContainer.setVerticalGravity(Gravity.CENTER_VERTICAL);
//将垂直LinearLayout容器放入水平LinearLayout容器中
horizontalContainer.addView(tabVerticalContainer, isExtendTab ? expandedTabLayoutParams
: defaultTabLayoutParams);
if (titleString != null) {
//创建标题
TextView textViews = new TextView(context);
textViews.setText(titleString[i]);
textViews.setTextSize(14);
textViews.setTextColor(Color.parseColor("#000000"));
textViews.setSingleLine(true);
tabVerticalContainer.addView(textViews, textViewLayoutParams);
}
}
}

第8行是一个自定义方法。根据ViewPager的页面总数，设置标题导航栏。逻辑比较简单只是单纯的堆代码，咋们略过吧。

我们重点关注第10行代码。ViewPager注册了一个监听事件的实例。此实例有三个回调方法用来监听用户对屏幕的滑动操作。具体详情请往下看，（SlideTab控件的游标滑动与这个监听事件有很大关系。）

（4）SlideTabPageViewListener是SlideTab控件的内部类，实现了ViewPager.OnPageChangeListener接口，这个接口必须实现3个方法。

现在来解决第2个难点。就是ViewPager的监听事件。

public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels)

当你滑动页面的时候会调用此方法，在滑动停止之前，此方法回一直被调用。

position表示当前页面的下标。例如你有三个选项卡，现在从第一页滑动到第二页的过程中，这个position的下标是0（下标从0开始），滑动到第二页position的时候下标就变成1了。

positionOffset表示当前页面偏移的百分比。这个参数我们待会就会用到。

positionOffsetPixels表示当前页面偏移的像素，一般情况不用。



public void onPageScrollStateChanged(int state)

当ViewPager页面的状态被改变的时候会调用此方法。怎么理解这句话呢？

1、假如你触摸屏幕从第一页滑动到第二页这个过程中，会回调此方法（如果你手指一直处于滑动状态此方法就会一直被调用），传过来的state的值是1表示正在滑动。

2、滑动结束之后，会再次回调此方法，传过来的state的值是2表示滑动结束了。

3、结束滑动之后如果没有其他的滑动操作，会再次回调此方法，传过来的state的值是0，表示ViewPager处理闲置状态。

public void onPageSelected(int position)

此方法是从当前页面滑动到另一个页面才会调用，并且这个position是新页面的下标。注意如果你从当前页往下一页滑动的过程中（不松手）又滑回原页面，此方法不会调用。

以上关于ViewPager的OnPageChangeListener接口的方法详情，有了这些基础之后就比较好解释SlideTabPageViewListener内部类。

（5）SlideTabPageViewListener内部类

/**
* ViewPager滚动监听事件
*/
public class SlideTabPageViewListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
currentPosition = position;
currentPositionOffset = positionOffset;
scrollToCurrentPosition(position, (int) (positionOffset * (horizontalContainer)
.getChildAt(position).getWidth()));
//重新绘制onDraw方法
invalidate();
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onPageSelected(int position) {
}
}

最后，咋们来解决此控件的最后一个难题，如何控制游标的移动。这是我感觉最难讲清楚的一部分。

假设咋们正在触摸屏幕从第一页滑动到第二页，在这个过程中。以上的onPageScrolled方法会一直被调用。

第8,9行的代码是更新当前最新的页面下标（currentPosition ）和页面的偏移值（currentPositionOffset ）。这两个变量咋们已经在上面的onDraw方法中见过。

第10行调用scrollToCurrentPosition方法（这个方法很重要）。将当前的页面下标（值为0）和当前View（TextView）的偏移值传递过去。具体代码如下。

/*****
*
*
* @param position
* @param offset
*/
public void scrollToCurrentPosition(int position, int offset) {
int currentOffsetX = horizontalContainer.getChildAt(position).getLeft() + offset;
int startScrollX = currentOffsetX;
if (position > 0 || offset > 0) {
//remainOffset表示剩余偏移量
startScrollX = currentOffsetX - remainOffset;
}
//如果位移发生变化，则滑动
if (startScrollX != lastScrollX) {
//更新最后一次滑动的距离
lastScrollX = startScrollX;
//horizontalContainer控件开始滑动
scrollTo(startScrollX, 0);
}
}

第11行的语句成立。计算得到startScrollX这是horizontalContainer 容器实际的滑动偏移值。

第17行lastScrollX默认初始值为0，因此if语句也成立。

最终在21行开始滑动horizontalContainer容器。（需要注意的是如果startScrollX的值大于0则往左滑动，小于0往右滑动。）

紧接着调用invalidate()方法，其内部代码又会回调咋们刚才所说的onDraw方法。在onDraw方法中，执行了前面的代码后来到了刚才没有讲解的if语句，由于此时处于滑动状态。currentPositionOffset和currentPosition的值肯定是成立的。

（6）我再贴一下onDraw方法中if语句的代码。

if (currentPositionOffset > 0f && currentPosition < childCount - 1) {
//获取下一个Tab左右两边的横坐标值
View nextTab = horizontalContainer.getChildAt(currentPosition + 1);
float nextTabLeftX = nextTab.getLeft();
float nextTabRightX = nextTab.getRight();
//计算起点
currentTabLeftX = (currentPositionOffset * nextTabLeftX + (1f - currentPositionOffset)
* currentTabLeftX);
//计算终点
currentTabRightX = (currentPositionOffset * nextTabRightX + (1f - currentPositionOffset)
* currentTabRightX);
}

在第3行，由于滑动没有结束，此时currentPosition 的值还是0，又因为currentPosition + 1，所以nextTab得到的是第二个TextView的值。

第4,5行获取nextTab控件（实际就是TextView）左右两边的坐标。

第7,10行计算滑动过程中游标的起点和终点，也就是下图中左右两边的红点的坐标。



计算完毕之后。最后就是再次调用drawIndicator方法重新绘制游标。

至此有关SlideTab控件与ViewPager滑动的流程就走完了。谢谢（^_^）Y

四、结束

鉴于篇幅的关系，我就不再演示控件的使用了。各位可以下载下面的demo看看源码。demo中的SlideTabDemonstration类是入口。

此demo有BUG在所难免。仅限于学习。希望能帮到各位。

Demo源码请戳这里（Android Studio编译器）