open-android/Timeline

一分钟实现横竖时间轴

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.open-android:Timeline:0.1.0'
	}

	dependencies {
		implementation("com.github.open-android:Timeline:0.1.0")
	}

	<dependency>
	    <groupId>com.github.open-android</groupId>
	    <artifactId>Timeline</artifactId>
	    <version>0.1.0</version>
	</dependency>


                            
    libraryDependencies += "com.github.open-android" % "Timeline" % "0.1.0"


                            
    :dependencies [[com.github.open-android/Timeline "0.1.0"]]

Readme

欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视频
微信公众号名称：Android干货程序员

Timeline-View

Android Timeline View Library (使用 RecyclerView) is simple implementation used to display view like Tracking of shipment/order, steppers etc.

showcase

使用步骤

1. 在project的build.gradle添加如下代码(如下图)

	allprojects {
	    repositories {
	        ...
	        maven { url "https://jitpack.io" }
	    }
	}

2. 在Module的build.gradle添加依赖

     compile 'com.github.open-android:Timeline:0.1.0'

3. Usage

In XML Layout :

<com.github.vipulasri.timelineview.TimelineView
    android:id="@+id/time_marker"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:markerSize="20dp"
    app:lineSize="2dp"
    app:line="@color/colorPrimary"/>

Line Padding around marker

<com.github.vipulasri.timelineview.TimelineView
    android:id="@+id/time_marker"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:markerSize="20dp"
    app:lineSize="2dp"
    app:line="@color/colorPrimary"
    app:linePadding="5dp"/>

Configure using xml attributes or setters in code:
<table> <th>Attribute Name</th> <th>Default Value</th> <th>Description</th> <tr> <td>app:marker="@drawable/marker"</td> <td>Green Colored Oval Drawable</td> <td>sets marker drawable</td> </tr> <tr> <td>app:markerSize="25dp"</td> <td>25dp</td> <td>sets marker size</td> </tr> <tr> <td>app:markerInCenter="false"</td> <td>true</td> <td>sets the marker in center of line if `true`</td> </tr> <tr> <td>app:line="@color/primarColor"</td> <td>Dark Grey Line</td> <td>sets line color</td> </tr> <tr> <td>app:lineSize="2dp"</td> <td>2dp</td> <td>sets line width</td> </tr> <tr> <td>app:lineOrientation="horizontal"</td> <td>vertical</td> <td>sets orientation of line ie `horizontal` or `vertical`</td> </tr> <tr> <td>app:linePadding="5dp"</td> <td>0dp</td> <td>sets line padding around marker</td> </tr> </table>

实现上面图片一的效果，拷贝如下XML到RecyclerView的Item布局,如下是完整的item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp">

    <com.github.vipulasri.timelineview.TimelineView
        android:id="@+id/time_marker"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:markerSize="20dp"
        app:lineSize="3dp"
        app:line="@color/colorPrimary"
        app:linePadding="5dp"/>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_vertical"
        app:cardElevation="1dp"
        app:contentPadding="15dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="vertical">

            <android.support.v7.widget.AppCompatTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/text_timeline_date"
                android:textSize="12sp"
                tools:text="24 JAN"/>

            <android.support.v7.widget.AppCompatTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:id="@+id/text_timeline_title"
                android:textColor="@android:color/black"
                tools:text="Order Successfully Completed"/>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

RecyclerView的Adapter完整代码如下：

public class TimeLineAdapter extends RecyclerView.Adapter<TimeLineViewHolder> {

    private List<TimeLineModel> mFeedList;
    private Context mContext;
    private Orientation mOrientation;
    private boolean mWithLinePadding;
    private LayoutInflater mLayoutInflater;

    public TimeLineAdapter(List<TimeLineModel> feedList, Orientation orientation, boolean withLinePadding) {
        mFeedList = feedList;
        mOrientation = orientation;
        mWithLinePadding = withLinePadding;
    }

    @Override
    public int getItemViewType(int position) {
        return TimelineView.getTimeLineViewType(position,getItemCount());
    }

    @Override
    public TimeLineViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        mContext = parent.getContext();
        mLayoutInflater = LayoutInflater.from(mContext);
        View view;

