Android 사용자 정의 지시기 시간 축 효과 인 스 턴 스 코드 상세 설명

지시기 시간축 은 배 달·쇼핑 용 앱 에서 자주 사용 되 는데 효 과 는 대개 아래 와 같이 인터넷 에 올 라 온 많은 글 을 보고 대부분 스스로 그 려 서 너무 번 거 롭 지만 사실은 ListView 를 통 해 이 루어 진다.

Activity 와 연 결 된 레이아웃 파일 activitymain.xml 에 ListView 를 설치 합 니 다.코드 는 다음 과 같 습 니 다.이 목록 은 정 보 를 보 여 주 는 데 만 사용 되 기 때문에 사용자 가 클릭 할 필요 가 없 기 때문에 clickable 속성 을 false 로 설정 합 니 다.ListView 클릭 으로 발생 하 는 파문 효 과 를 없 애기 위해 listSelector 속성의 값 을 투명 하 게 설정 합 니 다.목록 항목 간 의 분할 선 이 필요 하지 않 기 때문에 divider 속성의 값 을 null 로 설정 합 니 다.
activity_main

<ListView
  android:id="@+id/lvTrace"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:clickable="false"
  android:divider="@null"
  android:dividerHeight="0dp"  android:listSelector="@android:color/transparent" />

각 목록 항목 의 레이아웃 stepviewadapter.xml,코드 는 다음 과 같 습 니 다.시간 축의 점 과 선 은 모두 item 레이아웃 에 있 기 때문에 선 을 연속 시 키 기 위해 위 에 있 는 ListView 의 divider Height 속성 값 을 0dp 로 설정 합 니 다.즉,수직 방향 으로 모든 목록 항목 이 바짝 붙 어 있 습 니 다.item 의 레이아웃 에서 우 리 는 먼저 LinearLayout 를 사용 하여 레이아웃 을 좌우 두 부분 으로 나 누고 왼쪽 은 시간 축의 레이아웃 이 며 오른쪽 은 내용 의 레이아웃 입 니 다.
내용 의 레이아웃,물류 정 보 는 RelativeLayout 입 니 다.두 목록 항목 의 텍스트 가 너무 가 까 워 지지 않도록 RelativeLayout 에 padding Bottom 과 padding Top 속성 을 설정 합 니 다.
시간 축의 레이아웃,시간 축의 레이아웃 도 RelativeLayout 입 니 다.시간 축의 원점 과 시간 을 표시 하 는 텍스트 를 정렬 하기 위해 우 리 는 원점 위 에 세로 선 을 하나 더 놓 아야 합 니 다.그래서 전체적인 구 조 는 선-점-선 입 니 다.선 이 원점 의 중심 을 딱 맞 출 수 있 도록 선과 점 을 모두 수평 으로 가운데 로 합 니 다.즉,android:layotcenterHorizontal="true"
stepview_adapter

<?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:gravity="center"
  android:orientation="horizontal">
  <RelativeLayout
    android:id="@+id/rlTimeline"
    android:layout_width="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_height="match_parent">
    <TextView
      android:id="@+id/tvTopLine"
      android:layout_width="1.2dp"
      android:layout_height="12dp"
      android:layout_centerHorizontal="true"
      android:background="#999" />
    <TextView
      android:id="@+id/tvDot"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/tvTopLine"
      android:layout_centerHorizontal="true"
      android:background="@drawable/state_get_huankuan" />
    <TextView
      android:layout_width="1.2dp"
      android:id="@+id/tvLine"
      android:layout_height="match_parent"
      android:layout_below="@id/tvDot"
      android:layout_centerHorizontal="true"
      android:background="#999" />
  </RelativeLayout>
  <RelativeLayout
    android:id="@+id/rlCenter"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="6dp"
    android:paddingRight="10dp"
    android:layout_marginLeft="20dp"
    android:paddingTop="12dp">
    <TextView
      android:id="@+id/step_tv_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_marginRight="6dp"
      android:text="10-20 22:22"
      android:textColor="#cccccc"
      android:textSize="12sp" />
    <TextView
      android:id="@+id/step_tv_des"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_marginRight="15dp"
      android:textStyle="bold"
      android:layout_toLeftOf="@+id/step_tv_time"
      android:text="fffffff" />
    <TextView
      android:id="@+id/step_tv_des_below"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_below="@+id/step_tv_des"
      android:layout_marginTop="5dp"
      android:text=""
      android:textColor="#999999" />
  </RelativeLayout>
</LinearLayout><br><br><br>

Adapter 를 정의 합 니 다.코드 는 다음 과 같 습 니 다.첫 번 째 줄 의 물류 정보의 표시 형식 은 다른 것 과 다 르 기 때문에 첫 번 째 줄 의 item 시간 축 구조 에서 맨 위의 선 이 표시 되 지 않도록 주의해 야 합 니 다.

