Android自定义箭头View：调整宽度不影响左侧的实现最佳实践

针对你需求的核心——调整View宽度时仅缩放箭头部分、左侧保持不变，最清晰且可维护的方案是通过自定义View拆分固定区域与可变区域，结合onMeasure和onDraw实现精确控制。下面是具体的实现思路和代码示例：

核心思路 #

把整个箭头View拆成两部分：

• 固定左侧区域：宽度固定（可通过自定义属性配置），无论View总宽度如何变化，这部分尺寸都保持不变。
• 可变箭头区域：宽度 = View总宽度 - 固定左侧宽度，随View宽度变化自动缩放，保证箭头始终衔接在固定区域右侧。

同时通过onMeasure约束View的最小宽度，避免箭头缩到无法识别的程度。

具体实现步骤 #

1. 定义自定义属性（可选但推荐） #

在res/values/attrs.xml中添加自定义属性，方便在布局中灵活配置固定宽度、箭头颜色等参数：

<declare-styleable name="FixedLeftArrowView">
    <attr name="fixedLeftWidth" format="dimension" />
    <attr name="arrowColor" format="color" />
    <attr name="minArrowWidth" format="dimension" />
</declare-styleable>

2. 自定义View代码 #

public class FixedLeftArrowView extends View {
    private int mFixedLeftWidth; // 左侧固定宽度
    private int mMinArrowWidth;  // 箭头最小宽度（防止缩得太小）
    private int mArrowColor;
    private Paint mPaint;
    private Path mPath;

    public FixedLeftArrowView(Context context) {
        this(context, null);
    }

    public FixedLeftArrowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FixedLeftArrowView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs);
        initPaint();
        mPath = new Path();
    }

    // 初始化自定义属性
    private void initAttrs(AttributeSet attrs) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.FixedLeftArrowView);
        // 默认左侧宽度20dp，箭头最小宽度15dp，颜色黑色
        mFixedLeftWidth = ta.getDimensionPixelSize(R.styleable.FixedLeftArrowView_fixedLeftWidth, dpToPx(20));
        mMinArrowWidth = ta.getDimensionPixelSize(R.styleable.FixedLeftArrowView_minArrowWidth, dpToPx(15));
        mArrowColor = ta.getColor(R.styleable.FixedLeftArrowView_arrowColor, Color.BLACK);
        ta.recycle();
    }

    // 初始化画笔
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(mArrowColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true); // 抗锯齿
    }

    // 约束View最小宽度
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int minRequiredWidth = mFixedLeftWidth + mMinArrowWidth;
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int finalWidth;
        if (widthMode == MeasureSpec.EXACTLY) {
            // 匹配父容器或固定宽度时，确保不小于最小需求宽度
            finalWidth = Math.max(widthSize, minRequiredWidth);
        } else {
            // wrap_content时直接用最小需求宽度
            finalWidth = minRequiredWidth;
        }

        setMeasuredDimension(finalWidth, MeasureSpec.getSize(heightMeasureSpec));
    }

    // 绘制箭头
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int viewWidth = getWidth();
        int viewHeight = getHeight();
        int arrowAvailableWidth = viewWidth - mFixedLeftWidth;

        // 重置路径，绘制固定左侧+可变箭头
        mPath.reset();
        // 左侧固定区域左上角
        mPath.moveTo(0, 0);
        // 左侧固定区域右上角
        mPath.lineTo(mFixedLeftWidth, 0);
        // 箭头顶点（随总宽度变化）
        mPath.lineTo(viewWidth, viewHeight / 2f);
        // 左侧固定区域右下角
        mPath.lineTo(mFixedLeftWidth, viewHeight);
        // 左侧固定区域左下角
        mPath.lineTo(0, viewHeight);
        // 闭合路径
        mPath.close();

        canvas.drawPath(mPath, mPaint);
    }

    // dp转px工具方法
    private int dpToPx(int dp) {
        return (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                dp,
                getResources().getDisplayMetrics()
        );
    }
}

3. 在布局中使用 #

<com.yourpackage.FixedLeftArrowView
    android:layout_width="120dp"
    android:layout_height="40dp"
    app:fixedLeftWidth="30dp"
    app:minArrowWidth="20dp"
    app:arrowColor="#FF5722" />

扩展：支持圆角左侧 #

如果需要左侧区域带圆角，只需要修改onDraw中的路径绘制逻辑，替换成圆角矩形：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int viewWidth = getWidth();
    int viewHeight = getHeight();
    int arrowAvailableWidth = viewWidth - mFixedLeftWidth;
    float cornerRadius = dpToPx(4); // 圆角半径

    mPath.reset();
    // 添加左侧圆角矩形
    RectF leftRect = new RectF(0, 0, mFixedLeftWidth, viewHeight);
    mPath.addRoundRect(leftRect, cornerRadius, cornerRadius, Path.Direction.CW);
    // 添加箭头部分
    mPath.moveTo(mFixedLeftWidth, 0);
    mPath.lineTo(viewWidth, viewHeight / 2f);
    mPath.lineTo(mFixedLeftWidth, viewHeight);
    mPath.close();

    canvas.drawPath(mPath, mPaint);
}

为什么这是最佳实践？ #

• 逻辑清晰：拆分固定与可变区域，后续维护或扩展（比如加圆角、渐变）都很方便；
• 性能友好：用基础Path绘制比贝塞尔曲线更高效，且形状精确；
• 灵活性高：通过自定义属性支持配置，可在不同场景复用；
• 边界安全：onMeasure约束最小宽度，避免箭头缩到无法识别。

内容的提问来源于stack exchange，提问作者Ali Al-Hudhud