        if(mOrientation == Orientation.HORIZONTAL) {
            view = mLayoutInflater.inflate(mWithLinePadding ? R.layout.item_timeline_horizontal_line_padding : R.layout.item_timeline_horizontal, parent, false);
        } else {
            view = mLayoutInflater.inflate(mWithLinePadding ? R.layout.item_timeline_line_padding : R.layout.item_timeline, parent, false);
        }

        return new TimeLineViewHolder(view, viewType);
    }

    @Override
    public void onBindViewHolder(TimeLineViewHolder holder, int position) {

        TimeLineModel timeLineModel = mFeedList.get(position);

        if(timeLineModel.getStatus() == OrderStatus.INACTIVE) {
            holder.mTimelineView.setMarker(VectorDrawableUtils.getDrawable(mContext, R.drawable.ic_marker_inactive, android.R.color.darker_gray));
        } else if(timeLineModel.getStatus() == OrderStatus.ACTIVE) {
            holder.mTimelineView.setMarker(VectorDrawableUtils.getDrawable(mContext, R.drawable.ic_marker_active, R.color.colorPrimary));
        } else {
            holder.mTimelineView.setMarker(ContextCompat.getDrawable(mContext, R.drawable.ic_marker), ContextCompat.getColor(mContext, R.color.colorPrimary));
        }

        if(!timeLineModel.getDate().isEmpty()) {
            holder.mDate.setVisibility(View.VISIBLE);
            holder.mDate.setText(DateTimeUtils.parseDateTime(timeLineModel.getDate(), "yyyy-MM-dd HH:mm", "hh:mm a, dd-MMM-yyyy"));
        }
        else
            holder.mDate.setVisibility(View.GONE);

        holder.mMessage.setText(timeLineModel.getMessage());
    }

    @Override
    public int getItemCount() {
        return (mFeedList!=null? mFeedList.size():0);
    }

}

上面RecyclerView注意左边时间轴图片，一共是三种状态，空心圆圈，实心圆圈，圆圈里面有一个点，三种状态如下：

public enum OrderStatus {

    COMPLETED,
    ACTIVE,
    INACTIVE;

}

上面的RecyView使用的JavaBean如下，如果大家需要使用，直接替换成自己的Bean对象就行：

private void setDataListItems(){
        mDataList.add(new TimeLineModel("Item successfully delivered", "", OrderStatus.INACTIVE));
        mDataList.add(new TimeLineModel("Courier is out to delivery your order", "2017-02-12 08:00", OrderStatus.ACTIVE));
        mDataList.add(new TimeLineModel("Item has reached courier facility at New Delhi", "2017-02-11 21:00", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Item has been given to the courier", "2017-02-11 18:00", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Item is packed and will dispatch soon", "2017-02-11 09:30", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Order is being readied for dispatch", "2017-02-11 08:00", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Order processing initiated", "2017-02-10 15:00", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Order confirmed by seller", "2017-02-10 14:30", OrderStatus.COMPLETED));
        mDataList.add(new TimeLineModel("Order placed successfully", "2017-02-10 14:00", OrderStatus.COMPLETED));
    }

下面的代码都属于核心代码，如果看完上面的完整代码，下面的代码可以忽略

RecyclerView Holder : Your RecyclerViewHolder should have an extra paramenter in constructor i.e viewType from onCreateViewHolder. You would also have to call the method initLine(viewType) in constructor definition.


    public class TimeLineViewHolder extends RecyclerView.ViewHolder {
        public  TimelineView mTimelineView;

        public TimeLineViewHolder(View itemView, int viewType) {
            super(itemView);
            mTimelineView = (TimelineView) itemView.findViewById(R.id.time_marker);
            mTimelineView.initLine(viewType);
        }
    }

RecyclerView Adapter : override getItemViewType method in Adapter


    @Override
    public int getItemViewType(int position) {
        return TimelineView.getTimeLineViewType(position,getItemCount());
    }

And pass the viewType from onCreateViewHolder to its Holder.


    @Override
    public TimeLineViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(parent.getContext(), R.layout.item_timeline, null);
        return new TimeLineViewHolder(view, viewType);
    }