注册引导页面

今天在github看到一个不错的效果

github地址https://github.com/anton46/Android-StepsView

关键点：

1. 如何使用
2. 简单了解源码，看能否进行修改.

使用很简单

引入项目

    compile 'com.anton46:stepsview:0.0.2'

布局：

 <com.anton46.stepsview.StepsView        xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/stepsView"        android:layout_width="match_parent"        android:layout_height="wrap_content"        />

代码中：

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mStepsView= (StepsView) findViewById(R.id.stepsView);        String[] steps=new String[]{"注册","注册一","注册二","注册四"};        mStepsView.setLabels(steps)                .setBarColorIndicator(getResources().getColor(R.color.material_blue_grey_900))                .setProgressColorIndicator(getResources().getColor(R.color.abc_search_url_text_normal))                .setLabelColorIndicator(getResources().getColor(R.color.accent_material_dark))                .setCompletedPosition(1)                .drawView();    }

这样就实现上面的效果。接下来一起看下源码的实现，源码其实也不复杂，一共就3个类，一个layout文件。

StepsViewIndicator类，继承View

public StepsViewIndicator(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        this.paint = new Paint();        this.selectedPaint = new Paint();        this.mNumOfStep = 2;        this.mProgressColor = -256;        this.mBarColor = -16777216;        this.mThumbContainerXPosition = new ArrayList();        //加载自定义属性        TypedArray a = context.obtainStyledAttributes(attrs, styleable.StepsViewIndicator);        //绑定自定义属性，一共有几个步骤        this.mNumOfStep = a.getInt(styleable.StepsViewIndicator_numOfSteps, 0);        a.recycle();        this.init();    }

初始化方法，其实我们可以适当修改这个地方

 private void init() {        this.mLineHeight = 20.0F;        this.mThumbRadius = 40.0F;        this.mCircleRadius = 0.7F * this.mThumbRadius;        this.mPadding = 50.0F;    }

关键就是onDraw方法

protected synchronized void onDraw(Canvas canvas) {        super.onDraw(canvas);        this.mDrawListener.onReady();        this.paint.setAntiAlias(true);        this.paint.setColor(this.mBarColor);        this.paint.setStyle(Style.STROKE);        this.paint.setStrokeWidth(2.0F);        this.selectedPaint.setAntiAlias(true);        this.selectedPaint.setColor(this.mProgressColor);        this.selectedPaint.setStyle(Style.STROKE);        this.selectedPaint.setStrokeWidth(2.0F);        int i;        for(i = 0; i < this.mThumbContainerXPosition.size(); ++i) {            canvas.drawCircle(((Float)this.mThumbContainerXPosition.get(i)).floatValue(), this.mCenterY, this.mCircleRadius, i <= this.mCompletedPosition?this.selectedPaint:this.paint);        }        this.paint.setStyle(Style.FILL);        this.selectedPaint.setStyle(Style.FILL);        float pos;        for(i = 0; i < this.mThumbContainerXPosition.size() - 1; ++i) {            pos = ((Float)this.mThumbContainerXPosition.get(i)).floatValue();            float pos2 = ((Float)this.mThumbContainerXPosition.get(i + 1)).floatValue();            canvas.drawRect(pos, this.mLeftY, pos2, this.mRightY, i < this.mCompletedPosition?this.selectedPaint:this.paint);        }        for(i = 0; i < this.mThumbContainerXPosition.size(); ++i) {            pos = ((Float)this.mThumbContainerXPosition.get(i)).floatValue();            canvas.drawCircle(pos, this.mCenterY, this.mCircleRadius, i <= this.mCompletedPosition?this.selectedPaint:this.paint);            if(i == this.mCompletedPosition) {                this.selectedPaint.setColor(getColorWithAlpha(this.mProgressColor, 0.2F));                canvas.drawCircle(pos, this.mCenterY, this.mCircleRadius * 1.8F, this.selectedPaint);            }        }    }

还有一个类就是我们用到的StepsView,这个类更简单，主要就是对上面StepsViewIndicator的一些控制

public void drawView() {        if(this.mLabels == null) {            throw new IllegalArgumentException("labels must not be null.");        } else if(this.mCompletedPosition >= 0 && this.mCompletedPosition <= this.mLabels.length - 1) {        //这里会进行重绘上面那个自定义view            this.mStepsViewIndicator.invalidate();        } else {            throw new IndexOutOfBoundsException(String.format("Index : %s, Size : %s", new Object[]{Integer.valueOf(this.mCompletedPosition), Integer.valueOf(this.mLabels.length)}));        }    }

有兴趣可以自己仔细研究下源码。这个效果感觉在项目中还是蛮实用的。

欢迎吐槽，一起进步。