Android基础控件——ListView实现时间轴效果

ListView实现时间轴效果

实现思路：

该View是通过ListView实现的，通过实体两个字段内容content和时间time来展示每个ListItem

时间轴是使用上面一条线（20dp）和中间一个圆（15dp）和下面一条线（40dp）组装成的

在ListView中，设置其分割线为空，并且没有点击效果

效果图：

步骤一：使用xml画出一个灰色的圆点（time_cycle.xml）

步骤二：javabean的编写

public class KuaiDi {

    private String content;
    private String time;

    public KuaiDi(String time, String content) {
        this.content = content;
        this.time = time;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}

步骤三：编写子布局（time_item.xml）

其效果如图：

步骤四：编写父布局（activity_main.xml）

步骤五：编写子布局的适配器（KuaiDiAdapter.java）

public class KuaiDiAdapter extends BaseAdapter {

    //印章数据
    private List list;
    private LayoutInflater mInflater;

    public KuaiDiAdapter(Context context, List list) {
        this.list = list;
        mInflater = LayoutInflater.from(context);
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.time_item, null);
        }
        ViewHolder holder = getViewHolder(convertView);
        KuaiDi kd = list.get(position);
        holder.tv_content.setText(kd.getContent());
        holder.tv_time.setText(kd.getTime());
        return convertView;
    }

    /**
     * 获得控件管理对象
     *
     * @param view
     * @return
     */
    private ViewHolder getViewHolder(View view) {
        ViewHolder holder = (ViewHolder) view.getTag();
        if (holder == null) {
            holder = new ViewHolder(view);
            view.setTag(holder);
        }
        return holder;
    }

    /**
     * 控件管理类
     */
    private class ViewHolder {
        private TextView tv_content, tv_time;

        ViewHolder(View view) {
            tv_content = (TextView) view.findViewById(R.id.tv_content);
            tv_time = (TextView) view.findViewById(R.id.tv_time);
        }
    }
}

步骤六：在父布局中设置适配器

public class MainActivity extends AppCompatActivity {

    private ListView lv;
    private KuaiDiAdapter adapter;
    private List list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lv = (ListView) findViewById(R.id.lv);
        list =new ArrayList<>();
        list.add(new KuaiDi("2016-09-18 08:33:50","您的订单开始处理"));
        list.add(new KuaiDi("2016-09-18 08:40:23","您的订单待配货"));
        list.add(new KuaiDi("2016-09-18 08:51:33","您的包裹已出库"));
        list.add(new KuaiDi("2016-09-18 21:12:53","【深圳市龙华函件中心】已收寄"));
        list.add(new KuaiDi("2016-09-18 17:44:20","到达【深圳】"));
        list.add(new KuaiDi("2016-09-18 21:26:51","离开【深圳市龙华函件中心】，下一站【深圳市】"));
        list.add(new KuaiDi("2016-09-18 23:18:21","到达【深圳市处理中心】"));
        list.add(new KuaiDi("2016-09-19 01:14:30","离开【深圳市处理中心】，下一站【广州市】"));
        list.add(new KuaiDi("2016-09-19 04:42:11","到达【广东省广州邮件处理中心】"));
        adapter = new KuaiDiAdapter(this,list);
        lv.setAdapter(adapter);
    }
}

源码下载：建议使用Import Module导入