Android自定义view绘制表格
码仔时光 人气:0先上效果图
平时很少有这样的表格需求，不过第一想法就是自定义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也有个弊端，就是大小及样式固定，里面的文字均为单行展示没处理自动换行，不过满足需求就好了啊，不要那么折腾，不然头发又要变少了。
加载全部内容