TimeLine
简介:瀑布流式的时间轴
标签:
This project aims to provide a easy way to use Staggered TimeLine implementation.
Provide the gradle dependency
implementation 'com.vivian.widgets:TimeLineItemDecoration:1.5'
Usage
If you want to use this TimeLine in your project, you have to do the following.
-
Set the
StaggeredGridLayoutManager
to yourRecyclerView
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
-
Use the
ItemDecoration
of this project ItemDecoration.javamRecyclerView.addItemDecoration(new ItemDecoration(this, 100));
The second ctor-parameter will define the
distance
. In that case 100px.
Currently there are 2 styles available, as seen in the Screenshots. You can find the implementation for the second style here. DotItemDecoration.java
DotItemDecoration mItemDecoration = new DotItemDecoration
.Builder(this)
.setOrientation(DotItemDecoration.VERTICAL)//if you want a horizontal item decoration,remember to set horizontal orientation to your LayoutManager
.setItemStyle(DotItemDecoration.STYLE_DRAW)//choose to draw or use resource
.setTopDistance(20)//dp
.setItemInterVal(10)//dp
.setItemPaddingLeft(10)//default value equals to item interval value
.setItemPaddingRight(10)//default value equals to item interval value
.setDotColor(Color.WHITE)
.setDotRadius(2)//dp
.setDotPaddingTop(0)
.setDotInItemOrientationCenter(false)//set true if you want the dot align center
.setLineColor(Color.RED)//the color of vertical line
.setLineWidth(1)//dp
.setEndText("END")//set end text
.setTextColor(Color.WHITE)
.setTextSize(10)//sp
.setDotPaddingText(2)//dp.The distance between the last dot and the end text
.setBottomDistance(40)//you can add a distance to make bottom line longer
.create();
if you want to do something according to the column of span,implements SpanIndexListener
of this project SpanIndexListener.
mItemDecoration.setSpanIndexListener(new SpanIndexListener() {
@Override
public void onSpanIndexChange(View view, int spanIndex) {
view.setBackgroundResource(spanIndex == 0 ? R.drawable.pop_left : R.drawable.pop_right);
}
});
Example