More than technology, the article has material, pay attention to the public number nine heart said, a week of high quality good article, and nine heart side by side in dailang road.
preface
Because business often involves processes, the use of timelines is inevitable. Moreover, the company has been using the tablet, and the single-column TimeLine is no longer adequate, so the double-column TimeLine has been used. This is a TimeLine completed by RecyclerView of the 2-column waterfall flow layout, which has met the daily needs of our company. However, the annoyance brought by the use of waterfall flow is:
- Location is not easy to control: the distance between each point on the timeline is not evenly distributed (but this is also an advantage of waterfall flow, making full use of space)
- Single choice: If your project has a single column timeline and wants to integrate a double column timeline, in this case you will need to integrate two third-party libraries
- Single style: Most timeline libraries have style choices that are too simple to customize
In order to solve the above pain points, I offer a new solution based on RecyclerView, which HAS been integrated by me in Orient-UI. Here are a few examples of my customized implementation based on this solution:
| Two columns of the timeline | Single column timeline – left header | Single column timeline – top heading |
|---|---|---|
 |
 |
 |
 |
 |
 |
Introduce a,
Why is TimeLine flexible in Orient-UI? Because the scheme has the following characteristics:
- Body styles includeSingle column timelineandDouble column timeline: Used for a single column timeline
RecyclerViewIn theLinearLayoutManager, the two-column timeline is usedOrient-UiIn theDoubleSideLayoutManager (side layout) - Content styles are highly controllable: you can easily control how points are drawn on the timeline, the position and content of headings in the timeline, the timeline within the timeline, and so on
- Style height customization: you need to draw the time title and time point in a given area, which is why this scheme is flexible
The description of the above features may not be very clear, but let’s illustrate with two pictures:
| The picture | The picture |
|---|---|
 |
 |
