自定义一个标签式图标

最后编辑于2017年09月22日
实现效果如下：

 

public class SignView extends View {
    private Paint mPaint;
    private Paint mTextPaint;
    @ColorInt//这里我添加了design包
    private int signColor;
    private float signWidth;
    private String text;
    @ColorInt
    private int textColor;
    public SignView(Context context) {
        this(context,null);
    }

    public SignView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public SignView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mTextPaint = new Paint();
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SignView,defStyleAttr,0);
        signColor = a.getColor(R.styleable.SignView_signColor, Color.RED);
        signWidth = a.getDimension(R.styleable.SignView_signWidth,0);
        text = a.getString(R.styleable.SignView_text);
        textColor = a.getColor(R.styleable.SignView_textColor,Color.WHITE);
        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float degree = (float) Math.toDegrees(Math.atan2(getHeight(),getWidth()));
        canvas.rotate(degree,getWidth()/2,getHeight()/2);
        canvas.save();
        canvas.restore();
        float length = (float) Math.sqrt(getWidth()*getWidth()+getHeight()*getHeight());
        if (signWidth<=0){
            signWidth = getHeight()/2;
        }
        float strokeWidth = signWidth<getHeight()/2?signWidth:getHeight()/2;
        mPaint.setColor(signColor);
        mPaint.setStrokeWidth(strokeWidth);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setAntiAlias(true);
        Path path = new Path();
        path.moveTo(getWidth()/2-length/2,getHeight()/2-strokeWidth/2);
        path.lineTo(getWidth()/2+length/2,getHeight()/2-strokeWidth/2);
        canvas.drawPath(path,mPaint);
        if (!TextUtils.isEmpty(text)){
            Rect rect = new Rect();
            mTextPaint.setColor(textColor);
            mTextPaint.getTextBounds(text,0,text.length(),rect);
            mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            mTextPaint.setAntiAlias(true);
            float w = rect.width();
            float h = rect.height();
            float high = getWidth()*getHeight()/length;
            float times = high*length/(high*w+h*length);
            float priviousTextSize = mTextPaint.getTextSize();
            int calculateTextSize = (int) Math.floor(times*priviousTextSize);
            if (calculateTextSize<0.8*strokeWidth){
                mTextPaint.setTextSize(calculateTextSize);
                Rect newRect = new Rect();
                mTextPaint.getTextBounds(text,0,text.length(),newRect);
                Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
                float x = getWidth()/2-((newRect.width()/2)+(newRect.width()*getHeight())/(2*getWidth()))/2;
                float y = getHeight()/2-newRect.bottom-fontMetrics.ascent+fontMetrics.top;
                canvas.drawText(text,x,y,mTextPaint);
            }else {
                mTextPaint.setTextSize((int) (0.8*strokeWidth));
                Rect newRect = new Rect();
                mTextPaint.getTextBounds(text,0,text.length(),newRect);
                float x = getWidth()/2-((newRect.width()/2)+(newRect.width()*getHeight())/(2*getWidth()))/2;
                float y = (float) (getHeight()/2-newRect.bottom-0.2*strokeWidth);
                canvas.drawText(text,x,y,mTextPaint);
            }
        }
    }

    public void setSignColor(int signColor) {
        this.signColor = signColor;
        postInvalidate();
    }

    public void setSignWidth(float signWidth) {
        this.signWidth = signWidth;
        postInvalidate();
    }

    public void setText(String text) {
        this.text = text;
        postInvalidate();
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
        postInvalidate();
    }
}

values/attrs.xml文件

 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SignView">
        <attr name="signColor" format="color"/>
        <attr name="signWidth" format="dimension"/>
        <attr name="text" format="string"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

上面截图的布局文件

 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="2"
        android:rowCount="2">

        <com.example.a1qu212.myapplication.SignView
            android:layout_width="100dp"
            android:layout_height="90dp"
            app:signColor="@android:color/holo_green_dark"
            app:signWidth="41dp"
            app:textColor="@android:color/holo_red_dark"
            app:text="推荐"
            />
        <com.example.a1qu212.myapplication.SignView
            android:layout_width="100dp"
            android:layout_height="75dp"
            app:signColor="@android:color/holo_green_dark"
            app:textColor="@android:color/holo_red_dark"
            app:text="NEW"
            />
        <com.example.a1qu212.myapplication.SignView
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:layout_centerInParent="true"
        app:signColor="@android:color/holo_green_dark"
        app:textColor="@android:color/holo_red_dark"
        app:signWidth="31dp"
        app:text="已完成"
        />
        <com.example.a1qu212.myapplication.SignView
            android:layout_width="100dp"
            android:layout_height="90dp"
            app:signColor="@android:color/holo_green_dark"
            app:signWidth="25dp"
            app:textColor="@android:color/holo_red_dark"
            app:text="你hao,再见"
            />
    </GridLayout>

</RelativeLayout>

字的大小位置的计算，搞了很久，仍然达不到理想的效果。（有好的方法可以推荐给我）