进度选择器

于 2016-01-14 11:15:08 发布
阅读量491 收藏
点赞数 1
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/flower_danni/article/details/50515962
版权

在项目中可能遇到这样的问题，随着自己填写内容不多同时状态选择器就发生改变。（马上把代码pull上面大家可以参考一下）
（1）布局文件

<LinearLayout 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"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context="com.hdf.etdemo.view.stepview.StepViewActivity" >

    <com.example.stepviewdemo.StepsView
        android:id="@+id/stepsView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="changeStep"
        android:text="下一步" />

</LinearLayout>

( 2 )代码实现

StepsView  stepsView = (StepsView) this.findViewById(R.id.stepsView);
stepsView.setLabels(labels)
.setBarColorIndicator(0xFF888888)// 设置未到达步骤的节点颜色
.setProgressColorIndicator(0xFF05A9F4)// 设置已到达步骤的节点颜色
.setLabelColorIndicator(0xFF888888)// 设置步骤label(文字描述)的字体颜色
.setCompletedPosition(0)// 设置已经到达了的节点位置，从0开始标识
.drawView();// 重新绘制控件，一般，节点状态发生变化时，调用此方法刷新控件

（3）StepsView

package com.example.stepviewdemo;
import java.util.List;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;
public class StepsView extends LinearLayout implements StepsViewIndicator.OnDrawListener {
    private StepsViewIndicator mStepsViewIndicator;
    private FrameLayout mLabelsLayout;
    private String[] mLabels;
    private int mProgressColorIndicator = Color.YELLOW;
    private int mLabelColorIndicator = Color.BLACK;
    private int mBarColorIndicator = Color.BLACK;
    private int mCompletedPosition = 0;
    public StepsView(Context context) {
        this(context, null);
    }
    public StepsView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    @SuppressLint("NewApi")
    public StepsView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
        View rootView = LayoutInflater.from(getContext()).inflate(R.layout.widget_steps_view, this);
        mStepsViewIndicator = (StepsViewIndicator) rootView.findViewById(R.id.steps_indicator_view);
        mStepsViewIndicator.setDrawListener(this);
        mLabelsLayout = (FrameLayout) rootView.findViewById(R.id.labels_container);
    }
    public String[] getLabels() {
        return mLabels;
    }
    public StepsView setLabels(String[] labels) {
        mLabels = labels;
        mStepsViewIndicator.setStepSize(labels.length);
        return this;
    }
    public int getProgressColorIndicator() {
        return mProgressColorIndicator;
    }
    public StepsView setProgressColorIndicator(int progressColorIndicator) {
        mProgressColorIndicator = progressColorIndicator;
        mStepsViewIndicator.setProgressColor(mProgressColorIndicator);
        return this;
    }
    public int getLabelColorIndicator() {
        return mLabelColorIndicator;
    }
    public StepsView setLabelColorIndicator(int labelColorIndicator) {
        mLabelColorIndicator = labelColorIndicator;
        return this;
    }
    public int getBarColorIndicator() {
        return mBarColorIndicator;
    }
    public StepsView setBarColorIndicator(int barColorIndicator) {
        mBarColorIndicator = barColorIndicator;
        mStepsViewIndicator.setBarColor(mBarColorIndicator);
        return this;
    }
    public int getCompletedPosition() {
        return mCompletedPosition;
    }
    public StepsView setCompletedPosition(int completedPosition) {
        mCompletedPosition = completedPosition;
      mStepsViewIndicator.setCompletedPosition(mCompletedPosition);
        return this;
    }
    public void drawView() {
        if (mLabels == null) {
            throw new IllegalArgumentException("labels must not be null.");
        }
        if (mCompletedPosition < 0 || mCompletedPosition > mLabels.length - 1) {
            throw new IndexOutOfBoundsException(String.format("Index : %s, Size : %s", mCompletedPosition, mLabels.length));
        }

        mStepsViewIndicator.invalidate();
    }
    @Override
    public void onReady() {
        drawLabels();
    }
    @SuppressLint("NewApi")
    private void drawLabels() {
        List<Float> indicatorPosition = mStepsViewIndicator.getThumbContainerXPosition();
        if (mLabels != null) {
            for (int i = 0; i < mLabels.length; i++) {
                TextView textView = new TextView(getContext());
                textView.setText(mLabels[i]);
                textView.setTextColor(mLabelColorIndicator);
                textView.setX(indicatorPosition.get(i));
                textView.setLayoutParams(
                        new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                                ViewGroup.LayoutParams.WRAP_CONTENT));
                if (i <= mCompletedPosition) {
                    textView.setTypeface(null, Typeface.BOLD);
                }
                mLabelsLayout.addView(textView);
            }
        }
    }
}

（4）StepsViewIndicator

