android ListView实现横向时光轴

android ListView实现横向时光轴

        时光轴最大的作用就是把过去的事物系统化、完整化、精确化。时间轴能够让用户更直观的看到，我的这一刻在做什么，那一刻做过什么，依据时间顺序，把一方面或多方面的时间足迹事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户;页面简单，表现形式特别，一直以来受到广大用户的欢迎。

首先来看效果图：

这是模拟一个横向的快递信息时光轴，接下来看看我们怎么实现的把。

首先我们先自定义一个横向的ListView类，然后MainActivity中的ListView继承他，来实现横向展示ListView。

package com.example.mytimeaxis;

import android.content.Context;
import android.database.DataSetObserver;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListAdapter;
import android.widget.Scroller;

import java.util.LinkedList;
import java.util.Queue;

public class HorizontalListView extends AdapterView<ListAdapter> {
  
    public boolean mAlwaysOverrideTouch = true;  
    protected ListAdapter mAdapter;  
    private int mLeftViewIndex = -1;  
    private int mRightViewIndex = 0;  
    protected int mCurrentX;  
    protected int mNextX;  
    private int mMaxX = Integer.MAX_VALUE;  
    private int mDisplayOffset = 0;  
    protected Scroller mScroller;
    private GestureDetector mGesture;
    private Queue<View> mRemovedViewQueue = new LinkedList<View>();
    private OnItemSelectedListener mOnItemSelected;  
    private OnItemClickListener mOnItemClicked;  
    private OnItemLongClickListener mOnItemLongClicked;  
    private boolean mDataChanged = false;  
      
  
    public HorizontalListView(Context context, AttributeSet attrs) {
        super(context, attrs);  
        initView();  
    }  
      
    private synchronized void initView() {  
        mLeftViewIndex = -1;  
        mRightViewIndex = 0;  
        mDisplayOffset = 0;  
        mCurrentX = 0;  
        mNextX = 0;  
        mMaxX = Integer.MAX_VALUE;  
        mScroller = new Scroller(getContext());  
        mGesture = new GestureDetector(getContext(), mOnGesture);  
    }  
      
    @Override  
    public void setOnItemSelectedListener(AdapterView.OnItemSelectedListener listener) {
        mOnItemSelected = listener;  
    }  
      
    @Override  
    public void setOnItemClickListener(AdapterView.OnItemClickListener listener){  
        mOnItemClicked = listener;  
    }  
      
    @Override  
    public void setOnItemLongClickListener(AdapterView.OnItemLongClickListener listener) {  
        mOnItemLongClicked = listener;  
    }  
  
    private DataSetObserver mDataObserver = new DataSetObserver() {
  
        @Override  
        public void onChanged() {  
            synchronized(HorizontalListView.this){  
                mDataChanged = true;  
            }  
            invalidate();  
            requestLayout();  
        }  
  
        @Override  
        public void onInvalidated() {  
            reset();  
            invalidate();  
            requestLayout();  
        }  
          
    };  
  
    @Override  
    public ListAdapter getAdapter() {  
        return mAdapter;  
    }  
  
    @Override  
    public View getSelectedView() {  
        //TODO: implement  
        return null;  
    }  
  
    @Override  
    public void setAdapter(ListAdapter adapter) {  
        if(mAdapter != null) {  
            mAdapter.unregisterDataSetObserver(mDataObserver);  
        }  
        mAdapter = adapter;  
        mAdapter.registerDataSetObserver(mDataObserver);  
        reset();  
    }  
      
    private synchronized void reset(){  
        initView();  
        removeAllViewsInLayout();  
        requestLayout();  
    }  
  
    @Override  
    public void setSelection(int position) {  
        //TODO: implement  
    }  
      
