Android StepView 물류 진도 효과 구현

본 논문 의 사례 는 안 드 로 이 드 StepView 물류 진도 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

전에 다른 사람 이 쓴 물류 진도 의 demo 를 봤 는데 사용자 정의 View 가 잘 사용 되 었 지만 너무 번 거 로 워 서 자신 이 간단 하고 생각 이 간단 하 며 위 에 효과 그림 을 썼 습 니 다.
사고의 방향
사고방식:주로 동적 추 가 를 진 행 했 습 니 다.위의 효과 에 따라 하위 레이아웃 을 만 들 었 습 니 다.다음 그림 에서 보 듯 이(코드 안의 레이아웃 은 ImageView 하나 View 하나 TextView 하나),그리고 MyVerticalView 계승 LinearLayout(orientation 설정 에 주의)를 사용자 정의 하고 MyVerticalView 에서 데이터 에 따라 addview()를 하면 됩 니 다.
코드
 
Model
mode 의 구체 적 인 변 수 는 위의 item 의 레이아웃 에 따라 현재 상태 와 구체 적 인 과정 설명 을 알 아야 합 니 다.상 태 는 다음 세 가지 상황 으로 나 뉜 다.
STATE_PROCESSING:진행 중 입 니 다(아이콘 은 아래 와 같 습 니 다)
 
STATE_COMPLETED:이미 완성 되 었 습 니 다(아이콘 은 아래 와 같 습 니 다)
 
STATE_DEFAULT:마지막 기본 단계(아이콘 은 다음 과 같 음)

위의 분석 에 따 르 면 두 개의 변수 가 필요 합 니 다.currentState 는 상태 에 따라 아이콘 을 설정 하기 위해 서 입 니 다.

private String description;//      
 private String currentState;//    （          ）

온전 하 다

public class StepModel {
 public static final String STATE_PROCESSING="PROCESSING";//       
 public static final String STATE_COMPLETED="COMPLETED";//       
 public static final String STATE_DEFAULT="DEFAULT";//       
 private String description;//      
 private String currentState;//    （          ）
 public StepModel(String description, String currentState) {
  this.description = description;
  this.currentState = currentState;
 }
 public String getCurrentState() {
  return currentState;
 }
 public void setCurrentState(String currentState) {
  this.currentState = currentState;
 }

 public String getDescription() {
  return description;
 }
 public void setDescription(String description) {
  this.description = description;
 }
}

StepView

public class MyVerticalStepView extends LinearLayout {
 private List<StepModel> mDatas = new ArrayList<>();//       set get  
 private Context mContext;

 public MyVerticalStepView(Context context) {
  this(context, null);
 }

 public MyVerticalStepView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public MyVerticalStepView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  mContext = context;

 }

 private void init() {
  setOrientation(VERTICAL);
  mDatas = getmDatas();//    
  for (int i = 0; i < mDatas.size(); i++) {
   //    ，          ViewGroup，  margin padding          
   View itemview = LayoutInflater.from(mContext).inflate(R.layout.stepview_item, this, false);
   TextView description = (TextView) itemview.findViewById(R.id.description_tv);
   View line = itemview.findViewById(R.id.line_v);
   ImageView icon = (ImageView) itemview.findViewById(R.id.stepicon_iv);
   description.setText(mDatas.get(i).getDescription());
   //            
   switch (mDatas.get(i).getCurrentState()) {
    case StepModel.STATE_COMPLETED:
     icon.setImageResource(R.drawable.complted);
     break;
    case StepModel.STATE_DEFAULT:
    //        
     line.setVisibility(GONE);
     icon.setImageResource(R.drawable.default_icon);
     break;
    case StepModel.STATE_PROCESSING:

     icon.setImageResource(R.drawable.attention);
     break;
   }

   this.addView(itemview);

  }
  requestLayout();//      
  invalidate();//      
 }

 public List<StepModel> getmDatas() {
  return mDatas;
 }

 public void setmDatas(List<StepModel> mDatas) {
  this.mDatas = mDatas;
  init();
 }
}

Activity 호출

public class StepViewDemoActivity extends AppCompatActivity {
 private MyVerticalStepView mStepView;

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.stepviewlayout);
  mStepView= (MyVerticalStepView) findViewById(R.id.stepview);
   init();
 }
 private void init() {
  List<StepModel> datas=new ArrayList<>();
  StepModel step1=new StepModel("      ，      ",StepModel.STATE_COMPLETED);
  StepModel step2=new StepModel("        ，  12 16   ",StepModel.STATE_COMPLETED);
  StepModel step3=new StepModel("      ",StepModel.STATE_COMPLETED);
  StepModel step4=new StepModel("      ",StepModel.STATE_PROCESSING);
  StepModel step5=new StepModel("        （   85833577），    ，              ！",StepModel.STATE_DEFAULT);
  datas.add(step1);
  datas.add(step2);
  datas.add(step3);
  datas.add(step4);
  datas.add(step5);
  mStepView.setmDatas(datas);

 }
}

배치
itemview 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal" android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingTop="5dp"
 android:background="@color/stepviewbg"
 >
<LinearLayout
 android:id="@+id/left"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:paddingRight="10dp"
 android:paddingLeft="10dp"

 >
 <ImageView
  android:id="@+id/stepicon_iv"
  android:layout_width="15dp"
  android:layout_height="15dp"
  android:src="@drawable/attention"
  />
 <View
  android:id="@+id/line_v"
  android:layout_width="2dp"
  android:layout_height="30dp"
  android:background="@color/uncompleted_text_color"
  android:layout_gravity="center_horizontal"
  android:visibility="visible"
  ></View>

</LinearLayout>
 <LinearLayout
  android:layout_toRightOf="@+id/left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:paddingRight="10dp"
  android:paddingLeft="10dp"
  >
  <TextView
   android:id="@+id/description_tv"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textSize="18sp"
   android:textColor="@color/uncompleted_text_color"
   android:text="       "/>

 </LinearLayout>
</RelativeLayout>

stepview 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent">
 <com.demo.demo.networkdemo.stepview.MyVerticalStepView
  android:id="@+id/stepview"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </com.demo.demo.networkdemo.stepview.MyVerticalStepView>
</LinearLayout>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.