Android自定义时间轴的实现

来源：互联网发布：阿萨辛捏脸数据编辑：程序博客网时间：2024/05/27 21:49

时间轴

时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。京东和淘宝的物流顺序就是一个时间轴（如图），想必大家都不陌生。

时间轴的初探

初次见到这种UI，感觉整个布局似曾相识，但面对那条时间轴却又不知如何下手。其实，整个时间轴还是可以当做一个ListView处理，只是在Adapter中的布局要花点心思。好了，废话不说，看代码。

整个效果就是一个ListView,ListView的每个条目的布局如下

[html] view plain copy
<?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"  
    android:background="#ffffff"  
    android:orientation="vertical">  
  
    <ImageView  
        android:id="@+id/image"  
        android:layout_width="15dp"  
        android:layout_height="15dp"  
        android:layout_marginLeft="85dp"  
        android:src="@drawable/point2" />  
  
    <View  
        android:id="@+id/line_normal"  
        android:layout_width="3dp"  
        android:layout_height="100dp"  
        android:layout_below="@+id/image"  
        android:layout_marginLeft="91dp"  
        android:background="@color/colorAccent" />  
  
    <TextView  
        android:id="@+id/show_title"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_margin="3dp"  
        android:layout_toLeftOf="@id/image"  
        android:padding="3dp"       
        android:textSize="12dp" />  
  
    <TextView  
        android:id="@+id/show_time"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_margin="5dp"  
        android:layout_toRightOf="@id/image"  
        android:padding="3dp"      
        android:textSize="12dp" />  
  
</RelativeLayout>  

Adapter中的getView方法

[java] view plain copy
@Override  
    public View getView(int position, View convertView, ViewGroup parent) {  
        // TODO Auto-generated method stub  
        Holder holder;  
        if (convertView == null) {  
            holder= new Holder();  
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view, null);  
            holder.time = (TextView) convertView.findViewById(R.id.show_time);  
            holder.title= (TextView) convertView.findViewById(R.id.show_title);  
            holder.line = convertView.findViewById(R.id.line_normal);  
        } else {  
            holder= (Holder) convertView.getTag();  
        }  
  
        holder.time.setText(datas.get(position).getTime());  
        holder.title.setText(datas.get(position).getTitle());  
  
        //最后一项时，竖线不再显示  
        if (position == datas.size() - 1) {  
            item.line.setVisibility(View.GONE);  
        }  
  
        return convertView;  
    }  
  
    private class Holder{  
        TextView time, title;  
        View line;  
    }  

时间轴之--横向时间轴

上述的时间轴实现起来是比较容易的，就不再多说。这里想说一下的是横向的时间轴，京东和淘宝订单未结束时的物流状态就是一个横向的时间轴（类似于下图）

[java] view plain copy
private Context mContext;  
    //一个横向的ListView  
    private HorizontalListView listview;  
    private TimeLineAdapter2 adapter;  
    List<ItemBean> datas = new ArrayList<ItemBean>();  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        // TODO Auto-generated method stub  
        super.onCreate(savedInstanceState);  
        mContext = this;  
        setContentView(R.layout.activity_time_line2);  
        InitDatas();  
        listview = (HorizontalListView) findViewById(R.id.list);  
        adapter = new TimeLineAdapter2(mContext, datas);  
        listview.setAdapter(adapter);  
    }  
  
    /** 
     * 这里用虚拟数据实现，仅供参考 
     */  
    private void InitDatas() {  
        // TODO Auto-generated method stub  
        ItemBean item1 = new ItemBean();  
        item1.setTitle("提交订单");  
        item1.setTime("03-14 08:13");  
        item1.setStatu(1);  
        ItemBean item2 = new ItemBean();  
        item2.setTitle("已支付");  
        item2.setTime("03-14 22:32");  
        item2.setStatu(1);  
        ItemBean item3 = new ItemBean();  
        item3.setTitle("商品出库");  
        item3.setTime("03-15 00:33");  
        item3.setStatu(0);  
        ItemBean item4 = new ItemBean();  
        item4.setTitle("已签收");  
        item4.setTime("03-15 15:55");  
        item4.setStatu(0);  
  
        datas.add(item1);  
        datas.add(item2);  
        datas.add(item3);  
        datas.add(item4);  
    }  

横向ListView的条目布局:

[java] view plain copy
<?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="wrap_content" >  
  
    <TextView  
        android:layout_alignRight="@id/image"  
        android:id="@+id/show_title"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:padding="5dp"  
        android:textSize="12dp" />  
  
    <TextView  
        android:layout_alignRight="@id/image"  
        android:visibility="invisible"  
        android:id="@+id/show_time"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/image"  
        android:padding="5dp"  
        android:textSize="12dp" />  
  
    <View  
        android:id="@+id/line_normal"  
        android:layout_width="100dp"  
        android:layout_height="3dp"  
        android:layout_centerVertical="true"  
        android:background="#A6A6A6" />  
    <View  
        android:visibility="gone"  
        android:id="@+id/line_highlight"  
        android:layout_width="100dp"  
        android:layout_height="3dp"  
        android:layout_centerVertical="true"  
        android:background="@color/colorAccent" />  
  
    <ImageView  
        android:layout_toRightOf="@id/line_normal"  
        android:id="@+id/image"  
        android:layout_width="15dp"  
        android:layout_height="15dp"  
        android:layout_below="@id/show_title"  
        android:src="@drawable/point2" />  
  
</RelativeLayout>  

Adapter的代码实现:

[java] view plain copy
@Override  
    public View getView(int position, View convertView, ViewGroup parent) {  
        // TODO Auto-generated method stub  
        Holder holder;  
        if (convertView == null) {  
            holder= new Holder();  
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view2, null);  
            holder.time = (TextView) convertView.findViewById(R.id.show_time);  
            holder.title = (TextView) convertView.findViewById(R.id.show_title);  
            holder.lineNorma = convertView.findViewById(R.id.line_normal);  
            holder.lineHiLight = convertView.findViewById(R.id.line_highlight);  
            holder.image = (ImageView) convertView.findViewById(R.id.image);  
        } else {  
            holder= (Holder) convertView.getTag();  
        }  
  
  
        //根据数据状态对视图做不同的操作  
        if (datas.get(position).getStatu() == 1) {  
            holder.lineHiLight.setVisibility(View.VISIBLE);  
            holder.image.setImageResource(R.drawable.point1);  
            holder.time.setVisibility(View.VISIBLE);  
        }  
  
        holder.time.setText(datas.get(position).getTime());  
        holder.title.setText(datas.get(position).getTitle());  
  
  
        //这里在起始位置，就不显示“轴”了  
        if (position == 0) {  
            holder.lineNorma.setVisibility(View.INVISIBLE);  
            holder.lineHiLight.setVisibility(View.INVISIBLE);  
        }  
  
        return convertView;  
    }  
  
    private class Holder{  
        TextView time, title;  
        View lineNorma, lineHiLight;  
        ImageView image;  
    }  

当然实际开发中的处理会更复杂一点,这里只是提供了一个这样的思路,其实思路也是我从网上看的,嘿嘿,不过我感觉这个思路也可用到一些页面的Indicator上面,效果是一样的,

当然也可以结合google推出的RecycleView来使用,那样的话就不用管是水平还是竖直了,做技术最重要的就是思想了,希望这篇文章能给大家一个好的思路

2 0