android实现简单圆弧效果

最近项目完成就开始搞一些有用没用的东西,以前面试的时候有人问我那种圆弧效果怎么做,还问我翻牌效果,我只看过,没有做过,现在有空了,而且想到可能会用到就做个简单的
圆弧很简单,自定义个View,创建个Paint,设置 arcPaint.setStyle(Paint.Style.STROKE)再设置圆弧的宽,再在onDraw内调用canvas.drawArc()就好了
现在只做一个带刻度的圆弧和一个开口地方是圆角的圆弧。其他各种效果以后再摸索

ArcView.java

public class ArcView extends View {
  private Paint textPaint;
  private Paint arcPaint;
  private Shader backGradient;
  private Xfermode xfermode;
  private RectF oval = new RectF();
  public ArcView(Context context) {
    super(context);
    init();
  }

  public ArcView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  private int type = 0;

  public void setType(int type) {
    this.type = type;
    if(type == 1){
      start = 10;
    }
  }
  private void init(){
    arcPaint = new Paint();
    arcPaint.setAntiAlias(true);
    if(type == 0){
      xfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
    }

    textPaint = new Paint();
    textPaint.setAntiAlias(true);
    textPaint.setColor(Color.WHITE);
    textPaint.setTextSize(50);
    textPaint.setStyle(Paint.Style.FILL);
    textPaint.setTextAlign(Paint.Align.CENTER);

  }

  private int strokeWidth = 40;

  public void setStrokeWidth(int strokeWidth) {
    this.strokeWidth = strokeWidth;
  }

  private int max = 100;

  public void setMax(int max) {
    this.max = max;
  }

  private int progress;

  public void setProgress(int progress) {
    this.progress = progress;
    postInvalidate();
  }

  private int start = 0;

  public void setStart(int start) {
    if(type == 1){
      if(start < 10){
        start = 10;
      }
    }else{
      if(start < 0){
        start = 0;
      }
    }

    this.start = start;
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if(getWidth() != 0){
      int width = getWidth();
      int height = getHeight();
      int cx = width/2;
      int cy = height/2;
      if(backGradient == null){
        oval.set( strokeWidth/2, strokeWidth/2,
            width - strokeWidth/2, height - strokeWidth/2);
        int colorStart = getResources().getColor(R.color.colorPrimary);
        int color2 = Color.GREEN;
        int colorEnd = Color.RED;

        backGradient = new SweepGradient(cx,cy,new int[]{color2 ,colorStart, colorEnd},new float[]{0.1f,0.4f,0.9f});

        postInvalidate();
      }else{
        int sc = 0;
        if(type == 0){
          sc = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);
        }else{
          canvas.save();
        }

        canvas.rotate(90,cx,cy);
        arcPaint.setColor(Color.GRAY);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(strokeWidth);
        if(type == 1){
          arcPaint.setStrokeCap(Paint.Cap.ROUND);
        }

        int s =start;
        int e = start*2;
        //底色
        canvas.drawArc(oval,s,360 - e,false,arcPaint);
        arcPaint.setShader(backGradient);
        //渐变
        int sweep = (int) (progress*1.0f/max*(360 - e));
        canvas.drawArc(oval,s,sweep,false,arcPaint);

        arcPaint.setShader(null);

        if(type == 0){
          //刻度
          arcPaint.setXfermode(xfermode);
          arcPaint.setStyle(Paint.Style.STROKE);
          arcPaint.setStrokeWidth(5);

          for (int i = 0; i < 36;i++){
            canvas.drawLine(0,cy,getWidth(),cy,arcPaint);
            canvas.rotate(5,cx,cy);
          }
          arcPaint.setXfermode(null);
          canvas.restoreToCount(sc);
        }else{
          canvas.restore();
        }

        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        int baseLineY = (int) (cy - top/2 - bottom/2);
        canvas.drawText(progress+"%",cx,baseLineY,textPaint);

        //十字线,用来参考的,可删除
        canvas.drawLine(cx,0,cx,height,textPaint);
        canvas.drawLine(0,cy,width,cy,textPaint);

      }

    }

  }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.hyq.hm.testdraw.MainActivity">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <SeekBar
      android:id="@+id/seek_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="20dp"
      android:max="100"/>
    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <com.hyq.hm.testdraw.ArcView
        android:id="@+id/arc_view_0"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:background="#885453"
        />
      <com.hyq.hm.testdraw.ArcView
        android:id="@+id/arc_view_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        />
    </LinearLayout>
  </LinearLayout>

</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

  private SeekBar seekBar;
  private ArcView arcView0;
  private ArcView arcView1;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    arcView0 = findViewById(R.id.arc_view_0);
    arcView1 = findViewById(R.id.arc_view_1);
    arcView0.setType(0);
    arcView1.setType(1);
    arcView0.setStart(10);
    arcView1.setStart(0);

    seekBar = findViewById(R.id.seek_bar);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
      @Override
      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        arcView0.setProgress(progress);
        arcView1.setProgress(progress);
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {

      }

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {

      }
    });
  }
}

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