    private void addAndMeasureChild(final View child, int viewPos) {  
        LayoutParams params = child.getLayoutParams();  
        if(params == null) {  
            params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
        }  
  
        addViewInLayout(child, viewPos, params, true);  
        child.measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.AT_MOST),  
                MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.AT_MOST));  
    }  
      
      
  
    @Override  
    protected synchronized void onLayout(boolean changed, int left, int top, int right, int bottom) {  
        super.onLayout(changed, left, top, right, bottom);  
  
        if(mAdapter == null){  
            return;  
        }  
          
        if(mDataChanged){  
            int oldCurrentX = mCurrentX;  
            initView();  
            removeAllViewsInLayout();  
            mNextX = oldCurrentX;  
            mDataChanged = false;  
        }  
  
        if(mScroller.computeScrollOffset()){  
            int scrollx = mScroller.getCurrX();  
            mNextX = scrollx;  
        }  
          
        if(mNextX <= 0){  
            mNextX = 0;  
            mScroller.forceFinished(true);  
        }  
        if(mNextX >= mMaxX) {  
            mNextX = mMaxX;  
            mScroller.forceFinished(true);  
        }  
          
        int dx = mCurrentX - mNextX;  
          
        removeNonVisibleItems(dx);  
        fillList(dx);  
        positionItems(dx);  
          
        mCurrentX = mNextX;  
          
        if(!mScroller.isFinished()){  
            post(new Runnable(){  
                @Override  
                public void run() {  
                    requestLayout();  
                }  
            });  
              
        }  
    }  
      
    private void fillList(final int dx) {  
        int edge = 0;  
        View child = getChildAt(getChildCount()-1);  
        if(child != null) {  
            edge = child.getRight();  
        }  
        fillListRight(edge, dx);  
          
        edge = 0;  
        child = getChildAt(0);  
        if(child != null) {  
            edge = child.getLeft();  
        }  
        fillListLeft(edge, dx);  
          
          
    }  
      
    private void fillListRight(int rightEdge, final int dx) {  
        while(rightEdge + dx < getWidth() && mRightViewIndex < mAdapter.getCount()) {  
              
            View child = mAdapter.getView(mRightViewIndex, mRemovedViewQueue.poll(), this);  
            addAndMeasureChild(child, -1);  
            rightEdge += child.getMeasuredWidth();  
              
            if(mRightViewIndex == mAdapter.getCount()-1) {  
                mMaxX = mCurrentX + rightEdge - getWidth();  
            }  
              
            if (mMaxX < 0) {  
                mMaxX = 0;  
            }  
            mRightViewIndex++;  
        }  
          
    }  
      
    private void fillListLeft(int leftEdge, final int dx) {  
        while(leftEdge + dx > 0 && mLeftViewIndex >= 0) {  
            View child = mAdapter.getView(mLeftViewIndex, mRemovedViewQueue.poll(), this);  
            addAndMeasureChild(child, 0);  
            leftEdge -= child.getMeasuredWidth();  
            mLeftViewIndex--;  
            mDisplayOffset -= child.getMeasuredWidth();  
        }  
    }  
      
    private void removeNonVisibleItems(final int dx) {  
        View child = getChildAt(0);  
        while(child != null && child.getRight() + dx <= 0) {  
            mDisplayOffset += child.getMeasuredWidth();  
            mRemovedViewQueue.offer(child);  
            removeViewInLayout(child);  
            mLeftViewIndex++;  
            child = getChildAt(0);  
              
        }  
          
        child = getChildAt(getChildCount()-1);  
        while(child != null && child.getLeft() + dx >= getWidth()) {  
            mRemovedViewQueue.offer(child);  
            removeViewInLayout(child);  
            mRightViewIndex--;  
            child = getChildAt(getChildCount()-1);  
        }  
    }  
      
    private void positionItems(final int dx) {  
        if(getChildCount() > 0){  
            mDisplayOffset += dx;  
            int left = mDisplayOffset;  
            for(int i=0;i<getChildCount();i++){  
                View child = getChildAt(i);  
                int childWidth = child.getMeasuredWidth();  
                child.layout(left, 0, left + childWidth, child.getMeasuredHeight());  
                left += childWidth + child.getPaddingRight();  
            }  
        }  
    }  
      
    public synchronized void scrollTo(int x) {  
        mScroller.startScroll(mNextX, 0, x - mNextX, 0);  
        requestLayout();  
    }  
      
    @Override  
    public boolean dispatchTouchEvent(MotionEvent ev) {
        boolean handled = super.dispatchTouchEvent(ev);  
        handled |= mGesture.onTouchEvent(ev);  
        return handled;  
    }  
      
    protected boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
                float velocityY) {  
        synchronized(HorizontalListView.this){  
            mScroller.fling(mNextX, 0, (int)-velocityX, 0, 0, mMaxX, 0, 0);  
        }  
        requestLayout();  
          
        return true;  
    }  
      
    protected boolean onDown(MotionEvent e) {  
        mScroller.forceFinished(true);  
        return true;  
    }  
      
    private GestureDetector.OnGestureListener mOnGesture = new GestureDetector.SimpleOnGestureListener() {
  
        @Override  
        public boolean onDown(MotionEvent e) {  
            return HorizontalListView.this.onDown(e);  
        }  
  
        @Override  
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
                float velocityY) {  
            return HorizontalListView.this.onFling(e1, e2, velocityX, velocityY);  
        }  
  
        @Override  
        public boolean onScroll(MotionEvent e1, MotionEvent e2,  
                float distanceX, float distanceY) {  
              
            synchronized(HorizontalListView.this){  
                mNextX += (int)distanceX;  
            }  
            requestLayout();  
              
            return true;  
        }  
  
        @Override  
        public boolean onSingleTapConfirmed(MotionEvent e) {  
            for(int i=0;i<getChildCount();i++){  
                View child = getChildAt(i);  
                if (isEventWithinView(e, child)) {  
                    if(mOnItemClicked != null){  
                        mOnItemClicked.onItemClick(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId( mLeftViewIndex + 1 + i ));  
                    }  
                    if(mOnItemSelected != null){  
                        mOnItemSelected.onItemSelected(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId( mLeftViewIndex + 1 + i ));  
                    }  
                    break;  
                }  
                  
            }  
            return true;  
        }  
          
        @Override  
        public void onLongPress(MotionEvent e) {  
            int childCount = getChildCount();  
            for (int i = 0; i < childCount; i++) {  
                View child = getChildAt(i);  
                if (isEventWithinView(e, child)) {  
                    if (mOnItemLongClicked != null) {  
                        mOnItemLongClicked.onItemLongClick(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId(mLeftViewIndex + 1 + i));  
                    }  
                    break;  
                }  
  
            }  
        }  
  
        private boolean isEventWithinView(MotionEvent e, View child) {  
            Rect viewRect = new Rect();
            int[] childPosition = new int[2];  
            child.getLocationOnScreen(childPosition);  
            int left = childPosition[0];  
            int right = left + child.getWidth();  
            int top = childPosition[1];  
            int bottom = top + child.getHeight();  
            viewRect.set(left, top, right, bottom);  
            return viewRect.contains((int) e.getRawX(), (int) e.getRawY());  
        }  
    };  
}  

