Android圆形进度显示控件的SectorProgressView的使用

一个圆形的进度显示控件，用圆中扇形的角度大小来表示进度信息

开源组件来自：http://p.codekk.com/detail/Android/timqi/SectorProgressView

直接拿取SectorProgressView.java类和attr.xml使用，复制到自己的项目中，

效果图：

进度百分比和起始角度都可以设置

在res/values 文件下定义一个attrs.xml 文件：

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="SectorProgressView">        <attr name="bgColor" format="color"/>        <attr name="fgColor" format="color"/>        <attr name="percent" format="float"/>        <attr name="startAngle" format="float"/>    </declare-styleable></resources>

自定义SectorProgressView

package com.example.sectorprogressviewdemo;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;public class SectorProgressView extends View {    private int bgColor;    private int fgColor;    private float startAngleBg, lengthAngleBg, startAngleFg, lengthAngleFg;    private Paint bgPaint;    private Paint fgPaint;    private RectF oval;    public SectorProgressView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,                R.styleable.SectorProgressView,                0,0);        try {            bgColor = a.getColor(R.styleable.SectorProgressView_bgColor, 0xffe5e5e5);            fgColor = a.getColor(R.styleable.SectorProgressView_fgColor, 0xffff765c);            percent = a.getFloat(R.styleable.SectorProgressView_percent, 0);            startAngle = a.getFloat(R.styleable.SectorProgressView_startAngle, 0);            computeArcArgs(startAngle, percent);        } finally {            a.recycle();        }        init();    }    private void computeArcArgs(float startAngle, float percent) {        this.lengthAngleFg = percent*36/10;        this.lengthAngleBg = 360-lengthAngleFg;        this.startAngleFg = startAngle;        this.startAngleBg = startAngleFg +lengthAngleFg;    }    private void init() {        bgPaint = new Paint();        bgPaint.setColor(bgColor);        fgPaint = new Paint();        fgPaint.setColor(fgColor);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        float xpad = (float)(getPaddingLeft()+getPaddingRight());        float ypad = (float)(getPaddingBottom()+ getPaddingTop());        float wwd = (float)w - xpad;        float hhd = (float)h - ypad;        oval = new RectF(getPaddingLeft(), getPaddingTop(), getPaddingLeft()+wwd, getPaddingTop()+hhd);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawArc(oval, startAngleBg, lengthAngleBg, true, bgPaint);        canvas.drawArc(oval, startAngleFg, lengthAngleFg, true, fgPaint);    }    public int getBgColor() {        return bgColor;    }    public void setBgColor(int bgColor) {        this.bgColor = bgColor;        refreshTheLayout();    }    public int getFgColor() {        return fgColor;    }    public void setFgColor(int fgColor) {        this.fgColor = fgColor;        refreshTheLayout();    }    private void refreshTheLayout() {        invalidate();        requestLayout();    }    private float percent;    public float getStartAngle() {        return startAngle;    }    public void setStartAngle(float startAngle) {        this.startAngle = startAngle;        computeArcArgs(startAngle, percent);        invalidate();        requestLayout();    }    public float getPercent() {        return percent;    }    public void setPercent(float percent) {        this.percent = percent;        computeArcArgs(startAngle, percent);        invalidate();        requestLayout();    }    private float startAngle;}

布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin">    <com.example.sectorprogressviewdemo.SectorProgressView        android:id="@+id/spv"        android:layout_width="280dp"        android:layout_height="280dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="20dp"        app:bgColor="#e5e5e5"        app:fgColor="#CD3700"        app:percent="25"        app:startAngle="0" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/llStartAngle"        android:layout_alignParentBottom="true"        android:layout_marginBottom="20dp"        android:gravity="center_vertical"        android:orientation="horizontal">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="startAngle: " />        <SeekBar            android:id="@+id/sbStartAngle"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1" />    </LinearLayout>    <LinearLayout        android:id="@+id/llPercent"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_above="@id/llStartAngle"        android:layout_marginBottom="20dp"        android:gravity="center_vertical"        android:orientation="horizontal">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="     percent: " />        <SeekBar            android:id="@+id/sbPercent"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1" />    </LinearLayout>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="30dp"        android:textAppearance="?android:attr/textAppearanceSmall"        android:id="@+id/tvTip"        android:layout_below="@+id/spv"        android:layout_centerHorizontal="true"/></RelativeLayout>

在main中使用：

package com.example.sectorprogressviewdemo;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;import android.widget.TextView;public class MainActivity extends Activity implements OnSeekBarChangeListener {private TextView tvTip;private SectorProgressView spv;private SeekBar sbPercent;private int percent;private SeekBar sbStartAngle;private int startAngle;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tvTip = (TextView) findViewById(R.id.tvTip);spv = (SectorProgressView) findViewById(R.id.spv);sbPercent = (SeekBar) findViewById(R.id.sbPercent);sbPercent.setMax(100);sbPercent.setProgress(25);//设置起始百分比//sbPercent.setBackgroundColor(0xffCD3700);//xml中和java代码都可以设置percent=25;sbStartAngle = (SeekBar) findViewById(R.id.sbStartAngle);sbStartAngle.setMax(360);sbStartAngle.setProgress(0);//设置起始角度startAngle = 0;sbPercent.setOnSeekBarChangeListener(this);sbStartAngle.setOnSeekBarChangeListener(this);showTip();}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {// TODO Auto-generated method stubswitch (seekBar.getId()) {case R.id.sbPercent:spv.setPercent(progress);percent=progress;break;case R.id.sbStartAngle:spv.setStartAngle(progress);startAngle=progress;break;default:break;}showTip();}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}protected void showTip() {// TODO Auto-generated method stub tvTip.setText("percent: " + percent + ";  startAngle: " + startAngle);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

更多相关文章

随机推荐