Android高仿马蜂窝Tabbar波浪线

最新推荐文章于 2022-07-26 17:24:16 发布

Super-Bin

最新推荐文章于 2022-07-26 17:24:16 发布

阅读量528

点赞数

分类专栏： Android控件文章标签： android tab android studio

本文链接：https://blog.csdn.net/ZZB_Bin/article/details/108919720

版权

Android控件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何在Android中实现马蜂窝风格的波浪形Tabbar动画。利用二阶贝塞尔曲线绘制完整波浪线，通过监听ViewPager滑动动态改变指示器位置，创建流动效果。代码详细解释了绘制完整弧线和指示器弧线的步骤，并提供了源码链接。目前的实现假设每个Tab宽度和指示器长度相等，但可以按此思路进行修改以适应不同情况。

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

文章目录

简介
效果
思路
关键代码
- 先画完整的弧线，图中红色曲线
- 再画指示器部分的弧线，图中深蓝色弧线
不足
源码[github](https://github.com/Super-Bin/HornetNestView.git)

简介

Android高仿马蜂窝Tabbar波浪线，tabbar的部分直接使用FlycoTabLayout这个库，很早以前用过，重点也不在这tabbar功能，主要是如何绘制tabbar下方的波浪线。

效果

可以直接看github
在这里插入图片描述

思路

在这里插入图片描述
波浪线的实现，可以借助二阶贝塞尔曲线。先画出一整条波浪线，然后再截取其中蓝色的线段，监听ViewPager的滑动，来改变截取的起始点，看起来就像会动的波浪线。

关键代码

在这里插入图片描述
其中

黄色框，表示一个tab的宽度
深蓝色的弧线，表示指示器indicator的宽度
浅蓝色线，表示指示器indicator与tab的间距

先画完整的弧线，图中红色曲线

		
		int distance, lastDistance = 0;
        int indicatorTop = getHeight() - indicatorHeight;
        int indicatorBottom = getHeight();
        // 先计算开始坐标
        int startY = (indicatorBottom - indicatorTop) / 2 + indicatorTop;

        for (int i = 0; i < this.mTabCount; i++) {
            View currentTabView = mTitleContainer.getChildAt(i);
            float left = currentTabView.getLeft();
            float right = currentTabView.getRight();
            // 表示当前指示器与tab的偏移量
            distance = (int) ((right - left - indicatorWidth) / 2);
            Log.i(TAG, "left = " + left);
            Log.i(TAG, "right = " + right);
            if (i == 0) {
                mPath.moveTo(left + distance, startY);
                // 开始画指示器下半部分弧线
                mPath.rQuadTo(indicatorWidth / 2, indicatorHeight / 2, indicatorWidth, 0);

				// 获取一个指示器的长度
                mArcMeasure.setPath(mPath, false);
                mArcPathLength = mArcMeasure.getLength();
                Log.i(TAG, "一段圆弧的长度 mArcPathLength = " + mArcPathLength);
            } else {
                int nextX = (distance + lastDistance) / 2;
                // 这里画上半部分弧线，因为这个弧线被拉的比较长，所以没有除以2
                mPath.rQuadTo(nextX, -indicatorHeight, distance + lastDistance, 0);
                // 再继续画指示器下半部分弧线
                mPath.rQuadTo(indicatorWidth / 2, indicatorHeight / 2, indicatorWidth, 0);
            }
            lastDistance = distance;
        }
        mPaint.setColor(Color.RED);
        // 完整的正弦曲线，背景底色
        canvas.drawPath(mPath, mPaint);

再画指示器部分的弧线，图中深蓝色弧线

在这里插入图片描述
灰色框表示一个完整的周期，红色线相当于有三个完整的周期+最后一个下划线的曲线长度

		mMeasure.setPath(mPath, false);
        mPathLength = mMeasure.getLength();
        ...//中间省略
        float startD = 0;

        // 这种计算方式，是在保证每一个tab的宽度相等、而且每一个指示器长度也相等的情况下
        float cycleLength = (mPathLength - mArcPathLength )/ (this.mTabCount - 1); // 一个周期长度
        Log.i(TAG, "cycleLength = " + cycleLength);
        // 计算起始点
        startD = this.mCurrentTab * cycleLength + cycleLength * this.mCurrentPositionOffset;

        if(startD < 0) {
            startD = 0;
        }
        Log.i(TAG, "startD = " + startD);
        mMeasure.getSegment(startD, startD + mArcPathLength, mDstPath, true);
        mPaint.setColor(Color.BLUE);
        // 绘制弧线段
        canvas.drawPath(mDstPath, mPaint);