On the left and right, they representDouble column timelineandSingle column timeline, includingdot areaandtitle areaIs the area that needs to be drawn, for exampleThe titleOn theRecyclerViewThe top side of the subview is still the left side,The titleThe color,Point in timeThe resource file drawing is still self-drawn, the style of the timeline and the size of the footprint are set when they need to be created. |
|
| ## 2, use | |
I will use the above pictures as examples to introduce eachSingleton timelineandDouble column timeline. But before you do that, you need to be inbuild.gradleAdd a dependency: |
|
| ` ` ` | |
| Implementation ‘com. Received: received a Ui: 1.0.0’ | |
| ` ` ` | |
| #### 1. Single-column timeline | |
| The first step is to inherit SingleTimeLineDecoration |
We need to implement the abstract method SingleTimeLineDecoration#onDrawTitleItem and select the appropriate method for the style of the current point in time. If the point in time is FLAG_DOT_DRAW (draw style), The SingleTimeLineDecoration#onDrawDotItem method is required to duplicate the SingleTimeLineDecoration#onDrawDotItem method. If the point in time is FLAG_DOT_RES, SingleTimeLineDecoration#onDrawDotResItem ();
public class StepSTL extends SingleTimeLineDecoration {
private Paint mRectPaint;
public StepSTL(SingleTimeLineDecoration.Config config) {
super(config);
mRectPaint = new Paint();
mRectPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID));
mDotPaint.setMaskFilter(new BlurMaskFilter(6, BlurMaskFilter.Blur.SOLID));
}
@Override
protected void onDrawTitleItem(Canvas canvas, int left, int top, int right, int bottom, int pos) {
ITimeItem item = timeItems.get(pos);
int rectWidth = UIUtils.dip2px(120);
int height = bottom - top;
int paddingLeft = UIUtils.dip2px(10);
mRectPaint.setColor(item.getColor());
canvas.drawRoundRect(left+paddingLeft,top,left+rectWidth,bottom,UIUtils.dip2px(6),UIUtils.dip2px(6),mRectPaint);
String title = item.getTitle();
if(TextUtils.isEmpty(title))
return;
Rect mRect = new Rect();
mTextPaint.getTextBounds(title,0,title.length(),mRect);
int x = left + (rectWidth - mRect.width())/2;
//int x = left + UIUtils.dip2px(20);
int y = bottom - (height - mRect.height())/2;
canvas.drawText(title,x,y,mTextPaint);
}
@Override
protected void onDrawDotItem(Canvas canvas, int cx, int cy, int radius, int pos) {
ITimeItem item = timeItems.get(pos);
mDotPaint.setColor(item.getColor());
canvas.drawCircle(cx,cy,UIUtils.dip2px(6),mDotPaint); }}Copy the codeThe second step is to create data
To create a datatype, implement the ITimeItem interface:
public class TimeItem implements ITimeItem {
private String name;
private String title;
private String detail;
private int color;
private int res;
// The constructor is omitted
/ /... Omit the get and set methods
// Get the current title
@Override
public String getTitle(a) {
return title;
}
// The color of time point
@Override
public int getColor(a) {
return color;
}
// The resource file for the point in time
// If you use the draw resource file
@Override
public int getResource(a) {
return res;
}
// ...
}
Copy the codeStep 3 Initialize the RecyclerView
Building a RecyclerView object and setting the layout to a LinearLayoutManager and initializing the adapter are the basics of using a RecyclerView. You already know them by heart.
Step 4 Create the timeline
// Initialize the data
// Just need to know what this line of code does
List<TimeItem> timeItems = TimeItem.initStepInfo();
// The adapter updates the data
// The adapter has been encapsulated by me
mAdapter.addAllData(timeItems);
// Build the timeline
TimeLine decoration = new SingleTimeLineDecoration.Builder(getContext(), timeItems) // Add data
// The size of the title color and title text is 20sp
.setTitle(Color.parseColor("#ffffff"), 20)
// Set the title position to the top of the subview and the height to 40dp
.setTitleStyle(SingleTimeLineDecoration.FLAG_TITLE_TYPE_TOP, 40)
// The timeline style draws the timeline area with a width (non-timeline width) of 50dp
.setLine(SingleTimeLineDecoration.FLAG_LINE_DIVIDE, 50, Color.parseColor("#8d9ca9"))
// The style of the point in time is self-drawn here
.setDot(SingleTimeLineDecoration.FLAG_DOT_DRAW)
// Same title hidden
.setSameTitleHide()
// Set the implementation timeline
.build(StepSTL.class);
mRecyclerView.addItemDecoration(decoration);
Copy the codeAfter this step is complete, it will display normally, with the same effect as the above active step:
Step 5 Update, Delete, and add
If you need to add, delete, check and change the data, then after these operations, you need to update the data in the TimeLine operation, it also supports add, delete and change.
| function | explain |
|---|---|
addItems |
Increase the data |
replace |
Replace the data |
remove |
Clear data |
| #### 2. Double column timeline | |
| There’s a big difference between a double-column timeline and a single-column timeline, and I’ll show you that. |
The first step is to inherit double Decoration
What you need to notice here is whether you are currently drawing the title in the left column or the right column of a two-column layout. This is done in the same way as singleTime Decoration, but it’s done in the double Time Decoration method.
The second step is to create data
With SingleTimeLineDecoration.
Step 3 Initialize the RecyclerView
The linear layout is obviously not going to work here, so I need to write DoubleSideLayoutManager instead:
mRecyclerView.setLayoutManager(new DoubleSideLayoutManager(DoubleSideLayoutManager.START_LEFT));
Copy the codeOthers same as singletime decoration.
Step 4 Create the timeline
The setting method is the same as SingleTimeLineDecoration. Note, however, that two columns of the timeline are not supported:
- Place the title on top of the subview
- Same title hidden
FLAG_LINE_DIVIDEStyle of the timeline
Step 5 Update, Delete, and add
With SingleTimeLineDecoration.
So that’s the configuration of a single column timeline and a double column timeline.
3. More information
After the above understanding, I believe you have realized that TimeLine is not only a TimeLine, but also competent for processes and steps. TimeLine provides you with the layout logic of the TimeLine. The specific time points and titles need to be drawn on your own. For more information about the drawing scheme and configuration information, see the project address: github.com/mCyp/Orient…
In addition, there are some other interesting controls integrated into the project. You are welcome to use them.
If you are interested in DoubleSideLayoutManager (side layout), check out:
RecyclerView – LayoutManager
Finally, thanks for reading