[英]Custom Tab Indicator(With Arrow down like Indicator)
我能找到的唯一解决方案是获取原始TabLayout
的源代码并根据需要TabLayout
进行自定义。
实际上,获取此自定义指向箭头所需要做的就是重写SlidingTabStrip
的void draw(Canvas canvas)
方法。 不幸的是, SlidingTabStrip
是TabLayout
内部的private
内部类。
幸运的是,所有支持库代码都是开放的,因此我们可以创建自己的TabLayoutWithArrow
类。 我用这个替换了标准的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;
}
当然,指示器的背景,特定设计可以根据您的需要进行改进/调整。
为了创建自定义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>
实际用法是:
<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"/>
我已经将整个项目(正在使用该项目的TabLayoutWithArrow +一页应用程序)上载到我的保管箱- 随时查看 。
希望对您有帮助
现在它不起作用,从支持库23.2.0中删除了tintmanager类,我通过在运行时更改后台可绘制背景来管理相同的功能,以循环检测单击的位置,PS:检查此问题并回答我正在使用同一库: https: //github.com/astuetz/PagerSlidingTabStrip/issues/141
这是使用@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.