仿快递查询结果界面，其实就一个简单的ListView

前言

朋友发来一个需求界面，一看跟快递查询结果界面基本差不多，看了下其实就一个ListView就能简单的实现。特此记录一下，给新手一些思路。Demo在已经上传githup
githup地址：KuaiDiListDemo

效果图

简单分析

乍一看唯一的难点儿在于左边的竖线和圆形图的实现。但是看下分析图你就会恍然大悟

明显就是一个ListView，只是里面的每个条目做出不同的处理便可，其中左侧原型图标上面的竖线是固定的高度，而下面的竖线是根据右侧模块的高度而定的。这点儿只需要简单的xml处理即可。

主要代码

MainActivity

非常简单的一个ListView的基本玩法

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ArrayList list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.list_view);
        list = DaoUtils.getList();//模拟获取网络数据
        listView.setAdapter(new MyAdapter());// 设置Adapter
    }

    public class MyAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                convertView = View.inflate(MainActivity.this, R.layout.item, null);
                holder = new ViewHolder(convertView);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            ConsultationBean bean = list.get(position);
            holder.tvPeople.setText(bean.getPeople());
            holder.tvTime.setText(bean.getTime());
            holder.tvTime.setVisibility(TextUtils.isEmpty(bean.getTime()) ? View.GONE : View.VISIBLE);
            holder.tvMessage.setText(bean.getMessage());
            holder.tvMessage.setVisibility(TextUtils.isEmpty(bean.getMessage()) ? View.GONE : View.VISIBLE);
            holder.tvPeople.setSelected(position == list.size() - 1);
            holder.ivCircle.setSelected(position == list.size() - 1);
            holder.viewDown.setSelected(position == list.size() -1);
            return convertView;
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        class ViewHolder {
            @Bind(R.id.view_up)
            View viewUp;
            @Bind(R.id.iv_circle)
            ImageView ivCircle;
            @Bind(R.id.view_down)
            View viewDown;
            @Bind(R.id.tv_people)
            TextView tvPeople;
            @Bind(R.id.tv_time)
            TextView tvTime;
            @Bind(R.id.tv_message)
            TextView tvMessage;

            ViewHolder(View view) {
                ButterKnife.bind(this, view);
            }
        }
    }
}

条目的布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <View
            android:id="@+id/view_up"
            android:layout_width="0.5dp"
            android:layout_height="15dp"
            android:background="@drawable/selector_line" />
        <ImageView
            android:id="@+id/iv_circle"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/selector_circle"/>
        <View
            android:id="@+id/view_down"
            android:layout_width="0.5dp"
            android:layout_height="wrap_content"
            android:background="@drawable/selector_line" />
    LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <TextView
            android:id="@+id/tv_people"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="华佗申请了会诊"
            android:layout_marginTop="10dp"
            android:textSize="16sp"
            android:layout_marginBottom="8dp"
            android:textColor="@drawable/selector_text"
            />
        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2016-06-12 12:00"
            android:textColor="#95BFEF"
            android:textSize="13sp"/>
        <TextView
            android:id="@+id/tv_message"
            android:layout_marginTop="15dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="扁鹊留言：我阳痿了"
            android:layout_marginBottom="15dp"/>
        <View
            android:layout_marginTop="2dp"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#66999999"/>
    LinearLayout>
LinearLayout>

总结

好吧，这篇算是“水”篇吧，不过也给一些暂时想不到怎么做的朋友一个简单的思路吧。。。