Android UI效果之绘图篇(二)

 更新时间:2016年02月23日 10:32:21   作者:_Hi_xiaoyu  
这篇文章主要介绍了Android UI效果之绘图篇,针对Android开发中的UI效果Canvas进行讲解,感兴趣的小伙伴们可以参考一下

一、Canvas
Canvas中的方法很多,这里我们只挑常用的进行讲解说明
Canvas可以绘制的对象有:

  • 弧线(arcs) canvas.
  • 填充颜色(argb和color)
  • Bitmap
  • 圆(circle和oval)
  • 点(point)
  • 线(line)
  • 矩形(Rect)
  • 图片(Picture)
  • 圆角矩形 (RoundRect)
  • 文本(text)
  • 顶点(Vertices)
  • 路径(path)

绘制弧形

/**
  * 绘制弧形
  * @param oval 绘制区域
  * @param startAngle 开始绘制的角度
  * @param sweepAngle 结束绘制的角度
  * @param useCenter 是否使用中心
  * @param paint 画笔
  */
 public void drawArc(RectF oval, float startAngle, float sweepAngle,boolean useCenter, Paint paint)

其中前三个参数都比较好理解,关键是第三个参数useCenter,看张图你就明白了

可以发现当useCenter=true时,弧形的区域是开始角度的点和结束角度的点和中心点连接起来的区域;而useCenter=false时,弧形区域是开始角度的点和结束角度的点直接连接起来的区域。

绘制路径

mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(3);
  Path path = new Path();
  path.moveTo(5, 10);
  path.lineTo(120, 30);
  path.lineTo(44, 66);
  path.lineTo(77, 231);
  canvas.drawPath(path, mPaint);

绘制路径比较简单,依次添加相应的坐标点即可,注意设置画笔的抗锯齿和Style即可。
- 绘制文字路径

 mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(3);
  Path path = new Path();
  path.moveTo(50, 50);
  path.lineTo(200, 250);
  path.lineTo(300, 450);
  path.lineTo(300, 650);
  mPaint.setTextSize(46);
  canvas.drawTextOnPath("Hi_xiaoyu_bolg_in_android", path, 0, 0, mPaint);

这个和绘制路径一样,注意设置大小,画笔粗细即可。

/**
  * 画圆
  * @param cx  圆心X坐标
  * @param cy  圆心Y坐标
  * @param radius 圆的半径
  * @param paint 
  */
 public void drawCircle(float cx, float cy, float radius, Paint paint) {
 } 

  // 画圆
  canvas.drawCircle(50, 50, 50, mPaint);
  RectF r = new RectF(150, 0, 270, 110);
  // 画矩形
  canvas.drawRect(r, mPaint);
  RectF oval = new RectF(0, 120, 50, 270);
  // 画椭圆
  canvas.drawOval(oval, mPaint);
  RectF rect = new RectF(100, 120, 170, 200);
  // 画圆角矩形
  canvas.drawRoundRect(rect, 30, 20, mPaint);
  // 画线
  canvas.drawLine(200, 120, 300, 300, mPaint);

其他的drawXxx方法这里就不再赘述,大家可以一一去尝试。
这里再来看下canvas中几个比较重要的方法:

canvas.save();
canvas.restore();
canvas.translate(dx, dy);
canvas.rotate(degrees);
canvas.saveLayer(bounds, paint, saveFlags);

save():把当前的绘制的图像保存起来,让后续的操作相当于是在一个新的图层上的操作。
restore():将sava()之前的图层和save之后的图层进行合并操作
translate():画布平移
rotate():画布旋转
大家可能会有疑问,既然我们可以利用坐标系来定位画布中的所有坐标点,为什么还要画布平移和画布旋转的api呢?现在假设有这样一个需求,需要绘制一个仪表盘,而绘制仪表盘的刻度我们可以利用三角函数sin cos 来计算出相应的偏移角度,当然这对于数学学霸来说很easy,一般人而言就需要把三角函数的公式翻个遍了,所以谷歌工程师,为我们实现平移和旋转的api,遇到类似于仪表盘的效果是,只需要旋转当前画布就能实现相应的效果,为我们节省了计算量和工作量。

paint.setColor(0xff00ccff);
  paint.setAntiAlias(true);
  paint.setStyle(Style.STROKE);
  canvas.translate(canvas.getWidth() / 2, 200); // 将位置移动画纸的坐标点,不用每次都从坐标原点计算
  canvas.drawCircle(0, 0, 100, paint); 
  Paint tmpPaint = new Paint(paint); 
  tmpPaint.setStrokeWidth(1);
  float y = 100;
  int count = 60; // 总刻度数
  for (int i = 0; i < count; i++) {
   if (i % 5 == 0) {
    canvas.drawLine(0f, y, 0, y + 12f, paint);
    canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 25f,
      tmpPaint);
   } else {
    canvas.drawLine(0f, y, 0f, y + 5f, tmpPaint);
   }
   canvas.rotate(360 / count, 0f, 0f); // 旋转画纸
  }
  // 绘制指针
  paint.setStrokeWidth(2);
  canvas.drawLine(0, 10, 0, -65, paint);
  paint.setStrokeWidth(4);
  canvas.drawLine(0, 10, 20, -35, paint);

以上就是Android开发中的UI效果设计模块的第二部分内容,之后还会继续更新,希望对大家的学习有所帮助。

相关文章

  • Android okhttputils现在进度显示实例代码

    Android okhttputils现在进度显示实例代码

    本文通过实例代码给大家详细介绍了Android okhttputils现在进度显示,代码简答易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • Cocos2d-x入门教程(详细的实例和讲解)

    Cocos2d-x入门教程(详细的实例和讲解)

    这篇文章主要介绍了Cocos2d-x入门教程,包括详细的实例、讲解以及实现过程,需要的朋友可以参考下
    2014-04-04
  • Android实现Android APP自动更新功能

    Android实现Android APP自动更新功能

    在移动应用的全生命周期中,版本迭代和用户更新体验至关重要,传统的做法是依赖 Google Play 商店强制推送更新,但在某些场景下,我们需要更即时地控制更新流程,所以本文给大家介绍了Android实现Android APP自动更新功能,需要的朋友可以参考下
    2025-04-04
  • android实现简单计算器功能

    android实现简单计算器功能

    这篇文章主要为大家详细介绍了android实现简单计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Android用户输入自动提示控件AutoCompleteTextView使用方法

    Android用户输入自动提示控件AutoCompleteTextView使用方法

    这篇文章主要为大家详细介绍了Android用户输入自动提示控件AutoCompleteTextView的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • android基于SwipeRefreshLayout实现类QQ的侧滑删除

    android基于SwipeRefreshLayout实现类QQ的侧滑删除

    本篇文章主要介绍了android基于SwipeRefreshLayout实现类QQ的侧滑删除,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • flutter 路由跳转的实现示例

    flutter 路由跳转的实现示例

    这篇文章主要介绍了flutter 路由跳转的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • android scrollview顶部渐渐消失实现实例详解

    android scrollview顶部渐渐消失实现实例详解

    这篇文章主要为大家介绍了android scrollview顶部渐渐消失实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Android自定义recyclerView实现时光轴效果

    Android自定义recyclerView实现时光轴效果

    这篇文章主要介绍了Android自定义recyclerView实现时光轴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Android判断设备网络连接状态及判断连接方式的方法

    Android判断设备网络连接状态及判断连接方式的方法

    这篇文章主要介绍了Android判断设备网络连接状态及判断连接方式的方法,涉及Android针对网络连接的相关判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论