MainActivity布局展示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mytimeaxis.MainActivity">

    <com.example.mytimeaxis.HorizontalListView
        android:id="@+id/mlv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.example.mytimeaxis.HorizontalListView>

</android.support.constraint.ConstraintLayout>

MainActivity代码：

package com.example.mytimeaxis;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    //一个横向的ListView
    List<Dates> datas = new ArrayList<Dates>();
    private HorizontalListView mlv;

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

    }

    private void initAdapter() {

        MyAdapter adapter = new MyAdapter((ArrayList<Dates>) datas, this);
        mlv.setAdapter(adapter);

    }


    /**
     * 这里用虚拟数据实现，仅供参考
     */
    private void initData() {
        // TODO Auto-generated method stub
        Dates item1 = new Dates();
        item1.setTitle("提交订单");
        item1.setTime("03-14 08:13");
        item1.setStatu(1);              //设置状态标记1 ，0
        Dates item2 = new Dates();
        item2.setTitle("已支付");
        item2.setTime("03-14 22:32");
        item2.setStatu(1);
        Dates item3 = new Dates();
        item3.setTitle("商品出库");
        item3.setTime("03-15 00:33");
        item3.setStatu(0);
        Dates item4 = new Dates();
        item4.setTitle("已签收");
        item4.setTime("03-15 15:55");
        item4.setStatu(0);

        datas.add(item1);
        datas.add(item2);
        datas.add(item3);
        datas.add(item4);
    }


    private void initView() {
        mlv = (HorizontalListView) findViewById(R.id.mlv);
    }
}

接下来一个Dates 实体类。

package com.example.mytimeaxis;

/**
 * Created by Administrator on 2018/5/28.
 */

public class Dates {
    private String time;
    private String title;
    private int statu;

    public Dates() {
    }

    @Override
    public String toString() {
        return "Dates{" +
                "time='" + time + '\'' +
                ", title='" + title + '\'' +
                ", statu=" + statu +
                '}';
    }

    public int getStatu() {
        return statu;
    }

    public void setStatu(int statu) {
        this.statu = statu;
    }

    public Dates(String time, String title, int statu) {
        this.time = time;
        this.title = title;
        this.statu = statu;
    }

    public String getTime() {
        return time;
    }

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Dates(String time, String title) {

        this.time = time;
        this.title = title;
    }
}

最重要的是ListView适配器代码istView:

package com.example.mytimeaxis;

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.TextView;

import java.util.ArrayList;

public class MyAdapter extends BaseAdapter {

    private ArrayList<Dates> datas;
    Context context;


    public MyAdapter(ArrayList<Dates> dates, Context context) {
        super();
        this.datas = dates;
        this.context = context;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return datas.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Item item=null;
        if (convertView == null) {
            item = new Item();
            convertView = LayoutInflater.from(context).inflate(R.layout.item_view2, null);
            item.time = (TextView) convertView.findViewById(R.id.show_time);
            item.title = (TextView) convertView.findViewById(R.id.show_title);
            item.lineNorma = (View) convertView.findViewById(R.id.line_normal);
            item.lineHiLight = (View) convertView.findViewById(R.id.line_highlight);
            item.image = (ImageView) convertView.findViewById(R.id.image);
            convertView.setTag(item);

        } else {
            item = (Item) convertView.getTag();
        }


        //根据数据状态对视图做不同的操作
        if (datas.get(position).getStatu() == 1) {
            item.lineHiLight.setVisibility(View.VISIBLE);
            item.image.setImageResource(R.drawable.report_checked);
            item.time.setVisibility(View.VISIBLE);
        }

        item.time.setText(datas.get(position).getTime());
        item.title.setText(datas.get(position).getTitle());


        //这里在起始位置，就不显示“轴”了
        if (position == 0) {
            item.lineNorma.setVisibility(View.INVISIBLE);
            item.lineHiLight.setVisibility(View.INVISIBLE);
        }

        return convertView;
    }

    private class Item {
        TextView time, title;
        View lineNorma, lineHiLight;
        ImageView image;
    }
}

适配器item_view2布局代码：

<?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/report_unchecked" />

</RelativeLayout>

时光轴的效果就这样实现了，大家可以参考下。