Android stepview 简单使用。

最新推荐文章于 2024-08-09 08:31:44 发布

原创最新推荐文章于 2024-08-09 08:31:44 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #控件

Android笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种自定义的步骤条控件实现方案，该方案可以在一个步骤条上同时显示顶部和底部的文字说明，适用于需要清晰展示流程的应用场景。

最近项目涉及到分部显示效果，但是要同时显示上下两个文字，就在原有的stepview中重新定义了一下，效果图如下：

自定义的stepView控件

public class StepView extends FrameLayout {
    public static final String TAG="StepView";
    /**步骤指示器*/
    private StepBar mStepBar;
    /**用来存放显示步骤名称的布局*/
    private FrameLayout mTitleGroup;
    private FrameLayout mTitleGroupBottom;
    /**所有步骤的标题*/
    private List<String> mStepTitles;
    private List<String> mStepTitlesBottom;

    public StepView(Context context) {
        super(context);
        init(context,null,0);
    }

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

    public StepView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public StepView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context,attrs,defStyleAttr);
    }

    private void init(Context mContext,AttributeSet attrs,int defStyleAttr){
        LayoutInflater.from(mContext).inflate(R.layout.step_view,this,true);
        mStepBar=(StepBar)this.findViewById(R.id.step_bar);
        mTitleGroup=(FrameLayout)this.findViewById(R.id.step_title);
        mTitleGroupBottom=(FrameLayout)this.findViewById(R.id.step_title_bottom);
        TypedArray array = mContext.obtainStyledAttributes(attrs,R.styleable.StepView,defStyleAttr,0);

        mStepBar.setLineHeight(array.getDimensionPixelOffset(R.styleable.StepView_lineheight, StepBar.DEFAULT_LINE_HEIGHT));
        mStepBar.setSmallRadius(array.getDimensionPixelOffset(R.styleable.StepView_smallradius, StepBar.DEFAULT_SMALL_CIRCLE_RADIUS));
        mStepBar.setLargeRadius(array.getDimensionPixelOffset(R.styleable.StepView_largeradius, StepBar.DEFAULT_LARGE_CIRCLE_RADIUS));
        mStepBar.setUnDoneColor(array.getColor(R.styleable.StepView_undonecolor, StepBar.COLOR_BAR_UNDONE));
        mStepBar.setDoneColor(array.getColor(R.styleable.StepView_undonecolor, StepBar.COLOR_BAR_DONE));
        mStepBar.setTotalStep(array.getInteger(R.styleable.StepView_totalstep, 0));
        mStepBar.setCompleteStep(array.getInteger(R.styleable.StepView_completestep, 0));

        //在StepBar布局完成之后开始添加title
        mStepBar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener(){

            @Override
            public void onGlobalLayout() {
                initStepTitle();
                initStepTitleBottom();
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    mStepBar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    mStepBar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
            }
        });
        array.recycle();
    }

    private void initStepTitle(){
        if(mStepTitles==null){
            return;
        }
        mTitleGroup.removeAllViews();

        if(mStepTitles.size()!=mStepBar.getTotalStep()){
            throw new IllegalStateException("设置的Title的个数和步骤数不一致！");
        }
        int stepNum=mStepBar.getTotalStep();
        for(int i=1;i<=stepNum;i++){
            final float stepPos=mStepBar.getPositionByStep(i);
            final TextView title = new TextView(this.getContext());

            switch (mStepBar.getCompleteStep()) {
            case 1:
                if(i==1){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitles.get(i-1));
                }else{
                    title.setTextColor(Color.parseColor("#949494"));
                    title.setText(mStepTitles.get(i-1));
                }
                break;
            case 2:
                if(i==1){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitles.get(i-1));
                }else if(i==2){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitles.get(i-1));
                }else{
                    title.setTextColor(Color.parseColor("#949494"));
                    title.setText(mStepTitles.get(i-1));
                }
                break;
            case 3:
                title.setTextColor(Color.parseColor("#ff7f90"));
                title.setText(mStepTitles.get(i-1));
                break;
            }
            title.setSingleLine();
            title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    title.setTranslationX(stepPos - title.getMeasuredWidth() / 2);
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        title.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        title.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                }
            });
            FrameLayout.LayoutParams lp=new FrameLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            mTitleGroup.addView(title,lp);
        }
    }
    private void initStepTitleBottom(){
        if(mStepTitlesBottom==null){
            return;
        }
        mTitleGroupBottom.removeAllViews();

        if(mStepTitlesBottom.size()!=mStepBar.getTotalStep()){
            throw new IllegalStateException("设置的Title的个数和步骤数不一致！");
        }
        int stepNum=mStepBar.getTotalStep();
        for(int i=1;i<=stepNum;i++){
            final float stepPos=mStepBar.getPositionByStep(i);
            final TextView title=new TextView(this.getContext());

            switch (mStepBar.getCompleteStep()) {
            case 1:
                if(i==1){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitlesBottom.get(i-1));
                }else{
                    title.setTextColor(Color.parseColor("#949494"));
                    title.setText(mStepTitlesBottom.get(i-1));
                }
                break;
            case 2:
                if(i==1){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitlesBottom.get(i-1));
                }else if(i==2){
                    title.setTextColor(Color.parseColor("#ff7f90"));
                    title.setText(mStepTitlesBottom.get(i-1));
                }else{
                    title.setTextColor(Color.parseColor("#949494"));
                    title.setText(mStepTitlesBottom.get(i-1));
                }
                break;
            case 3:
                title.setTextColor(Color.parseColor("#ff7f90"));
                title.setText(mStepTitlesBottom.get(i-1));
                break;
            }
            title.setSingleLine();
            title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    title.setTranslationX(stepPos - title.getMeasuredWidth() / 2);
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        title.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        title.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                }
            });
            FrameLayout.LayoutParams lp=new FrameLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            mTitleGroupBottom.addView(title,lp);
        }
    }

    public void setStepTitles(List<String> stepTitles){
        this.mStepTitles=stepTitles;
    }

    public void setStepTitlesBottom(List<String> stepTitlesBottom){
        this.mStepTitlesBottom=stepTitlesBottom;
    }

    public void setLineHeight(float mLineHeight) {
        mStepBar.setLineHeight(mLineHeight);
    }

    public void setSmallRadius(float mSmallRadius) {
        mStepBar.setSmallRadius(mSmallRadius);
    }

    public void setLargeRadius(float mLargeRadius) {
        mStepBar.setLargeRadius(mLargeRadius);
    }

    public void setUnDoneColor(int mUnDoneColor) {
        mStepBar.setUnDoneColor(mUnDoneColor);
    }

    public void setDoneColor(int mDoneColor) {
        mStepBar.setDoneColor(mDoneColor);
    }


    /**
     * 设置总的步骤数
     * @param mTotalStep
     */
    public void setTotalStep(int mTotalStep){
       mStepBar.setTotalStep(mTotalStep);
    }

    /**
     * 获取步骤总数
     * @return
     */
    public int getTotalStep(){
        return mStepBar.getTotalStep();
    }

    /**
     * 进入下一个步骤
     */
    public void nextStep(){
        mStepBar.nextStep();
    }

    /**
     * 重置步骤
     */
    public void reset(){
        mStepBar.reset();
    }

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <FrameLayout
        android:id="@+id/step_title"
        android:layout_gravity="left"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        >
    </FrameLayout>
    <com.skyball.p2pzbt.view.StepBar
        android:id="@+id/step_bar"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        />
    <FrameLayout
        android:layout_marginTop="5dp"
        android:id="@+id/step_title_bottom"
        android:layout_gravity="left"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        >
    </FrameLayout>
</LinearLayout>

activity使用

    public void initData() {

        List<String> titles=new ArrayList<String>();
        List<String> titlesBottom=new ArrayList<String>();
        titles.add("今日投资");
        titles.add("开始计息");
        titles.add("预计回款");
        titlesBottom.add("16-11-11");
        titlesBottom.add("16-11-11");
        titlesBottom.add("16-11-11");
        step_view_regular_detail.setStepTitles(titles);
        step_view_regular_detail.setStepTitlesBottom(titlesBottom);
        step_view_regular_detail.setUnDoneColor(Color.parseColor("#ededeb"));
        step_view_regular_detail.setDoneColor(Color.parseColor("#ff7f90"));

    }