Android ListView 물류 획득 추적 기능 구현

ListView 컨트롤 은 네 가지 다른 보기 로 항목 을 표시 할 수 있 습 니 다.이 컨트롤 을 통 해 항목 을 열 레이 블 이 있 거나 없 는 열 로 구성 하고 아이콘 과 텍스트 를 표시 할 수 있 습 니 다.
최근 인터넷 에서 시간 축의 구조 효 과 를 보고 이 원리 에 따라 물류 추적 효 과 를 실현 하려 고 시도 했다.현 재 는 이미 실현 되 었 다.효 과 는 다음 과 같다.

이 효 과 는 완전히 ListView 로 이 루어 졌 다.어떻게 이 루어 졌 는 지 살 펴 보 자.
(1):레이아웃 ListView 및 항목 레이아웃 작성
우선 레이아웃 에 ListView 를 작성 해 야 합 니 다:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.bobo.trace.MainActivity" >
<ListView 
android:id="@+id/lv_trace"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/trace_divider"
android:dividerHeight="1dp"></ListView>
</RelativeLayout>

그리고 ListView 의 item 레이아웃 을 작성 합 니 다:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout 
android:id="@+id/rl_trace_item"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/v_up_line"
android:layout_width="2.5dp"
android:layout_height="10dp"
android:background="@color/mgrey"
android:layout_marginLeft="22dp"></View>
<ImageView 
android:id="@+id/iv_state"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/circle"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"/>
<TextView 
android:id="@+id/tv_trace_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/iv_state"
android:layout_marginLeft="20dp"
android:text="@string/test_trace_info"
android:textColor="@android:color/black"
android:textSize="13sp"/>
<LinearLayout 
android:id="@+id/ll_trace_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_toRightOf="@id/iv_state"
android:layout_marginLeft="20dp"
android:orientation="horizontal"
android:layout_below="@id/tv_trace_info">
<TextView 
android:id="@+id/tv_phone_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/phone_label"
android:textColor="@android:color/black"
android:textSize="13sp"/>
<TextView 
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/test_phone"
android:textColor="@android:color/black"
android:textSize="13sp"/>
</LinearLayout>
<TextView 
android:id="@+id/tv_trace_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_toRightOf="@id/iv_state"
android:layout_marginLeft="20dp"
android:text="@string/test_trace_info"
android:textColor="@android:color/black"
android:textSize="13sp"
android:layout_below="@id/ll_trace_phone"/>
<View
android:id="@+id/v_down_line"
android:layout_width="2.5dp"
android:layout_height="45dp"
android:background="@color/mgrey"
android:layout_below="@id/iv_state"
android:layout_marginLeft="22dp"></View>
</RelativeLayout>
</RelativeLayout>

다음은 아 이 템 효과 살 펴 보 겠 습 니 다.

위의 효과 도 에서 우 리 는 이 item 구조 에서 왼쪽 은'선-그림-선'의 구조 로 시간 축 을 표시 하고 오른쪽 은 해당 하 는 정 보 를 표시 하 며 물류 정보,연락 전화 와 시간 을 포함한다.우 리 는 시간 축 에서 첫 번 째 점 은 위의 그 선 이 필요 없다 는 것 을 알 고 있 습 니 다.마지막 점 은 아래 의 그 선 이 필요 하지 않 기 때문에 이 처 리 는 우리 가 Adapter 에서 해당 하 는 처 리 를 해 야 합 니 다.
(2):사용자 정의 어댑터
데 이 터 를 채 우 고 View 처 리 를 위해 서 는 사용자 정의 Adapter 가 필요 합 니 다.
물론 Adapter 를 만 들 기 전에 javabean 이 해당 하 는 정 보 를 저장 해 야 합 니 다.
Trace.java:

package com.bobo.beans;
public class Trace {
private boolean isHead;
private String info;
private String phone;
private String time;
public Trace(boolean isHead, String info, String phone, String time) {
super();
this.isHead = isHead;
this.info = info;
this.phone = phone;
this.time = time;
}
public boolean isHead() {
return isHead;
}
public void setHead(boolean isHead) {
this.isHead = isHead;
}
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
}

다음은 Adapter 류 를 즐겁게 작성 할 수 있 습 니 다.

