自定义view 之 网格

最新推荐文章于 2022-11-29 13:07:17 发布
最新推荐文章于 2022-11-29 13:07:17 发布
阅读量939 收藏 2
点赞数 1
分类专栏： 自定义view 文章标签： 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/unique_even/article/details/50850138
版权

这两天一直在写自定义view ,这个还没有全部完成，不过也还是先总结下吧，免得到时候又忘记了~~~~

对于这个图，我刚开始的思路是先把x轴和y轴画出来，但是画出来的却不是我要的效果，x轴的位置变成这样了这里写图片描述 ，和我想画的x轴位置不一样了，我用断点跟了，发现是坐标点算错了，但是我将坐标的改好后，发先x轴不翼而飞了~~~~之后才发现是画到画布外面去了 ~~然后，我问了下带我的师兄，重新理顺了下思路重新写过~

这里写图片描述
这里写图片描述

先将x轴画出来，再以同样的方法把y轴画出来~~~~语言表达能力有限，就用代码来展示吧。

public class Curve extends View {

private Paint paintLine;//先定义一个画笔，用来画需要的线条
//然后在写两个变量，分别是 x,y轴的线条数量
private int xLineCount = 7;
private int yLineCount = 7;

//我们在绘制网格的时候，线与线之间有个间距，也分别定义两个变量
private float xInterval;
private float yInterval;

// 距离左侧和底部的距离
private float left = 30;
private float bottom=30;


public Curve(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);//初始画笔
}

public Curve(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
}

public Curve(Context context) {
    super(context);
    init(context);
}

