样式
<declare-styleable name="TagView"> <attr name="outColor" format="color" /> <!--整体色值--> <attr name="upTextColor" format="color" /> <!--上面字体颜色--> <attr name="bottomTextColor" format="color" /> <!--下面字体颜色--> <attr name="text" format="string" /> <!--下面字体颜色--> <attr name="lineSize" format="integer" /> <!--下面字体颜色--> </declare-styleable>
代码实现
package com.example.myapplication; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; import com.mobile.mbank.common.api.utils.DensityUtil; import com.mobile.mbank.template.api.R; /** * @class name:com.example.myapplication * @desc (一句话描述类的作用) * @anthor wangzhongli * @Create At 2022/4/27 16:18 * @chang 16:18 */ public class TagView extends View { private final Paint mCPaint = new Paint(); private final Paint textPaint = new Paint(); private int width; private Context mContext; private int conner = 20; private int lineSize = 6; private int outerColor; private int upTextColor; private int bottomTextColor; private String text; private final String[] strings = new String[2]; private final float[] cornersOuter = new float[]{ conner, conner, // Top left radius in px conner, conner, // Top right radius in px 0, 0, // Bottom right radius in px conner, conner // Bottom left radius in px }; private final float[] cornersBottom = new float[]{ 0, 0, // Top left radius in px 0, 0, // Top right radius in px 0, 0, // Bottom right radius in px conner, conner // Bottom left radius in px }; public TagView(Context context) { super(context); } public TagView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TagView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } private void init(Context context, AttributeSet attrs) { mContext = context; TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TagView); outerColor = array.getColor(R.styleable.TagView_outColor, Color.parseColor("#ff6d02")); upTextColor = array.getColor(R.styleable.TagView_upTextColor, Color.parseColor("#ff6d02")); bottomTextColor = array.getColor(R.styleable.TagView_bottomTextColor, Color.parseColor("#ffffff")); lineSize = array.getColor(R.styleable.TagView_lineSize, 6); text = array.getString(R.styleable.TagView_textStr); array.recycle(); } private void initPaint() { mCPaint.setAntiAlias(true); mCPaint.setStrokeWidth(lineSize); mCPaint.setColor(outerColor); mCPaint.setStyle(Paint.Style.STROKE); textPaint.setAntiAlias(true); textPaint.setColor(upTextColor); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(DensityUtil.dp2px(mContext, (width - 2 * lineSize) / 8)); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); if (width != height) { width = height; } setMeasuredDimension(width, height); } @Override protected void onDraw(Canvas canvas) { initPaint(); handleText(text); // RectF rectf = new RectF(0, 0, width, width); // RectF rectf1 = new RectF(0, width / 2 - lineSize / 2, width, width); RectF rectf = new RectF(lineSize / 2, lineSize / 2, width - lineSize / 2, width - lineSize / 2); RectF rectf1 = new RectF(lineSize / 2, width / 2 - lineSize / 2, width - lineSize / 2, width - lineSize / 2); final Path path = new Path(); path.addRoundRect(rectf, cornersOuter, Path.Direction.CCW); canvas.drawPath(path, mCPaint); final Path path1 = new Path(); path1.addRoundRect(rectf1, cornersBottom, Path.Direction.CW); mCPaint.setStyle(Paint.Style.FILL); canvas.drawPath(path1, mCPaint); float textwidth = textPaint.measureText(strings[0]); float textHeight = measureTextHeight(textPaint); canvas.drawText(strings[0], width / 2 - textwidth / 2, width / 4 + textHeight / 2, textPaint); textPaint.setColor(bottomTextColor); canvas.drawText(strings[1], width / 2 - textwidth / 2, width - width / 4 + textHeight / 2, textPaint); } private void handleText(String str) { if (str == null || "".equals(str)) { strings[0] = "未知"; strings[1] = "未知"; } else if (str.length() <= 2) { strings[0] = str; strings[1] = "未知"; } else if (str.length() <= 4) { strings[0] = str.substring(0, 2); strings[1] = str.substring(2); } else { strings[0] = str.substring(0, 2); strings[1] = str.substring(2, 4); } } public void setConner(int conner) { this.conner = conner; } public void setOuterColor(int outerColor) { this.outerColor = outerColor; } public void setUpTextColor(int upTextColor) { this.upTextColor = upTextColor; } public void setBottomTextColor(int bottomTextColor) { this.bottomTextColor = bottomTextColor; } public void setText(String text) { this.text = text; } public void setLineSize(int lineSize) { this.lineSize = lineSize; } /** * 测量文字高度 * * @param paint * @return */ private static float measureTextHeight(Paint paint) { Paint.FontMetrics fontMetrics = paint.getFontMetrics(); return (Math.abs(fontMetrics.ascent) - fontMetrics.descent); } }
<LinearLayout android:layout_width="match_parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toBottomOf="@+id/tv1" android:layout_height="wrap_content"> <com.example.myapplication.TagView android:id="@+id/tagView" android:layout_width="80dip" android:layout_height="80dip" android:layout_marginLeft="30dip" app:text="金融资讯" app:lineSize="20" app:bottomTextColor="@color/white" app:upTextColor="#ff6d02" app:outColor="#ff6d02" /> <com.example.myapplication.TagView android:id="@+id/tagView1" android:layout_width="60dip" android:layout_height="60dip" android:layout_marginTop="30dip" android:layout_marginLeft="30dip" app:text="头条新闻" app:bottomTextColor="@color/white" app:upTextColor="#f04206" app:outColor="#f04206" /> <com.example.myapplication.TagView android:id="@+id/tagView2" android:layout_width="34dip" android:layout_height="34dip" android:layout_marginTop="60dip" app:text="宏观经济" android:layout_marginLeft="30dip" app:bottomTextColor="@color/white" app:upTextColor="#29B289" app:outColor="#29B289" /> </LinearLayout>
最终效果: