Android自定义view绘制表格的方法

本文实例为大家分享了Android自定义view绘制表格的具体代码，供大家参考，具体内容如下

先上效果图

平时很少有这样的表格需求，不过第一想法就是自定义view绘制表格，事实上我确实是用的canvas来绘制的，整个过程看似复杂，实为简单，计算好各个点的坐标后事情就完成一半了。不废话show code

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import com.robot.common.entity.ScenicDetailInfo;
import com.robot.common.utils.PixelUtil;

/**
 * 景区详情门票信息表格
 *
 * @author ly
 * date 2019/8/12 10:24
 */
public class TicketInfoView extends View {

    private Paint pLine, pText;
    //表格宽高
    private int w, h;
    //每一行的高度
    private int rowH;
    //表格线的宽度
    private float tableLineW;
    //竖线x坐标
    private float vLine1x, vLine2x, vLine3x, vLine4x;
    //横线y坐标
    private float hLine1y, hLine2y;
    //每一列文字的x坐标（单列内居中）
    private float textX1, textX2, textX3, textX4, textX5, textXEnd;
    private static final String text1 = "市场价";
    private static final String text2 = "单人出行";
    private static final String text3 = "多人出行";
    private static final String text4 = "持卡者";
    private static final String text5 = "同行者";
    private static final String text6 = "出行总人数";
    private ScenicDetailInfo.TicketInfo ticketInfo;

    private int tableLineColor = Color.parseColor("#FFB6B4C8");
    private int textColorBlack = Color.parseColor("#FF232627");
    private int textColorGray = Color.parseColor("#FF65657e");
    private int textColorRed = Color.parseColor("#FFfa496a");
    private int blackTextSize = PixelUtil.sp2px(14);
    private int grayTextSize = PixelUtil.sp2px(12);
    private int redTextSize = PixelUtil.sp2px(13);

    //表格上半部分颜色
    private int tableBgColorTop = Color.parseColor("#FFF6F5FF");
    //表格下半部分颜色
    private int tableBgColorBottom = Color.parseColor("#FFE9EAFF");
    //表格高亮部分颜色
    private int tableBgColorHighLight = Color.parseColor("#FF6066DD");

    //三个有颜色的矩形区域
    private RectF topRect, bottomRect, highLightRect;
    private static final int radius = PixelUtil.dp2px(10);
    //圆角矩形的Path
    private Path pathRoundRect;
    //顶部矩形的四个圆角
    private static final float[] radiusTop = {radius, radius, radius, radius, 0f, 0f, 0f, 0f};
    //底部矩形的四个圆角
    private static final float[] radiusBottom = {0, 0, 0, 0, radius, radius, radius, radius};
    private static final float[] radiusAll = {radius, radius, radius, radius, radius, radius, radius, radius};

    //门票信息文字的高度
    private int ticketInfoTextH;
    //门票信息内间距
    private final int ticketInfoTextPadding = PixelUtil.dp2px(5);
    private StaticLayout ticketTextStaticLayout;
    private TextPaint ticketTextPaint;
    private int ticketTextH;

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

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

    public TicketInfoView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        tableLineW = PixelUtil.dp2px(1.0f);

        pLine = new Paint();
        pLine.setAntiAlias(true);
        pLine.setStrokeWidth(tableLineW);

        pText = new Paint();
        pText.setAntiAlias(true);
        pText.setTextAlign(Paint.Align.CENTER);

        pathRoundRect = new Path();

        topRect = new RectF();
        bottomRect = new RectF();
        highLightRect = new RectF();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        w = MeasureSpec.getSize(widthMeasureSpec);
        rowH = (int) (w * 0.134f);

        computeH();
        setMeasuredDimension(w, h);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        vLine1x = 1 / 5f * w;
        vLine2x = 2 / 5f * w;
        vLine3x = 3 / 5f * w;
        vLine4x = 4 / 5f * w;
        hLine1y = rowH;
        hLine2y = rowH * 2;

        textX1 = vLine1x / 2;
        textX2 = vLine1x + (vLine2x - vLine1x) / 2;
        textX3 = vLine2x + (vLine3x - vLine2x) / 2;
        textX4 = vLine3x + (vLine4x - vLine3x) / 2;
        textX5 = vLine4x + (w - vLine4x) / 2;
        textXEnd = w / 2f;

        topRect.right = w;
        topRect.bottom = rowH * 3;

        bottomRect.top = topRect.bottom;
        bottomRect.right = w;
        bottomRect.bottom = topRect.bottom + ticketTextH;

        highLightRect.left = vLine2x;
        highLightRect.top = hLine1y;
        highLightRect.right = vLine3x;
        highLightRect.bottom = topRect.bottom;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        pathRoundRect.reset();
        pLine.setStyle(Paint.Style.FILL);
        pLine.setColor(tableBgColorTop);
        if (hasTicketInfo()) {
            //画顶部矩形
            pathRoundRect.addRoundRect(topRect, radiusTop, Path.Direction.CW);
            canvas.drawPath(pathRoundRect, pLine);

            //画底部矩形
            pathRoundRect.reset();
            pathRoundRect.addRoundRect(bottomRect, radiusBottom, Path.Direction.CW);
            pLine.setColor(tableBgColorBottom);
        } else {//无门票说明则只画上部分表格
            pathRoundRect.addRoundRect(topRect, radiusAll, Path.Direction.CW);
        }
        canvas.drawPath(pathRoundRect, pLine);

        //画高亮部分矩形
        pLine.setColor(tableBgColorHighLight);
        canvas.drawRect(highLightRect, pLine);

        //四根竖线
        pLine.setColor(tableLineColor);
        pLine.setStrokeWidth(tableLineW / 2);
        canvas.drawLine(vLine1x, 0, vLine1x, topRect.bottom, pLine);
        canvas.drawLine(vLine2x, 0, vLine2x, topRect.bottom, pLine);
        canvas.drawLine(vLine3x, hLine1y, vLine3x, topRect.bottom, pLine);
        canvas.drawLine(vLine4x, hLine1y, vLine4x, topRect.bottom, pLine);
        //两根横线
        canvas.drawLine(vLine1x, hLine1y, w, hLine1y, pLine);
        canvas.drawLine(0, hLine2y, w, hLine2y, pLine);

        pText.setColor(textColorBlack);
        pText.setTextSize(blackTextSize);
        pText.setTypeface(getTypeface());
        //计算baseline
        float baseline = hLine2y / 2 + getTextDis();

        //市场价 黑色大字
        canvas.drawText(text1, textX1, baseline, pText);
        //第一行黑色大字
        baseline = hLine1y / 2 + getTextDis();
        canvas.drawText(text2, textX2, baseline, pText);
        canvas.drawText(text3, vLine2x + (w - vLine2x) / 2, baseline, pText);

        //第二行小字
        baseline = hLine1y + (hLine2y - hLine1y) / 2 + getTextDis();
        pText.setTextSize(grayTextSize);
        canvas.drawText(text4, textX2, baseline, pText);
        canvas.drawText(text5, textX4, baseline, pText);
        canvas.drawText(text6, textX5, baseline, pText);
        pText.setColor(Color.WHITE);
        canvas.drawText(text4, textX3, baseline, pText);

        //第三行 画价格、随行人数
        if (ticketInfo != null) {
            pText.setTextSize(redTextSize);
            pText.setColor(textColorBlack);

            baseline = hLine2y + (topRect.bottom - hLine2y) / 2 + getTextDis();

            //市场价
            canvas.drawText(limitTextLength(ticketInfo.price), textX1, baseline, pText);
            //出行总人数
            canvas.drawText(limitTextLength(ticketInfo.discounts_num), textX5, baseline, pText);

            //持卡者、同行者价格
            pText.setColor(Color.WHITE);
            canvas.drawText(limitTextLength(ticketInfo.discounts_member), textX3, baseline, pText);
            pText.setColor(textColorRed);
            canvas.drawText(limitTextLength(ticketInfo.single), textX2, baseline, pText);
            canvas.drawText(limitTextLength(ticketInfo.discounts), textX4, baseline, pText);

            //底部门票说明
            if (hasTicketInfo() && ticketTextStaticLayout != null) {
                canvas.save();
                //设定文字开始绘制的坐标，该坐标对应文字的left,top
                canvas.translate(ticketInfoTextPadding, topRect.bottom + ticketInfoTextPadding + (bottomRect.bottom - bottomRect.top - ticketInfoTextH - 2 * ticketInfoTextPadding) / 2);
                ticketTextStaticLayout.draw(canvas);
                canvas.restore();
            }
        }
    }

    private void computeH() {
        if (hasTicketInfo() && w > 2 * ticketInfoTextPadding) {
            if (ticketTextPaint == null) {
                ticketTextPaint = new TextPaint();
                ticketTextPaint.setColor(textColorGray);
                ticketTextPaint.setTextSize(redTextSize);
                ticketTextPaint.setAntiAlias(true);
            }
            //此处每次都创建新对象来获取ticket_info最新值
            ticketTextStaticLayout = new StaticLayout(ticketInfo.ticket_info, ticketTextPaint, w - 2 * ticketInfoTextPadding, Layout.Alignment.ALIGN_CENTER, 1.1F, 1.1F, true);
            ticketInfoTextH = ticketTextStaticLayout.getHeight();

            h = (int) (0.4 * w) + ticketTextH;
        } else {
            h = (int) (0.4 * w);
        }

        ticketTextH = Math.max((ticketInfoTextH + ticketInfoTextPadding * 2), rowH);
        h = hasTicketInfo() ? (int) (0.4 * w) + ticketTextH : (int) (0.4 * w);
    }

    private Typeface getTypeface() {
        Typeface roboto = Typeface.create("sans-serif-medium", Typeface.NORMAL);
        if (roboto == null || roboto.getStyle() == Typeface.NORMAL)
            roboto = Typeface.DEFAULT_BOLD;

        return roboto;
    }

    /**
     * 设置pText的字体大小等属性时，更新文字居中距离
     *
     * @return 文字居中的y坐标
     */
    private float getTextDis() {
        Paint.FontMetrics fontMetrics = pText.getFontMetrics();
        return (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
    }

    /**
    * ticketInfo为后台返回的数据模型，此处不再贴出
    */
    public void setTicketInfo(ScenicDetailInfo.TicketInfo ticketInfo) {
        this.ticketInfo = ticketInfo;
        if (ticketInfo != null) {
            computeH();
            //重新layout，确定view的绘制区域
            requestLayout();
        } else {
            invalidate();
        }
    }

    private String limitTextLength(String src) {
        if (!TextUtils.isEmpty(src) && src.length() > 5)
            src = src.substring(0, 5) + "...";
        return src;
    }

    private boolean hasTicketInfo() {
        return ticketInfo != null && !TextUtils.isEmpty(ticketInfo.ticket_info);
    }
}

可以看到无非就是定义一些颜色啊、坐标啊这些，在onLayout的时候计算出对应的值，然后draw即可，主要是思路要清晰，我这里是从上而下，从左到右的思路绘制。

这个view也有个弊端，就是大小及样式固定，里面的文字均为单行展示没处理自动换行，不过满足需求就好了啊，不要那么折腾，不然头发又要变少了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。