从底部到顶部的android逐渐填满一圈

我用xml创build了一个有中风和白色背景的圆圈。 如何在用户操作中逐渐从底部到顶部填充(例如连续按下button)? 在这里输入图像说明

有没有免费的图书馆可以用来实现类似的事情?

Solutions Collecting From Web of "从底部到顶部的android逐渐填满一圈"

我创build了一个自定义视图类,将做你想要的。 在布局xml中可以设置四个自定义属性:

  • fillColorcolor – 设置填充区域的颜色。 默认是Color.WHITE
  • strokeColorcolor – 设置边界圆的颜色。 默认是Color.BLACK
  • strokeWidthfloat – 设置边界圆的厚度。 默认值是1.0
  • value整数:0-100 – 设置填充区域的值。 缺省值是0

请注意,这些属性必须在您的布局xml中使用custom前缀来代替android前缀。 根View还应包含custom xml命名空间。 (请参阅下面的示例。)其他标准View属性(如layout_widthbackground等)可用。

首先, CircleFillView类:

 public class CircleFillView extends View { public static final int MIN_VALUE = 0; public static final int MAX_VALUE = 100; private PointF center = new PointF(); private RectF circleRect = new RectF(); private Path segment = new Path(); private Paint strokePaint = new Paint(); private Paint fillPaint = new Paint(); private int radius; private int fillColor; private int strokeColor; private float strokeWidth; private int value; public CircleFillView(Context context) { this(context, null); } public CircleFillView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.CircleFillView, 0, 0); try { fillColor = a.getColor(R.styleable.CircleFillView_fillColor, Color.WHITE); strokeColor = a.getColor(R.styleable.CircleFillView_strokeColor, Color.BLACK); strokeWidth = a.getFloat(R.styleable.CircleFillView_strokeWidth, 1f); value = a.getInteger(R.styleable.CircleFillView_value, 0); adjustValue(value); } finally { a.recycle(); } fillPaint.setColor(fillColor); strokePaint.setColor(strokeColor); strokePaint.setStrokeWidth(strokeWidth); strokePaint.setStyle(Paint.Style.STROKE); } public void setFillColor(int fillColor) { this.fillColor = fillColor; fillPaint.setColor(fillColor); invalidate(); } public int getFillColor() { return fillColor; } public void setStrokeColor(int strokeColor) { this.strokeColor = strokeColor; strokePaint.setColor(strokeColor); invalidate(); } public int getStrokeColor() { return strokeColor; } public void setStrokeWidth(float strokeWidth) { this.strokeWidth = strokeWidth; strokePaint.setStrokeWidth(strokeWidth); invalidate(); } public float getStrokeWidth() { return strokeWidth; } public void setValue(int value) { adjustValue(value); setPaths(); invalidate(); } public int getValue() { return value; } private void adjustValue(int value) { this.value = Math.min(MAX_VALUE, Math.max(MIN_VALUE, value)); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); center.x = getWidth() / 2; center.y = getHeight() / 2; radius = Math.min(getWidth(), getHeight()) / 2 - (int) strokeWidth; circleRect.set(center.x - radius, center.y - radius, center.x + radius, center.y + radius); setPaths(); } private void setPaths() { float y = center.y + radius - (2 * radius * value / 100 - 1); float x = center.x - (float) Math.sqrt(Math.pow(radius, 2) - Math.pow(y - center.y, 2)); float angle = (float) Math.toDegrees(Math.atan((center.y - y) / (x - center.x))); float startAngle = 180 - angle; float sweepAngle = 2 * angle - 180; segment.rewind(); segment.addArc(circleRect, startAngle, sweepAngle); segment.close(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(segment, fillPaint); canvas.drawCircle(center.x, center.y, radius, strokePaint); } } 

现在,为了使自定义xml属性起作用,您需要将以下文件放在项目的/res/values文件夹中。

attrs.xml

 <resources> <declare-styleable name="CircleFillView" > <attr name="fillColor" format="color" /> <attr name="strokeColor" format="color" /> <attr name="strokeWidth" format="float" /> <attr name="value" format="integer" /> </declare-styleable> </resources> 

以下是简单演示应用程序的文件,其中CircleFillView的值由SeekBar控制。

我们的Activitymain.xml的布局文件:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res/com.example.circlefill" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical" > <com.example.circlefill.CircleFillView android:id="@+id/circleFillView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#ffffff" custom:fillColor="#6bcae2" custom:strokeColor="#75b0d0" custom:strokeWidth="20" custom:value="65" /> <SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> 

而且, MainActivity类:

 public class MainActivity extends Activity { CircleFillView circleFill; SeekBar seekBar; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); circleFill = (CircleFillView) findViewById(R.id.circleFillView); seekBar = (SeekBar) findViewById(R.id.seekBar); seekBar.setProgress(circleFill.getValue()); seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { if (fromUser) circleFill.setValue(progress); } @Override public void onStartTrackingTouch(SeekBar seekBar) {} @Override public void onStopTrackingTouch(SeekBar seekBar) {} } ); } } 

以及演示应用程序的截图:

截图