package com.bobo.adapters;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.bobo.beans.Trace;
import com.bobo.trace.R;
public class TraceAdapter extends BaseAdapter {
private ArrayList<Trace> tradeLists = null;
private LayoutInflater inflater;
private Context context;
public TraceAdapter(ArrayList<Trace> tradeLists,Context context){
this.tradeLists = tradeLists;
this.context = context;
this.inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return tradeLists == null ? 0 : tradeLists.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return tradeLists.get(position);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Holder holder;
if(convertView == null){
convertView = inflater.inflate(R.layout.trace_item, null);
holder = new Holder();
holder.v_up_line = (View)convertView.findViewById(R.id.v_up_line);
holder.iv_state = (ImageView)convertView.findViewById(R.id.iv_state);
holder.tv_trace_info = (TextView)convertView.findViewById(R.id.tv_trace_info);
holder.ll_trace_phone = (LinearLayout)convertView.findViewById(R.id.ll_trace_phone);
holder.tv_phone = (TextView)convertView.findViewById(R.id.tv_phone);
holder.tv_trace_time = (TextView)convertView.findViewById(R.id.tv_trace_time);
holder.v_down_line = (View)convertView.findViewById(R.id.v_down_line);
convertView.setTag(holder);
}else{
holder = (Holder)convertView.getTag();
}
if(tradeLists.get(position).isHead()){
holder.v_up_line.setVisibility(View.GONE);
//holder.iv_state = (ImageView)convertView.findViewById(R.id.iv_state);
holder.tv_trace_info.setText(tradeLists.get(position).getInfo());
holder.tv_phone.setText(tradeLists.get(position).getPhone());
holder.tv_trace_time.setText(tradeLists.get(position).getTime());
holder.v_down_line.setVisibility(View.VISIBLE);
}else if(tradeLists.size() == (position+1)){
holder.tv_trace_info.setText(tradeLists.get(position).getInfo());
holder.ll_trace_phone.setVisibility(View.GONE);
holder.tv_trace_time.setText(tradeLists.get(position).getTime());
holder.v_down_line.setVisibility(View.GONE);
}else{
holder.tv_trace_info.setText(tradeLists.get(position).getInfo());
holder.ll_trace_phone.setVisibility(View.GONE);
holder.tv_trace_time.setText(tradeLists.get(position).getTime());
holder.v_down_line.setVisibility(View.VISIBLE);
}
return convertView;
}
class Holder{
View v_up_line;
ImageView iv_state;
TextView tv_trace_info;
LinearLayout ll_trace_phone;
TextView tv_phone;
TextView tv_trace_time;
View v_down_line;
}
}

이렇게 해서 우리 의 Adapter 는 이미 적합 하 게 완성 되 었 습 니 다.다음은 Activity 에서 실험 해 보 겠 습 니 다.
(3):Activity 실험:

package com.bobo.trace;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.widget.ListView;
import com.bobo.adapters.TraceAdapter;
import com.bobo.beans.Trace;
public class MainActivity extends Activity {
private ListView lv_trace;
private ArrayList<Trace> tradeLists = new ArrayList<Trace>();
private TraceAdapter ta;
private Context context;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = MainActivity.this;
initView();
}
private void initView(){
lv_trace = (ListView)findViewById(R.id.lv_trace);
initData();
ta = new TraceAdapter(tradeLists, context);
lv_trace.setAdapter(ta);
}
private void initData(){
tradeLists.add(new Trace(true, "        ", "15253157943", "2016-03-16 13:30:43"));
tradeLists.add(new Trace(false, "      ", "", "2016-03-16 18:30:43"));
tradeLists.add(new Trace(false, "           ", "", "2016-03-17 13:30:43"));
tradeLists.add(new Trace(false, "         ", "", "2016-03-18 13:30:43"));
tradeLists.add(new Trace(false, "            ", "", "2016-03-19 13:30:43"));
}
}

이렇게 실행 하면 ListView 의 selector 폭 이 전체 화면 을 차지 하 는 것 을 발견 할 수 있 습 니 다.그러면 ListView 의 selector 를 조정 하기 위해 inset 을 만들어 야 합 니 다.
trace_divider.xml:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
android:insetLeft="50dp"
android:drawable="@color/mgrey">
</inset>

이렇게 해서 우리 의 물류 추적 인터페이스 가 완성 되 었 다 고 해도 매우 간단 하 다.
ListView 물류 획득 추적 기능 실현 에 대해 서 는 여기까지 소개 해 드 리 겠 습 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다!