Android实现梯形TextView效果

龙旋

共 6981字,需浏览 14分钟

 · 2021-05-28

效果图:



自定义代码实现逻辑:

public class LadderTextView extends android.support.v7.widget.AppCompatTextView {    private static final String TAG = "LadderView";    private Path linePath;    private Paint paint, textPaint;    private int width, height;    private float strokeWidth = 2;    private Region mRegion;    private String textContent;    private int lineOffset = 0;//划线的偏移量    private int textOffset = 0;//文本的偏移量    private float offsetScale = 1;//梯高与(梯顶与梯底)之差的比例(梯底比梯顶长)    private boolean isLeft = true;//分为左和右两种斜角梯形模式    private boolean isSelected = false;//是否是选定    private int selectedColor = Color.BLACK;
public LadderTextView(Context context) { super(context); init(); }
public LadderTextView(Context context, AttributeSet attrs) { super(context, attrs); initAttributes(context, attrs); init(); }

public LadderTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initAttributes(context, attrs); init(); }
private void initAttributes(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LadderTextView); textContent = typedArray.getString(R.styleable.LadderTextView_textContent); offsetScale = typedArray.getFloat(R.styleable.LadderTextView_offsetScale, 0.5f); isLeft = typedArray.getBoolean(R.styleable.LadderTextView_isLeft, true); isSelected = typedArray.getBoolean(R.styleable.LadderTextView_isSelected, true); selectedColor = typedArray.getColor(R.styleable.LadderTextView_selectedColor, Color.GREEN); strokeWidth = typedArray.getDimension(R.styleable.LadderTextView_strokeWidth, 1); typedArray.recycle(); }
private void init() { Log.v(TAG, "init"); mRegion = new Region(); paint = new Paint(); textPaint = new Paint(); linePath = new Path(); paint.setAntiAlias(true); paint.setStrokeWidth(dp2px(getContext(), strokeWidth)); paint.setColor(selectedColor); paint.setStyle(isSelected ? Paint.Style.FILL_AND_STROKE : Paint.Style.STROKE); paint.setStrokeJoin(Paint.Join.ROUND);
textPaint.setAntiAlias(true); textPaint.setTextSize(getTextSize());//传递TextSize(px) textPaint.setColor(isSelected ? Color.WHITE : selectedColor); setText("");//去除掉原有的Text内容 lineOffset = dp2px(getContext(), strokeWidth) / 2; textOffset = (int) (getTextSize() / 2) + getBaseline() * 2; Log.v(TAG, "lineOffset textOffset ->" + lineOffset + " " + textOffset); }

@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); width = getWidth(); height = getHeight(); Log.v(TAG, "width height->" + width + " " + height); }
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Log.v(TAG, "onDraw"); if (isLeft) { linePath.moveTo(0 + lineOffset, 0 + lineOffset); linePath.lineTo(width, 0 + lineOffset); linePath.lineTo((int) (width - offsetScale * height), height - lineOffset); linePath.lineTo(0 + lineOffset, height - lineOffset); linePath.close(); setTextAlignment(TEXT_ALIGNMENT_TEXT_START); canvas.drawPath(linePath, paint); canvas.drawText(textContent == null ? "" : textContent, getPaddingStart() + lineOffset, height / 2 + textOffset, textPaint); } else { linePath.moveTo(0 + lineOffset + offsetScale * height, 0 + lineOffset); linePath.lineTo(width - lineOffset, 0 + lineOffset); linePath.lineTo(width - lineOffset, height - lineOffset); linePath.lineTo(0, height - lineOffset); linePath.close(); setTextAlignment(TEXT_ALIGNMENT_TEXT_END); canvas.drawPath(linePath, paint); canvas.drawText(textContent == null ? "" : textContent, getWidth() - lineOffset - getPaddingEnd() - getDrawTextWidth(textPaint, textContent), height / 2 + textOffset, textPaint); }
}
@Override public boolean dispatchTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { if (!isInRegion(event)) {//点击的点的位置不在范围内则不响应 return false; } } return super.dispatchTouchEvent(event); }
/** * 判断点击的位置是否在要求的范围内 * @param event * @return */ public boolean isInRegion(MotionEvent event) { RectF rectF = new RectF(); linePath.computeBounds(rectF, true); mRegion.setPath(linePath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom)); return mRegion.contains((int) event.getX(), (int) event.getY()); }
/** * 获取要画的字符串的宽度 * * @param paint * @param textContent * @return */ private int getDrawTextWidth(Paint paint, String textContent) { float totalWidth = 0f; if (textContent != null && textContent.length() > 0) { int len = textContent.length(); float[] widths = new float[len]; paint.getTextWidths(textContent, widths); for (int j = 0; j < len; j++) { totalWidth += widths[j]; } } return (int) Math.ceil(totalWidth); }
/** * @param dpValue (DisplayMetrics类中属性density) * @return */ private int dp2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); }
public void setTextContent(String textContent) { this.textContent = textContent; invalidate(); }
public void setMSelected(boolean isSelected) { textPaint.setColor(isSelected ? Color.WHITE : selectedColor); paint.setStyle(isSelected ? Paint.Style.FILL_AND_STROKE : Paint.Style.STROKE); this.isSelected = isSelected; invalidate(); }
@Override public boolean isSelected() { return isSelected; }}


要点分析


1.背景与文本内容的绘制


计算好四个点的位置连线,TextView默认的文本内容则设置为空字符串,采用drawText的方式来实现文本的显示。需要注意的是计算文本的字号长度大小、颜色以及位于整个view的位置、偏移量等。


2.梯形范围内外的点击事件处理


依照于设计,梯形内的点击才有响应,则要计算点击的位置是否在梯形内,然后通过dispatchTouchEvent来做事件的分发。

 /**     * 判断点击的位置是否在要求的范围内     * @param event     * @return     */    public boolean isInRegion(MotionEvent event) {        RectF rectF = new RectF();        linePath.computeBounds(rectF, true);        mRegion.setPath(linePath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));        return mRegion.contains((int) event.getX(), (int) event.getY());    }


源码地址:

https://github.com/ganshenml/LadderTextView


到这里就结束啦。

浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报