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

这篇文章主要为大家详细介绍了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也有个弊端,就是大小及样式固定,里面的文字均为单行展示没处理自动换行,不过满足需求就好了啊,不要那么折腾,不然头发又要变少了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。

以上就是Android自定义view绘制表格的方法的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动