Android开发:自定义TabLayout,神奇效果竟是如此简单

2024-06-23 07:20

本文主要是介绍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);

步骤说明:

  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 = rec​
tText.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” />

最后

小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取
ent"

android:layout_margin=“10dp”

app:view_bg_corners=“0”

app:arcControlX=“30” />

最后

小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-GdaIXqiO-1719084181772)]一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取

这篇关于Android开发:自定义TabLayout,神奇效果竟是如此简单的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1086498

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu2289(简单二分)

虽说是简单二分,但是我还是wa死了  题意:已知圆台的体积,求高度 首先要知道圆台体积怎么求:设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路: 1. 用一个 hash[ ] 数组存放输入的数字,令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ,检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999,第二行数从 10到99。 4. 剪枝。 代码: /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h