public class StepViewAdapter extends BaseAdapter {
  private Context context;
  private List<StepViewBean> traceList = new ArrayList<>();
  private static final int TYPE_FINISH = 101;
  private static final int TYPE_UNFINISH = 102;
  private static final int TYPE_ERROR = 103;
  public StepViewAdapter(Context context, List<StepViewBean> traceList) {
    this.context = context;
    this.traceList = traceList;
  }
  @Override
  public int getCount() {
    return traceList.size();
  }
  @Override
  public StepViewBean getItem(int position) {
    return traceList.get(position);
  }
  @Override
  public long getItemId(int position) {
    return position;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
    final StepViewBean trace = getItem(position);
    if (convertView != null) {
      holder = (ViewHolder) convertView.getTag();
    } else {
      holder = new ViewHolder();
      convertView = LayoutInflater.from(context).inflate(R.layout.stepview_adapter, parent, false);
      holder.tvTopLine = (TextView) convertView.findViewById(R.id.tvTopLine);
      holder.tvDot = (TextView) convertView.findViewById(R.id.tvDot);
      holder.tvLine = (TextView) convertView.findViewById(R.id.tvLine);
      holder.tvAcceptStation = (TextView) convertView.findViewById(R.id.step_tv_des);
      holder.tvAcceptTime = (TextView) convertView.findViewById(R.id.step_tv_time);
      holder.tvAcceptStationBelow = (TextView) convertView.findViewById(R.id.step_tv_des_below);
      holder.rlTimeline = (RelativeLayout) convertView.findViewById(rlTimeline);
      convertView.setTag(holder);
    }
    if (position == 0) {
      holder.tvTopLine.setVisibility(View.INVISIBLE);
    }
    if (position == traceList.size() - 1) {
      holder.tvLine.setVisibility(View.GONE);
    } else {
      holder.tvLine.setVisibility(View.VISIBLE);
    }
    switch (getItemViewType(position)) {
      case TYPE_FINISH:
        holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_completed));
        holder.tvDot.setBackgroundResource(R.drawable.state_get_huankuan);
        holder.tvLine.setBackgroundColor(context.getResources().getColor(R.color.crt_completed));
        holder.tvTopLine.setBackgroundColor(context.getResources().getColor(R.color.crt_completed));
        break;
      case TYPE_UNFINISH:
        holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_uncompleted_text));
        holder.tvDot.setBackgroundResource(R.drawable.state_normal_huankuan);
        holder.tvLine.setBackgroundColor(context.getResources().getColor(R.color.crt_text_hint_color));
        break;
      case TYPE_ERROR:
        holder.tvTopLine.setVisibility(View.VISIBLE);
        holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_error_text));
        holder.tvDot.setBackgroundResource(R.drawable.state_lose_huankuan);
        break;
    }
    holder.tvAcceptTime.setText(trace.getAcceptTime());
    holder.tvAcceptStation.setText(trace.getAcceptStation());
    if (!TextUtils.isEmpty(trace.getAcceptStation())) {
      holder.tvAcceptStationBelow.setText(trace.getAcceptStationBelow());
    }
    return convertView;
  }
  @Override
  public int getItemViewType(int id) {
     if(id==(traceList.size()-2)){
       return TYPE_ERROR;
     }
     if(id==(traceList.size()-1)){
       return TYPE_UNFINISH;
     }
     return TYPE_FINISH;
  }
  static class ViewHolder {
    public TextView tvAcceptTime, tvAcceptStation, tvLine, tvAcceptStationBelow;
    public TextView tvTopLine, tvDot;
    public RelativeLayout rlTimeline;
  }
}

레이아웃 효 과 를 볼 수 있 도록 Activity 에서 가짜 데 이 터 를 모 의 합 니 다.실체 클래스 Trace 를 정의 해 야 합 니 다.두 가지 속성 이 있 습 니 다.acceptTime 과 acceptStation,코드 는 다음 과 같 습 니 다.
StepViewBean

public class StepViewBean {
  /**    */
  private String acceptTime;
  /**    */
  private String acceptStation;
  /**     */
  private String acceptStationBelow;
  public String getAcceptStationBelow() {
    return acceptStationBelow;
  }
  public void setAcceptStationBelow(String acceptStationBelow) {
    this.acceptStationBelow = acceptStationBelow;
  }
  public StepViewBean() {
  }
  public StepViewBean(String acceptTime, String acceptStation) {
    this.acceptTime = acceptTime;
    this.acceptStation = acceptStation;
  }
  public StepViewBean(String acceptTime, String acceptStation, String acceptStationBelow) {
    this.acceptTime = acceptTime;
    this.acceptStation = acceptStation;
    this.acceptStationBelow = acceptStationBelow;
  }
  public String getAcceptTime() {
    return acceptTime;
  }
  public void setAcceptTime(String acceptTime) {
    this.acceptTime = acceptTime;
  }
  public String getAcceptStation() {
    return acceptStation;
  }
  public void setAcceptStation(String acceptStation) {
    this.acceptStation = acceptStation;
  }
}　

MainActivity　

public class MainActivity extends AppCompatActivity {
  private List<StepViewBean> traceList = new ArrayList<>();
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ListView lvTrace= (ListView) findViewById(R.id.lvTrace);
    traceList.add(new StepViewBean("10-20 22: 22", "         ", "    （9979）   
      100000"));
    traceList.add(new StepViewBean("10-20 22:22", "      ，      "));
    traceList.add(new StepViewBean("10-20 22:24", "         "));
    traceList.add(new StepViewBean("10-20 22:24", "       "));
    traceList.add(new StepViewBean("10-20 22:24", "         "));
    traceList.add(new StepViewBean("10-20 22:24", "        ，       ！"));
    StepViewAdapter adapter = new StepViewAdapter(this, traceList);
    lvTrace.setAdapter(adapter);
  }
}

GitHub 주소:https://github.com/peiniwan/StepView
총결산
위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 사용자 정의 인디케이터 시간 축 효과 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!