有时候产品提出来这样的状态进度的设计，当没有思路的时候，感觉好麻烦。
因为最近项目中用到，所以在这里做一下记录，以后可以直接用。
思路很简单，先一个父容器垂直布局，第一个子布局是一个圆圈圈和水平左右各一条线，第二个子布局是一个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);
}
网友评论