//画线之前要先计算间距
private void calculate() {
    if (xInterval == 0)
        xInterval = (this.getHeight() - bottom) / xLineCount;

    if (yInterval == 0)
        yInterval = (this.getWidth() - left) / yLineCount;

}
private void init(Context cont) {
    // 画线
    paintLine = new Paint();
    paintLine.setAntiAlias(true);// 抗锯齿，在绘制棱角分明的图形时不需要用
    paintLine.setColor(Color.RED); //设置线条的颜色
    paintLine.setStrokeWidth(1f);// 设置笔刷的粗细度
｝

private void drawFrame(Canvas canvas) {
    calculate();//在画线之前要先执行一次，否则就会出现我前面说的问题~~~
    // 绘制横线
    for (int i = 0; i <= xLineCount; i++) {
        float startY = i * xInterval + xInterval;// 间距
        canvas.drawLine(left + 5, startY, getWidth(), startY, paintLine);
    }

    // 绘制竖线
    for (int j = 0; j < yLineCount; j++) {
        float leftSpace = yInterval * j + left + 5;
        canvas.drawLine(leftSpace, bottom, leftSpace, this.getHeight() - bottom, paintLine);
    ｝
｝

@Override
protected void onDraw(Canvas canvas) {
    //先写一个绘制连线框的方法
    drawFrame(canvas);
    super.onDraw(canvas);
}

}

效果图这里写图片描述

画完这个，我想在x轴的下方写字，然后我又遇到各自问题，比如字体都重叠在一起了这里写图片描述

public class Curve extends View {

private Paint paintLine;//先定义一个画笔，用来画需要的线条
private Paint paintfont;// 定义一个写字的笔
//然后在写两个变量，分别是 x,y轴的线条数量
private int xLineCount = 7;
private int yLineCount = 7;

//我们在绘制网格的时候，线与线之间有个间距，也分别定义两个变量
private float xInterval;
private float yInterval;

// 距离左侧和底部的距离
private float left = 30;
private float bottom=30;

private String [] mTime={"01","02","03","04","05","06","今日"};
private String mTimeText;

public Curve(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);//初始画笔
}

public Curve(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
}

public Curve(Context context) {
    super(context);
    init(context);
}

//画线之前要先计算间距
private void calculate() {
    if (xInterval == 0)
        xInterval = (this.getHeight() - bottom) / xLineCount;

    if (yInterval == 0)
        yInterval = (this.getWidth() - left) / yLineCount;

}
private void init(Context cont) {
    // 画线
    paintLine = new Paint();
    paintLine.setAntiAlias(true);// 抗锯齿，在绘制棱角分明的图形时不需要用
    paintLine.setColor(Color.RED); //设置线条的颜色
    paintLine.setStrokeWidth(1f);// 设置笔刷的粗细度

    // 写字
    paintfont = new Paint();
    paintfont.setColor(Color.BLACK);
    paintfont.setFakeBoldText(true);
    paintfont.setTextSize(18);
｝

private void drawFrame(Canvas canvas) {
    calculate();//在画线之前要先执行一次，否则就会出现我前面说的问题~~~
    // 绘制横线
    for (int i = 0; i <= xLineCount; i++) {
        float startY = i * xInterval + xInterval;// 间距
        canvas.drawLine(left + 5, startY, getWidth(), startY, paintLine);
    }

    // 绘制竖线
    for (int j = 0; j < yLineCount; j++) {
        float leftSpace = yInterval * j + left + 5;
        canvas.drawLine(leftSpace, bottom, leftSpace, this.getHeight() - bottom, paintLine);
        /**本来我想循环数组，把值一个一个传进去的，也就是每画一条y轴就会在x轴下方写一个值，
        然而这个就是一个坑，我打断点，发现这段代码有问题，无论我怎么改字体都会重叠在一起~~~~*/
        for (int i = 0; i < mTime.length; i++) {
            mTimeText = mTime[i];
            // x轴下方的时间，根据y轴来变化
            canvas.drawText(mTimeText, leftSpace, this.getHeight(), paintfont);
            mTimeText = "";
        }
    ｝
｝

@Override
protected void onDraw(Canvas canvas) {
    //先写一个绘制连线框的方法
    drawFrame(canvas);
    super.onDraw(canvas);
}

}

修改后的代码
public class Curve extends View {

private Paint paintLine;//先定义一个画笔，用来画需要的线条
private Paint paintfont;// 定义一个写字的笔
//然后在写两个变量，分别是 x,y轴的线条数量
private int xLineCount = 7;
private int yLineCount = 7;

//我们在绘制网格的时候，线与线之间有个间距，也分别定义两个变量
private float xInterval;
private float yInterval;

// 距离左侧和底部的距离
private float left = 30;
private float bottom=30;

private String [] mTime={"01","02","03","04","05","06","今日"};
private String mTimeText;

public Curve(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);//初始画笔
}

public Curve(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
}

public Curve(Context context) {
    super(context);
    init(context);
}

//画线之前要先计算间距
private void calculate() {
    if (xInterval == 0)
        xInterval = (this.getHeight() - bottom) / xLineCount;

    if (yInterval == 0)
        yInterval = (this.getWidth() - left) / yLineCount;

}
private void init(Context cont) {
    // 画线
    paintLine = new Paint();
    paintLine.setAntiAlias(true);// 抗锯齿，在绘制棱角分明的图形时不需要用
    paintLine.setColor(Color.RED); //设置线条的颜色
    paintLine.setStrokeWidth(1f);// 设置笔刷的粗细度

    // 写字
    paintfont = new Paint();
    paintfont.setColor(Color.BLACK);
    paintfont.setFakeBoldText(true);
    paintfont.setTextSize(18);
｝

private void drawFrame(Canvas canvas) {
    calculate();//在画线之前要先执行一次，否则就会出现我前面说的问题~~~
    // 绘制横线
    for (int i = 0; i <= xLineCount; i++) {
        float startY = i * xInterval + xInterval;// 间距
        canvas.drawLine(left + 5, startY, getWidth(), startY, paintLine);
    }

    // 绘制竖线
    for (int j = 0; j < yLineCount; j++) {
        float leftSpace = yInterval * j + left + 5;
        canvas.drawLine(leftSpace, bottom, leftSpace, this.getHeight() - bottom, paintLine);
        paintfont.setTextAlign(Align.CENTER);
        //每画一条竖线就写上对应的内容
        mTimeText = mTime[j];
        // x轴下方的时间，根据y轴来变化
        canvas.drawText(mTimeText, leftSpace, this.getHeight(), paintfont);
    ｝
｝

@Override
protected void onDraw(Canvas canvas) {
    //先写一个绘制连线框的方法
    drawFrame(canvas);
    super.onDraw(canvas);
}

}

这里写图片描述

好啦，这就是今天的学习成果，我还有点没有画上去，等我琢磨出来了，在写第三篇。

PS：如果有写的不好的地方，或者你们看完有什么见解的话请给我留言吧~~谢谢！

鱼鱼鱼鱼鱼鱼鱼儿
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
仿支付宝扫描，带网格扫描动画
09-25
一个仿支付宝扫一扫的功能，实现网格状动画，相册图片识别，开关灯，可以快速集成到项目中。
Android中自定义View之流式布局
10-10
Android中自定义View之流式布局的Demo，代码中关键步骤并有注释原理解说，轻松掌握自定义View的onMeasure和onLayout的实现
Android自定义View——多边形网格属性图
09-06
Android自定义View——多边形网格属性图
Android自定义View之五子棋
03-19
一款简易的五子棋Demo 主要使用Android的自定义View 自定义了一个有关五子棋的View Demo中包括棋盘网格线的绘制 棋子的绘制 规则的制定 输赢的提示 还有最重要的当接到电话以及旋转屏幕等情况时 当前游戏状态的存储与恢复 以及"再来一局"
给View加自定义的网格线
04-04
该源码案例是一个给View加自定义的网格线，源码XIYGridBackgroundView，在view上绘制需要的线 XIYGridBackgroundView *view1 = [[XIYGridBackgroundView alloc] initWithFrame:CGRectMake(20, 40, self.view.frame.size.width-40, 200)]; view1.lineNumber = XIYLineNumberMake(4, 3); 4条水平线（不包含上下边），3条竖直线 view1.strokeColor = [UIColor lightGrayColor]; view1.lineInsets = UIEdgeInsetsMake(0, 0, 0, 0); view1.borderColor = [UIColor lightGrayColor]; view1.borders = UIRectEdgeTop|UIRectEdgeBottom; view1.autoresizingMask = UIViewAutoresizingFlexibleWidth; [self.view addSubview:view1];
Opencascade 可视化--创建视图分析(二)
Robot 离线编程 PDPS Opencascade
05-21 1618
Opencascade OpenGl Driver 创建视图的过程、以及源码分析。OpenGl_Driver 通过EGL建立与原生窗口系统之间的关联
androd---自定义VIEW实现网格布局
binbin
01-30 1415
今天在说下自定义VIEW--- 实现网格布局的这个功能吧。最近这个需求是检测手机屏幕是否出现问题，所以需要触摸屏幕网格，看是否会变色，如果不会变色，说明屏幕对应这块网格有问题。希望对大家在后面的类似需求的时候，有帮助 直接上代码吧 public class GridRelativeLayout extends RelativeLayout { private Canvas myCan
[Swift]在UIView上绘制网格
Gamin
11-29 1779
在UIView上绘制网格
Android 自定义View实现画背景和前景（ViewGroup篇）
weixin_33842304的博客
02-22 654
2019独角兽企业重金招聘Python工程师标准>>> ...
android自定义View: 绘制图表(一)
高级开发者进阶ing... QaQ
09-20 1616
本系列自定义View全部采用kt:mac4.1.3: 1.5.0本篇内容: 从0到1绘制一个可控制的图表!
自定义view之——折线图
11-28
自定义view之——折线图
实现android端的类似二维码的扫描窗口（中间亮，四周暗，扫描线循环）
09-29
实现android端的类似二维码的扫描窗口（中间亮，四周暗，扫描线循环）
自定义布局RelativeLayout 画网格线
07-03
在Android中画线必须由一个载体，要么是一个控件，要么是一个布局，其实他们都是继承自View，通过自定义控件或布局的方式画线是最常见的。这个例子实现了在自定义RelativeLayout中画网格线
Qt 下结合SARibbon、Dock 开发Opencascade应用的基础框架
Robot 离线编程 PDPS Opencascade
05-17 2504
Qt 下结合SARibbon、Qt-Advanced-Docking-System开发Opencascade应用的基础框架
RecyclerView 的简单使用 -- （横向/纵向）列表、网格、瀑布流的实现
热门推荐
villen的博客
06-01 2万+
代码实现 Activity.java public class RecyclerViewActivity extends BaseActivity { private RecyclerView recyclerView; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { ...
RecyclerView实现标题-网格，标题-网格布局
小资女的博客
05-04 1480
公司让实现标题--网格，标题--网格的布局，想来想去就用Recyclerview来实现了，说实话，中间休息了一段时间，recyclerview我用的并不多，为了工作，只能向前。。。后来在网上也是各种扒资料，最终实现了效果，虽然效果实现了，但是里面还有些地方是自己不太明白的，特意记录一下下。。。。。1.首先创建recyclerview的布局 layoutManager1 = new GridLayo...
Android-自定义View实现二维码网格扫描+纵向雷达的扫描效果
M075097的博客
11-14 6694
Android-自定义View实现二维码网格扫描+纵向雷达的扫描效果
构建自定义的网格
LYKymy的博客
10-14 645
有一些参数需要为网格指定。 这是通过以下四个步骤完成的： 选择三角形网格和一般多边形网格。 选择网格内核 通过所谓的Traits类对网格进行参数化。 您可以向网格项添加任意类，指定标量，点，正常和颜色类型，并使用预定义属性，如Attributes :: Normal和Attributes :: Color。 使用自定义属性将数据动态绑定到网格或网格实体（顶点，（半）边，面）。 多边形网格与...
linux大纲资料.txt
最新发布
04-23
linux
android网格选择颜色用自定义控件怎么实现
05-31
要实现一个自定义控件来实现Android网格选择颜色，可以按照以下步骤进行： 1. 创建一个继承自View或其子类的自定义控件类，例如ColorGridView。 2. 在该类中添加必要的属性，例如颜色数组、列数等。 3. 重写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值