【andorid进阶篇之View-自定义tablayout】

啥话不说,先亮出效果图:






最近公司UI设计了一个这样的tab切换的样式,刚一看到UI设计图,感觉还是不错滴。但是几秒钟后下意识想到,这个效果,Android自带的 tablayout 控件应该并实现不了这效果呢。顿时一脸茫然,我还要自定义一个不成!但是这个弧度怎么搞…

此时有的小伙伴可能会想,自定义view太麻烦,不如让UI直接把这个弧度切出来,不是一共就三个tab项嘛,Textview,ImageView… 这样横着排起来,然后做适当的显示和隐藏不就行啦。

是的,确实是可以,但是作为一个优秀的开发人员。我们还是要优选自定义view滴。

思路分析

(1) 由效果图,我们很容易分析出,不管tab项一共几个,无非就这三种情况。

草图如下:



(2) 无论是哪种情况,首先我们需要画出一个背景矩形,这个比较简单。

(3)下面就是曲线的画法,草图中也已经标注了,很明显我需要2个控制点,那就需要用到三阶贝塞尔曲线啦!cubicTo

(4)画出图形后,点击事件如何响应处理呢? 我们在 onTouchEvent 是能获取到点击控件后x,y坐标的,判断x的坐标是在哪个tab项的范围内,我们就认为点击了那个tab项,就可以了。

(5)控件的圆角的如何实现呢?canvas的 范围裁切 就可以啦。




代码实现

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

情况一(关键代码):


//最左边的图形

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);


步骤说明:

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

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

最后画直线到坐标点(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);

    }


远程依赖使用

一: 添加依赖

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布局中添加

        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 = ArrayList()

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

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

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

        mYPKTabLayoutView.setTabTextList(tabTextList);

        mYPKTabLayoutView.addTabSelectedListener { tabPosition ->

            val makeText =

                Toast.makeText(

                    this@MainActivity,

                    "点击了第" + tabPosition + "项",

                    Toast.LENGTH_SHORT

                )

            makeText.setGravity(Gravity.CENTER, 0, 0);

            makeText.show();

        }


属性说明:

属性| 说明

- | -

tabTextColor| tab的文字颜色

tabTextSize| tab文字大小(单位:sp)

tab_view_bg| 控件背景色

select_tab_color| 选中后tab的背景色

arcControlX| 值越大,曲线弧度越大(单位:px)

view_bg_corners| 控件的圆角大小(单位:dp)

文章到这里就已经说完啦,如果对你有些帮助的话,顺手也给点个赞吧,十分感谢!整理这篇文章快用2个星期时间了。如果你对实现思路有更好的建议,欢迎留言,指正。



源码地址

你可能感兴趣的:(【andorid进阶篇之View-自定义tablayout】)