[英]Custom Tab Indicator(With Arrow down like Indicator)
The only solution I could find is to grab the source code of the original TabLayout
and customize it, according your needs. 我能找到的唯一解决方案是获取原始TabLayout
的源代码并根据需要TabLayout
进行自定义。
In fact, all you need to do to get this custom pointing arrow is to override SlidingTabStrip
's void draw(Canvas canvas)
method. 实际上,获取此自定义指向箭头所需要做的就是重写SlidingTabStrip
的void draw(Canvas canvas)
方法。 Unfortunately, SlidingTabStrip
is private
inner class inside TabLayout
. 不幸的是, SlidingTabStrip
是TabLayout
内部的private
内部类。
Luckily, all support library code is open, so we can create our own TabLayoutWithArrow
class. 幸运的是,所有支持库代码都是开放的,因此我们可以创建自己的TabLayoutWithArrow
类。 I replaced the standard void draw(Canvas canvas)
by this one to draw the arrow: 我用这个替换了标准的void draw(Canvas canvas)
以绘制箭头:
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// i used <dimen name="pointing_arrow_size">3dp</dimen>
int arrowSize = getResources().getDimensionPixelSize(R.dimen.pointing_arrow_size);
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight - arrowSize,
mIndicatorRight, getHeight() - arrowSize, mSelectedIndicatorPaint);
canvas.drawPath(getTrianglePath(arrowSize), mSelectedIndicatorPaint);
}
}
private Path getTrianglePath(int arrowSize) {
mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mSelectedIndicatorPaint.setAntiAlias(true);
int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize*2;
int rightPointX = leftPointX + arrowSize*2;
int bottomPointX = leftPointX + arrowSize;
int leftPointY = getHeight() - arrowSize;
int bottomPointY = getHeight();
Point left = new Point(leftPointX, leftPointY);
Point right = new Point(rightPointX, leftPointY);
Point bottom = new Point(bottomPointX, bottomPointY);
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.setLastPoint(left.x, left.y);
path.lineTo(right.x, right.y);
path.lineTo(bottom.x, bottom.y);
path.lineTo(left.x, left.y);
path.close();
return path;
}
Of course, the background, the particular design of the indicator can be improved/adjust according your needs. 当然,指示器的背景,特定设计可以根据您的需要进行改进/调整。
To make my custom TabLayoutWithArrow
, I had to copy these files into my project: 为了创建自定义TabLayoutWithArrow
,我必须将这些文件复制到我的项目中:
To have transparency behind the arrow, you just need to set this Shape
- drawable
, as a background
for the TabLayoutWithArrow
: 为了使箭头后面具有透明度,您只需要将此Shape
- drawable
设置为TabLayoutWithArrow
的background
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="@dimen/pointing_arrow_size">
<shape android:shape="rectangle" >
<solid android:color="#FFFF00" />
</shape>
</item>
<item android:height="@dimen/pointing_arrow_size"
android:gravity="bottom">
<shape android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
And the actual usage is: 实际用法是:
<klogi.com.viewpagerwithdifferentmenu.CustomTabLayout.TabLayoutWithArrow
android:id="@+id/tabLayout"
android:background="@drawable/tab_layout_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
I've uploaded the whole project (the TabLayoutWithArrow + one-page app which is using it) to my dropbox - feel free to check it out . 我已经将整个项目(正在使用该项目的TabLayoutWithArrow +一页应用程序)上载到我的保管箱- 随时查看 。
I hope, it helps 希望对您有帮助
现在它不起作用,从支持库23.2.0中删除了tintmanager类,我通过在运行时更改后台可绘制背景来管理相同的功能,以循环检测单击的位置,PS:检查此问题并回答我正在使用同一库: https: //github.com/astuetz/PagerSlidingTabStrip/issues/141
Here is the code for anyone requiring an upward triangle using @Konstantin Loginov code 这是使用@Konstantin Loginov代码的任何需要向上三角形的代码
private Path getTrianglePath(int arrowSize) {
mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mSelectedIndicatorPaint.setAntiAlias(true);
mSelectedIndicatorPaint.setColor(Color.WHITE);
int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize * 1 / 2;
int mTopX = leftPointX + arrowSize;
int mTopY = getHeight() - arrowSize;
int rightPointX = leftPointX + arrowSize * 2;
int leftPointY = getHeight();
Point left = new Point(leftPointX, leftPointY);
Point right = new Point(rightPointX, leftPointY);
Point bottom = new Point(mTopX, mTopY);
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.setLastPoint(left.x, left.y);
path.lineTo(right.x, right.y);
path.lineTo(bottom.x, bottom.y);
path.lineTo(left.x, left.y);
path.close();
return path;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.