时间:2022-12-09 09:56:19 | 栏目:Android代码 | 点击:次
本文实例为大家分享了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也有个弊端,就是大小及样式固定,里面的文字均为单行展示没处理自动换行,不过满足需求就好了啊,不要那么折腾,不然头发又要变少了。