android自定义状态进度栏

有时候产品提出来这样的状态进度的设计，当没有思路的时候，感觉好麻烦。

因为最近项目中用到，所以在这里做一下记录，以后可以直接用。

思路很简单，先一个父容器垂直布局，第一个子布局是一个圆圈圈和水平左右各一条线，第二个子布局是一个textView显示文案，如图所示，下面的文案我没截全，知道有文案就好，凑合看一下。

第一个的时候把左边的线隐藏掉，最后一个的话把右边的线隐藏掉，然后提供一个方法把状态的内容list<String>传入和当前的状态String传入。然后就会根据当前第几个内容来展示选中（蓝色部分），灰色实心部分和空心部分。

核心代码：

public void setupView(List strings,String currentStr) {

if(TextUtils.isEmpty(currentStr) || strings ==null || strings.isEmpty()

|| strings.indexOf(currentStr) <0) {

setVisibility(View.GONE);

return;

}

setVisibility(View.VISIBLE);

setOrientation(HORIZONTAL);

for(int i = 0; i < strings.size(); i++) {

//每个item状态总父布局

LinearLayout itemAllLinearLayout =new LinearLayout(mContext);

LayoutParams layoutParams =new LayoutParams(0,LayoutParams.WRAP_CONTENT,1.0f);

itemAllLinearLayout.setLayoutParams(layoutParams);

itemAllLinearLayout.setOrientation(LinearLayout.VERTICAL);

addView(itemAllLinearLayout);

//图标和线条父布局

LinearLayout imageAndLineLinearLayout = new LinearLayout(mContext);

LayoutParams layoutParams1

= new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);

imageAndLineLinearLayout.setLayoutParams(layoutParams1);

imageAndLineLinearLayout.setGravity(Gravity.CENTER);

imageAndLineLinearLayout.setOrientation(LinearLayout.HORIZONTAL);

//左边线条

LayoutParams layoutParams2 =new LayoutParams(0,DensityUtil.dip2px(mContext,1),1.0f);

View leftView = newView(mContext);

leftView.setLayoutParams(layoutParams2);

//中间状态图标

LayoutParams layoutParams3 =new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

ImageView stateImageView =new ImageView(mContext);

stateImageView.setLayoutParams(layoutParams3);

//右边线条

LayoutParams layoutParams4 =new LayoutParams(0,DensityUtil.dip2px(mContext,1),1.0f);

View rightView =new View(mContext);

rightView.setLayoutParams(layoutParams4);

//状态显示值

LayoutParams layoutParams5 =new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

TextView nameTextView =new TextView(mContext);

nameTextView.setGravity(Gravity.CENTER);

nameTextView.setLayoutParams(layoutParams5);

nameTextView.setTextSize(TEXT_SIZE);

nameTextView.setTextColor(mContext.getResources().getColor(R.color.ac7));

imageAndLineLinearLayout.addView(leftView);

imageAndLineLinearLayout.addView(stateImageView);

imageAndLineLinearLayout.addView(rightView);

itemAllLinearLayout.addView(imageAndLineLinearLayout);

itemAllLinearLayout.addView(nameTextView);

nameTextView.setText(strings.get(i));

if(i ==0) {

leftView.setBackgroundColor(mContext.getResources().getColor(R.color.transparent));

rightView.setBackgroundColor(mContext.getResources().getColor(R.color.ac2));

}else if(i == strings.size() -1) {

rightView.setBackgroundColor(mContext.getResources().getColor(R.color.transparent));

leftView.setBackgroundColor(mContext.getResources().getColor(R.color.ac2));

}else{

rightView.setBackgroundColor(mContext.getResources().getColor(R.color.ac2));

leftView.setBackgroundColor(mContext.getResources().getColor(R.color.ac2));

}

if(i < ongoingIndex) {

stateImageView.setImageResource(R.drawable.icon_step_finish);

}else if(i == ongoingIndex) {

nameTextView.setTextColor(mContext.getResources().getColor(R.color.ac1));

stateImageView.setImageResource(R.drawable.icon_step_current);

} else {

stateImageView.setImageResource(R.drawable.icon_step_future);

}

}

使用方法：

StateTrackView mViewState;

mViewState = (StateTrackView) findViewById(R.id.state);

List<String> listStr = new ArrayList<String>();

listStr.add("step1");

listStr.add("step2");

listStr.add("step3");

listStr.add("step4");

mViewState.setupView(listStr, "step2"); //这样就是初始化到第二步的状态

顺便把DensityUtil.java 的代码发出来：

/**

* 根据手机的分辨率从 dp 的单位 转成为 px(像素)

*/

public static intdip2px(Context context, floatdpValue) {

final floatscale = context.getResources().getDisplayMetrics().density;

return(int) (dpValue * scale +0.5f);

}

/**

* 根据手机的分辨率从 px(像素) 的单位 转成为 dp

*/

public static intpx2dip(Context context, floatpxValue) {

final floatscale = context.getResources().getDisplayMetrics().density;

return(int) (pxValue / scale +0.5f);

}