Android开发:自定义TabLayout,史上超级详细

思路梳理好了,那我们就写代码吧:

情况一(关键代码):


 //最左边的图形

            Path pathLeft = new Path();





            pathLeft.lineTo(textWidth, 0);



            pathLeft.cubicTo(textWidth + arcControlX, arcControlY, textWidth + arcWidth - arcControlX, viewHeight - arcControlY, textWidth + arcWidth, viewHeight);



            pathLeft.lineTo(0, viewHeight);



            pathLeft.lineTo(0, 0);





            paint.setColor(selectColor);

            canvas.drawPath(pathLeft, paint);



步骤说明:

  1. 首先我们的起始点坐标是(0,0),到坐标(textWidth, 0) 画一条直线;

  2. 然后三阶贝塞尔曲线,2个控制点的坐标1(textWidth + arcControlX,arcControlY),坐标2(textWidth + arcWidth - arcControlX,viewHeight - arcControlY),结束的坐标(textWidth + arcWidth,viewHeight);

  3. 最后画直线到坐标点(0, viewHeight),再到最终的原点(0, 0)。

到这里一个封闭的路径,就画好啦。情况二和情况三也是同样的道理,我也不再废话了。

情况二(关键代码):


 //中间的图形

            Path pathCenter = new Path();

            pathCenter.moveTo(tabPosition * textWidth + tabPosition * arcWidth, 0);

            pathCenter.cubicTo(tabPosition * textWidth + tabPosition * arcWidth - arcControlX, arcControlY, tabPosition * textWidth + tabPosition * arcWidth - arcWidth + arcControlX, viewHeight - arcControlY, tabPosition * textWidth + tabPosition * arcWidth - arcWidth, viewHeight);

            pathCenter.lineTo(tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcWidth, viewHeight);

            pathCenter.cubicTo(tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcWidth - arcControlX, viewHeight - arcControlY, tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcControlX, arcControlY, tabPosition * textWidth + tabPosition * arcWidth + textWidth, 0);

            pathCenter.lineTo(tabPosition * textWidth + tabPosition * arcWidth, 0);





            paint.setColor(selectColor);

            canvas.drawPath(pathCenter, paint);



情况三(关键代码):


  //最右边的图形

            Path pathRight = new Path();

            pathRight.moveTo(viewWidth, 0);



            pathRight.lineTo(viewWidth - textWidth, 0);





            pathRight.cubicTo(viewWidth - textWidth - arcControlX, arcControlY, viewWidth - textWidth - arcWidth + arcControlX, viewHeight - arcControlY, viewWidth - textWidth - arcWidth, viewHeight);



            pathRight.lineTo(viewWidth, viewHeight);



            pathRight.lineTo(viewWidth, 0);



            paint.setColor(selectColor);

            canvas.drawPath(pathRight, paint);



tabtext的绘制(关键代码):


for (int i = 0; i < tabTextList.size(); i++) {

            String strTabText = tabTextList.get(i);

            Rect rectText = new Rect();

            textPaint.getTextBounds(strTabText, 0, strTabText.length(), rectText);

            int strWidth = rectText.width();

            int strHeight = rectText.height();

            if (i == 0) {

                canvas.drawText(strTabText, (textWidth + arcWidth / 2) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);

            } else if (i == tabTextList.size() - 1) {

                canvas.drawText(strTabText, viewWidth - (textWidth + arcWidth / 2) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);



            } else {

                canvas.drawText(strTabText, textWidth * i + arcWidth * (i - 1) + (textWidth + 2 * arcWidth) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);

            }



        }



tab点击处理(关键代码):


@Override

    public boolean onTouchEvent(MotionEvent event) {

        boolean isHandleClick = false;//是否处理点击事件



        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                float x = event.getX();

                float y = event.getY();

                System.out.println("YPKTabLayoutView.onTouchEvent x=" + x + " y=" + y);

                for (int i = 0; i < tabNumber; i++) {

                    if (x <= ((i + 1) * textWidth + i * arcWidth + arcWidth / 2)) {//点击的第一个按钮

                        tabPosition = i;



                        if (onTabClickListener != null) {

                            onTabClickListener.tabSelectedListener(tabPosition);

                        }



                        invalidate();

                        isHandleClick = true;



                        break;

                    }

                }



                return isHandleClick;





            case MotionEvent.ACTION_MOVE:

                break;

            case MotionEvent.ACTION_UP:

                break;

        }

        return super.onTouchEvent(event);

    }



步骤说明:

我们在 onTouchEvent方法中, 首先获取到点击控件后x,y坐标,然后for循环判断x的坐标是在哪个tab项的范围内,最后在哪个范围内,我们就认为点击了那个tab项,回调对应的 tabPosition 就可以了。

远程依赖使用

==================================================================

一:添加依赖

Add it in your root build.gradle at the end of repositories:


allprojects {

    repositories {

        ...

        maven { url 'https://jitpack.io' }

    }

}



Add the dependency


dependencies {

      implementation 'com.github.dacaoyuan:YPKTabDemo:1.0.2'

}



二:在xml布局中添加


<com.ypk.library.view.YPKTabLayoutView

        android:id="@+id/mYPKTabLayoutView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_margin="10dp"

        app:view_bg_corners="0"

        app:arcControlX="30" />



三:代码中


val tabTextList: MutableList<String> = ArrayList<String>()



        tabTextList.add("推荐学习");

        tabTextList.add("企业学院");

        tabTextList.add("我的关注");

        mYPKTabLayoutView.setTabTextList(tabTextList);



        mYPKTabLayoutView.addTabSelectedListener { tabPosition ->

## 最后

其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。

下图是我进阶学习所积累的历年**腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题**,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节

>![](https://img-blog.csdnimg.cn/img_convert/7728722988b6474abac12cfe14a67b02.png)


**[CodeChina开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》](https://codechina.csdn.net/m0_60958482/android_p7)**

 tabPosition ->

## 最后

其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。

下图是我进阶学习所积累的历年**腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题**,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节

>[外链图片转存中...(img-JqdGTpIk-1630654174245)]


**[CodeChina开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》](https://codechina.csdn.net/m0_60958482/android_p7)**

整理不易,望各位看官老爷点个关注转发,谢谢!祝大家都能得到自己心仪工作。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值