# TimeLine **Repository Path**: OneMuYou/TimeLine ## Basic Information - **Project Name**: TimeLine - **Description**: 瀑布流式的时间轴 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-06 - **Last Updated**: 2024-11-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # TimeLine This project aims to provide a easy way to use *Staggered TimeLine* implementation. ## Provide the gradle dependency ``` compile 'com.vivian.widgets:TimeLineItemDecoration:1.1' ``` ## Usage If you want to use this *TimeLine* in your project, you have to do the following. - Set the `StaggeredGridLayoutManager` to your `RecyclerView` ``` mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)); ``` - Use the `ItemDecoration` of this project [ItemDecoration.java](https://github.com/vivian8725118/TimeLine/blob/master/app/src/main/java/com/vivian/timeline/timeline1/ItemDecoration.java) ``` mRecyclerView.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](https://github.com/vivian8725118/TimeLine/blob/master/app/src/main/java/com/vivian/timeline/itemdecoration/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 .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](https://github.com/vivian8725118/TimeLine/blob/master/app/src/main/java/com/vivian/timeline/itemdecoration/SpanIndexListener.java). ``` 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