(0)

相关推荐

  • 一个简单的Android圆弧刷新动画

    之前刷贴吧的时候看到的贴吧的刷新动画,就是一个圆弧旋转的动画,感觉挺好看的,就抽空实现了一下. 最终的结果是这样的: 从上图中可以看出,动画的效果是三段圆弧进行旋转,同时弧度也在逐渐增大缩小,这里采用的是在onDraw中绘制三段圆弧. // 绘制圆弧 mPaint.setColor(mTopColor); canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint); mPaint.setColor

  • Android 自定义球型水波纹带圆弧进度效果(实例代码)

    需求 如下,实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度. 思路 外围圆弧进度:可以通过canvas.drawArc()实现.由于圆弧需要实现渐变,可以通过给画笔设置shader(SweepGradient)渲染,为了保证圆弧起始的颜色值始终一致,需要动态调整shader的参数.具体参见 SweepGradient(centerX.toFloat(), centerY.toFloat(), circleColors[0], floatArrayOf(0f, value

  • Android实现渐变色的圆弧虚线效果

    首先来看看效果图: 1,SweepGradient(梯度渲染) public SweepGradient (float cx, float cy, int[] colors, float[] positions) 扫描渲染,就是以某个点位中心旋转一周所形成的效果!参数依次是: cx:扫描的中心x坐标 cy:扫描的中心y坐标 colors:梯度渐变的颜色数组 positions:指定颜色数组的相对位置 public static final int[] SWEEP_GRADIENT_COLORS

  • Android自定义圆弧进度条加数字动态变化

    本文实例为大家分享了Android自定义圆弧进度条数字变化的具体代码,供大家参考,具体内容如下 效果如下: 思路:一个内环圆弧和一个外环圆弧,因为有一个圆圈是在圆弧上做圆周运动,所以在画圆的时候必须要得到圆弧上的各个点的坐标,这里其实就用到了PathMeasure这个类,可以帮我们拿到这些点,在画圆弧的时候也理所应当的要使用path,然后根据外界动态的传值进行重绘就能达到动态的效果 代码如下: public class ProgressPathRainbow extends View { pri

  • Android自定义View绘制彩色圆弧

    本文实例为大家分享了Android自定义View绘制彩色圆弧的具体代码,供大家参考,具体内容如下 效果如下: 自定义View代码如下: package com.example.yan; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.RectF; i

  • Android自定义View实现圆弧进度效果

    前言:Android开发中,自定义View实现自己想要的效果已成为一项必备的技能,当然自定义View也是Android开发中比较难的部分,涉及到的知识有Canvas(画布),Paint(画笔)等,自定义控件分为三种:一是直接继承自View,完全的自定义:二是在原有控件的基础上进行改造,达到自己想要的效果:还有一种就是自定义组合控件,将已有的控件根据自己的需要进行组合实现的效果.本人对自定义View也是一知半解,简单记录下自己学习自定义View(继承自View)的过程,方便日后翻阅. 技术实现 1

  • Android 自定View实现仿QQ运动步数圆弧及动画效果

    在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的. 1.先看效果图 2.效果图分析 功能说明:黄色的代表用户设置的总计划锻炼步数,红色的代表用户当前所走的步数. 初步分析:完全自定义View重写onDraw()方法,画圆弧. 3.画一个圆弧必备知识 在Canvas中有一个画圆弧的方法 drawArc(RectF oval, float startAngle, float sweepA

  • 利用Android画圆弧canvas.drawArc()实例详解

    前言 在学习android中图形图像处理技术这部分内容时,对绘制圆弧函数canvas.drawArc()的用法.参数含义及画图原理很是不理解,在网上搜索了一些,加上自己的理解,在此做个小总结,下面来一起看看吧. 示例代码 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) { drawArc(oval.left,

  • Android TextView(圆弧)边框和背景实例详解

     Android TextView 圆弧 效果图: 布局代码: <TextView android:id="@+id/product_tag" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:singleLine="true" androi

  • Android使用ImageView 制作透明圆弧实例代码

    这几天因为项目需求,需要在ImageView上面叠加一层透明圆弧,并且在沿着圆弧的方向显示相应的文字,效果如下图所示: 拿到这个需求,首先想到的是自定义一个ImageView来实现此功能,即在onDraw()中绘制圆弧和文字.同时因为要保证圆弧的位置可以任意摆放,圆弧的颜色.透明度以及文字大小.颜色等都是可控的,所以增加了一些自定义属性.实现代码非常简单,如下: 1.自定义ImageView: package com.chunk.customviewsdemo.views.ArcImageVie

随机推荐