package com.example.stepviewdemo;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class StepsViewIndicator extends View {
    private static final int THUMB_SIZE = 100;
    private Paint paint = new Paint();
    private Paint selectedPaint = new Paint();
    private int mNumOfStep = 2;
    private float mLineHeight;
    private float mThumbRadius;
    private float mCircleRadius;
    private float mPadding;
    private int mProgressColor = Color.YELLOW;
    private int mBarColor = Color.DKGRAY;
    private float mCenterY;
    private float mLeftX;
    private float mLeftY;
    private float mRightX;
    private float mRightY;
    private float mDelta;
    private List<Float> mThumbContainerXPosition = new ArrayList<Float>();
    private int mCompletedPosition;
    private OnDrawListener mDrawListener;
    public StepsViewIndicator(Context context) {
        this(context, null);
    }
    public StepsViewIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public StepsViewIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.StepsViewIndicator);
        mNumOfStep = a.getInt(R.styleable.StepsViewIndicator_numOfSteps, 0);
        a.recycle();
        init();
    }
    private void init() {
        mLineHeight = 0.1f * THUMB_SIZE;
        mThumbRadius = 0.3f * THUMB_SIZE;
        mCircleRadius = 0.4f * mThumbRadius;
        mPadding = 0.2f * THUMB_SIZE;
    }
    public void setStepSize(int size) {
        mNumOfStep = size;
        invalidate();
    }
    public void setDrawListener(OnDrawListener drawListener) {
        mDrawListener = drawListener;
    }
    public List<Float> getThumbContainerXPosition() {
        return mThumbContainerXPosition;
    }
    @Override
    public void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mCenterY = 0.5f * getHeight();
        mLeftX = mPadding;
        mLeftY = mCenterY - (mLineHeight / 2);
        mRightX = getWidth() - mPadding;
        mRightY = 0.5f * (getHeight() + mLineHeight);
        mDelta = (mRightX - mLeftX) / (mNumOfStep - 1);
        mThumbContainerXPosition.add(mLeftX);
        for (int i = 1; i < mNumOfStep - 1; i++) {
            mThumbContainerXPosition.add(mLeftX + (i * mDelta));
        }
        mThumbContainerXPosition.add(mRightX);
        mDrawListener.onReady();
    }
    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = 200;
        if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(widthMeasureSpec)) {
            width = MeasureSpec.getSize(widthMeasureSpec);
        }
        int height = THUMB_SIZE + 20;
        if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(heightMeasureSpec)) {
            height = Math.min(height, MeasureSpec.getSize(heightMeasureSpec));
        }
        setMeasuredDimension(width, height);
    }
    public void setCompletedPosition(int position) {
        mCompletedPosition = position;
    }
    public void reset() {
        setCompletedPosition(0);
    }

    public void setProgressColor(int progressColor) {
        mProgressColor = progressColor;
    }
    public void setBarColor(int barColor) {
        mBarColor = barColor;
    }
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mDrawListener.onReady();
        // Draw rect bounds
        paint.setAntiAlias(true);
        paint.setColor(mBarColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);

        selectedPaint.setAntiAlias(true);
        selectedPaint.setColor(mProgressColor);
        selectedPaint.setStyle(Paint.Style.STROKE);
        selectedPaint.setStrokeWidth(2);

        // Draw rest of the circle'Bounds
        for (int i = 0; i < mThumbContainerXPosition.size(); i++) {
            canvas.drawCircle(mThumbContainerXPosition.get(i), mCenterY, mCircleRadius,
                    (i <= mCompletedPosition) ? selectedPaint : paint);
        }
        paint.setStyle(Paint.Style.FILL);
        selectedPaint.setStyle(Paint.Style.FILL);
        for (int i = 0; i < mThumbContainerXPosition.size() - 1; i++) {
            final float pos = mThumbContainerXPosition.get(i);
            final float pos2 = mThumbContainerXPosition.get(i + 1);
            canvas.drawRect(pos, mLeftY, pos2, mRightY,
                    (i < mCompletedPosition) ? selectedPaint : paint);
        }

        // Draw rest of circle
        for (int i = 0; i < mThumbContainerXPosition.size(); i++) {
            final float pos = mThumbContainerXPosition.get(i);
            canvas.drawCircle(pos, mCenterY, mCircleRadius,
                    (i <= mCompletedPosition) ? selectedPaint : paint);

            if (i == mCompletedPosition) {
                selectedPaint.setColor(getColorWithAlpha(mProgressColor, 0.2f));
                canvas.drawCircle(pos, mCenterY, mCircleRadius * 1.8f, selectedPaint);
            }
        }
    }

    public static int getColorWithAlpha(int color, float ratio) {
        int newColor = 0;
        int alpha = Math.round(Color.alpha(color) * ratio);
        int r = Color.red(color);
        int g = Color.green(color);
        int b = Color.blue(color);
        newColor = Color.argb(alpha, r, g, b);
        return newColor;
    }

    public interface OnDrawListener {

        public void onReady();
    }
}

（5）样式style

<!-- 横向选择器样式 -->
     <declare-styleable name="StepsViewIndicator">
        <attr name="numOfSteps" format="integer" />
    </declare-styleable>

( 6 )点击下一步状态不断发生改变

public void changeStep(View view) {
        stepsView.setCompletedPosition(position).drawView();
        if (position < labels.length)
            position++;
        if (position == labels.length)
            position = 0;
    }

这里写链接内容

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值