textview - 具有平行四边形背景的Android TextView

Question

我想达到以下效果。即具有平行四边形背景的TextView。

我不能使用 9-patch，因为背景的颜色是动态的。

理想的情况是拥有一个已设置背景的自定义 TextView。

有没有办法做到这一点？

Answer 1

我最终不得不创建一个自定义视图，该视图使用绘制路径为左侧和右侧绘制了一个三角形。

然后我必须创建另一个自定义视图，它扩展了线性布局（或相对布局）并包括左三角形视图、文本视图和右三角形视图。三角形大小随视图的高度调整。三角形的填充颜色与文本视图的背景颜色相匹配。

这一切似乎都运行良好，因为我在许多设备上都没有遇到任何问题。它也是列表视图中列表项的一部分，性能看起来不错。

对于三角形：

公共类 LabelTriangleView 扩展视图 {

private boolean mRightSided = false;
private Paint mMainTrianglePaint;
private int mMainTriangleColor;

public LabelTriangleView(Context context) {
    super(context);
    intialise();
}

public LabelTriangleView(Context context, AttributeSet attrs) {
    super(context, attrs);
    intialise();
}

public void setMainColor(int newColor) {
    mMainTriangleColor = newColor;
    invalidate();
    requestLayout();
}

public void setRightSided() {
    mRightSided = true;
    invalidate();
    requestLayout();
}

@Override
protected void onDraw(Canvas canvas) {

    mMainTrianglePaint.setColor(mMainTriangleColor);

    if (mRightSided) {
        canvas.drawPath(getRightSidedPath(), mMainTrianglePaint);
    } else {
        canvas.drawPath(getLeftSidedPath(), mMainTrianglePaint);
    }
}

private void intialise() {
    mMainTrianglePaint = new Paint();
    mMainTrianglePaint.setStyle(Style.FILL);
    mMainTrianglePaint.setAntiAlias(true);
}

private Path getLeftSidedPath() {
    Path path = new Path();
    path.moveTo(this.getMeasuredWidth(), 0);
    path.lineTo(this.getMeasuredWidth(), this.getMeasuredHeight());
    path.lineTo(0, this.getMeasuredHeight());
    path.close();

    return path;
}

private Path getRightSidedPath() {
    Path path = new Path();
    path.moveTo(0, 0);
    path.lineTo(this.getMeasuredWidth(), 0);
    path.lineTo(0, this.getMeasuredHeight());
    path.close();

    return path;
}

}

三角形应该足以让任何人开始。我无法在此处发布其余代码，因为剥离内容太复杂了。

但本质上，这就是我所做的：

1. 创建了一个自定义视图，它扩展了我称为 LabelView 的 RelativeLayout。
2. 在初始化 LabelView 时，我添加了一个 TextView。
3. 创建了两个我的新自定义 LabelTriangleView。一个用于左侧，一个用于右侧（调用 setRightSided）。
4. 我将两个 LabelTriangleView 的高度设置为 TextView 的相同高度。
5. 我将两个 LabelTriangleView 的宽度设置为 TextView 高度的一半。
6. 然后我添加了与 TextView 左侧对齐的 Left LabelTriangleView。
7. 我添加了与 TextView 右侧对齐的右侧 LabelTriangleView。
8. 我使用 setMainColor() 设置了两个 LabelTriangleView 的颜色。并为 TextView 的 bg 使用相同的颜色

基本上就是这样！