自定义选项卡指示器(箭头向下像指示器) [英] Custom Tab Indicator(With Arrow down like Indicator)
问题描述
有没有笏做出这样的指标?结果
它有一些在指向所选项目向下箭头样的?
Is there a wat to make a indicator like this?
it has some pointed arrow down like in the selected item?
推荐答案
我能找到的唯一解决办法就是抓住原始的源$ C $ C TabLayout
和自定义,根据您的需求。
The only solution I could find is to grab the source code of the original TabLayout
and customize it, according your needs.
事实上,所有你需要做的就是这一习俗的箭头是重写的 SlidingTabStrip
无效画(油画画布)
方法。不幸的是, SlidingTabStrip
是里面的私人
内部类 TabLayout
。
In fact, all you need to do to get this custom pointing arrow is to override SlidingTabStrip
's void draw(Canvas canvas)
method. Unfortunately, SlidingTabStrip
is private
inner class inside TabLayout
.
幸运的是,所有的支持库code是开放的,所以我们可以创建自己的 TabLayoutWithArrow
类。我取代了标准的无效画(油画画布)
通过这样一来绘制箭头:
Luckily, all support library code is open, so we can create our own TabLayoutWithArrow
class. I replaced the standard void draw(Canvas canvas)
by this one to draw the arrow:
@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.
为了使我的自定义 TabLayoutWithArrow
,我必须将这些文件复制到我的项目:
To make my custom TabLayoutWithArrow
, I had to copy these files into my project:
- AnimationUtils
- TabLayout
- ThemeUtils
- ValueAnimatorCompat
- ValueAnimatorCompatImplEclairMr1
- ValueAnimatorCompatImplHoneycombMr1
- ViewUtils
- ViewUtilsLollipop
要具有箭头背后的透明度,你只需要设置图形
- 绘制
,作为背景
为 TabLayoutWithArrow
:
To have transparency behind the arrow, you just need to set this Shape
-drawable
, as a background
for the TabLayoutWithArrow
:
<?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"/>
我上传整个项目到我的Dropbox的(这是使用它的TabLayoutWithArrow +单页的应用程序) - 的随时检查吧。
我希望,它有助于
这篇关于自定义选项卡指示器(箭头向下像指示器)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!