摸鱼学Android 十二（控件2）

UI控件之二

1 ProgressBar(进度条)

1.1 基本属性

• max：进度条最大值
• progress：当前进度值
• progressDrawable：轨道资源图片
• indeterminate：设置不确定模式，为true则进度条动画无限循环
• indeterminateDrawable：不确定模式的资源图片
• indeterminateDuration：不确定模式的持续时间
• secondaryProgress：二级进度条（比如视频的播放进度和缓冲进度）
• android:indeterminateBehavior：进度满时的不确定模式表现，[ repeat | cycle ]
• indeterminateOnly：限制为不确定模式
• maxHeight：最大高度
• miniHeight：最小高度
• maxWidth：最大宽度
• minWidth：最小宽度

1.2 自定义圆形进度条

1. 自定义View

public class CirclePgBar extends View {
    //未完成进度
    private Paint mBackPaint;
    //已完成进度
    private Paint mFrontPaint;
    //显示文本
    private Paint mTextPaint;
    //进度条宽度
    private float mStrokeWidth = 50;
    private float mHalfStrokeWidth = mStrokeWidth / 2;
    private float mRadius = 200;
    private RectF mRect;
    private int mProgress = 0;
    //目标值
    private int mTargetProgress = 100;
    private int mMax = 100;
    private int mWidth;
    private int mHeight;

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

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

    public CirclePgBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public Paint initPaint(int color) {
        Paint paint = new Paint();
        paint.setColor(color);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mStrokeWidth);

        return paint;
    }

    //完成相关参数初始化
    private void init() {
        //未完成进度条
        mBackPaint = initPaint(Color.WHITE);
        //已完成进度条
        mFrontPaint = initPaint(Color.GREEN);
        //文本
        mTextPaint = new Paint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    //重写测量大小的onMeasure方法
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);
    }

    //重写绘制View的核心方法onDraw()
    @Override
    protected void onDraw(Canvas canvas) {
        initRect();
        float angle = mProgress / (float) mMax * 360;
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
        canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
        canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);
        if (mProgress < mTargetProgress) {
            mProgress += 1;
            invalidate();
        }
    }

    public int getRealSize(int measureSpec) {
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        int result = size;

        if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
            result = (int) (mRadius * 2 + mStrokeWidth);
        }

        return result;
    }

    private void initRect() {
        if (mRect == null) {
            mRect = new RectF();
            int viewSize = (int) (mRadius * 2);
            int left = (mWidth - viewSize) / 2;
            int top = (mHeight - viewSize) / 2;
            int right = left + viewSize;
            int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);
        }
    }
}

2. 加入布局

<com.app.CirclePgBar
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

效果：

2 SeekBar（拖动条）

2.1 基本属性

SeekBar是ProgressBar子类，属性继承

• thumb：滑块的资源图片

2.2 监听事件

• onProgressChanged：进度发生改变时会触发
• onStartTrackingTouch：按住SeekBar时会触发
• onStopTrackingTouch：放开SeekBar时触发

3 RatingBar（星级评分条）

3.1 基本属性

RatingBar是ProgressBar，属性继承

• isIndicator：是否用作指示，用户无法更改，默认false
• numStars：显示多少个星星，必须为整数
• rating：默认评分值，必须为浮点数
• stepSize：评分每次增加的值，必须为浮点数

3.2 监听事件

• onRatingChanged()：评分改变时触发

3.3 自定义星级图标

1. 替换图片（随便找的）
   
2. 新建layer-list文件ratingbar_full.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <item android:id="@android:id/background"
          android:drawable="@drawable/blank" />
    <item android:id="@android:id/secondaryProgress"
          android:drawable="@drawable/blank" />
    <item android:id="@android:id/progress"
          android:drawable="@drawable/full" />
</layer-list>

3. 修改styles.xml

<style name="roomRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingbar_full</item>
        <item name="android:minHeight">52dip</item>
        <item name="android:maxHeight">52dip</item>
    </style>

4. 加入布局

<RatingBar
        android:id="@+id/rb_normal"
        style="@style/roomRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

效果