Easy to use milestones, Timeline <ios widgets >

Thank you very much, help my friends, thank you. The last time my good friend pointed out that I coded (jwtextfiled tool component) There are some non-standard problems, this time the attention increased.

Dull Hair Address: https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git

The "Create background" component is created because of the use of similar functions, the UI design of the picture can not meet the actual needs of the scene. This component may have some bugs that I have not found, and if you find it, you want to criticize it.
"First declare" the component is my original, please cherish the fruits of labor. Because it was created for a moment, it took 6 hours to complete it, and the test optimization spent 8 hours.

1. What can it do to help you?

A, the basic description of the component:
"What's inside the component?" Description: The number of boxes of the component is not certain, the number of items inside the box is uncertain, the,item< is lab>, box wraps all items in a box, the last box may have additional data addtions, the additional data bar number is indeterminate. , any additional data text length is not sure ===>, the components have been all done for you ";
"How to modify it: You can modify the layout parameters in the Jw_asv_macro.h file to change the layout configuration of the component"
b, you only need to pass in a package has a number of data model of the array, the data model is likely to display the field, so well support the component itself according to a model to determine how many pieces of data to load in a box. and the number of arrays is the number of box. Support additional data, additional data is also self-adaptive typesetting and component adaptation, additional data can have a number of pieces. Note: If you want to implement automatic loading of items in box based on the data model, you need to refer to the design implementation in my demo, and you may want to make some adjustments to the relevant model parts of JwAutoStepModel.h and jwautostepview.m.
C, support the use of this component of the app in time to update (refresh) The data, the component updates, the memory is optimized to avoid useless data occupy memory, according to the data model, you can calculate the height in the parent view, easy to update the parent view layout changes.
D, do some custom modification, to customize its layout, you just need to understand a macro file jw_asv_macro.h can. Here is the macro file, simple enough

#pragmaMark ———————— > (jwautostepview) method macro definition#defineK_cap_x 25//hat x#defineK_cap_y 30//hat y (default)#defineK_cap_w 25//Hat width#defineK_cap_h K_cap_w//Hat Height#defineK_cap_b_b_scale 0.1//ratio of hat to cap rod#defineK_lab_line_destence 3//If the lab has more than 1 lines of line spacing#defineK_mouth_w_margin 10//the width of the corners#defineK_mouth_h_margin K_mouth_w_margin *0.6//the height of the corners#defineK_p_2_x (first_p_x + k_mouth_w_margin)//draw the X value of the second point#defineBox_right_margin 25//border distance to the far right#defineK_line_h ((k_cap_w) *1.40f)//the height of the pole under the default hat#defineK_cap_box_margin 8//hat and box spacing#definejw_a_s_mains_width [[UIScreen Mainscreen] Bounds].size.width//Screen Width//start position of first point#defineFirst_p_x ((k_cap_x) + (K_cap_w) + (K_cap_box_margin))#defineBox_width (Jw_a_s_mains_width-k_cap_x-k_cap_w-k_cap_box_margin-box_right_margin)//width of the dashed box//space between box and lab and lab#defineK_inbox_m_lab_h 10.0f//box and Lab horizontal left and right spacing#defineK_box_m_lab_v 10.0f//Lab and lab vertical spacing in box#defineK_box_lr_lab_size Cgsizemake (Ink_box_m_lab_h, Ink_box_m_lab_h)//box and Lab horizontal left and right spacing#defineK_l_h 21//The default height of a lab#defineK_conain_top 100//Component Header Distance#defineK_conain_bottom 100//Component Footer Distance#defineK_box_m_box_v 20//distance between wireframe (default)#defineK_lastbox_m_addlab_v 50//the vertical distance between the last box and the first additional lab#defineK_addlab_m_addlab_v 15//vertical distance between additional lab and additional lab#definek_addlab_m_contain_l 20//Attach lab to the left horizontal distance of the component#defineK_addlab_m_contain_r 20//Attach lab to the right horizontal distance of the component

?? I write a few simple methods, but also can write a few, but I do not see the need for, and not a very big component,??

#pragmaMark ———————— Important method/*incoming page (data is not fixed in the number of content bars) <?? >*/- (void) Set_asv_uidata: (nsmutablearray<jwautostepmodel*>*) data;/*incoming page data (the number of additional content is not fixed) <?? >*/- (void) Set_asv_adddata: (nsmutablearray*) data;/*return component height <?? >*/-(cgfloat) get_asv_controlheight;/*default setting <?? You can omit the "secondary method" configuration, directly within the method to configure?? >*/-(void) Set_asv_default;#pragmaMark ———————— Secondary method/*The hat color of step is being carried out, conversely color <?? >*/- (void) Set_asv_capcolor_steping: (uicolor*) C1 Oppose: (uicolor*) C2 cap: (uicolor*) C3;/*step is being carried out the color of the CAP, the color < >*/- (void) Set_asv_capbarcolor_setping: (uicolor*) C1 Oppose: (uicolor*) C2 cap: (uicolor*) C3;/*box inside the text color <?? >*/- (void) Set_asv_boxtextcolor_steping: (uicolor*) C1 Oppose: (uicolor*) C2;/*box border color <?? >*/- (void) Set_asv_boxbordercolor_stepingcolor: (uicolor*) C1 Oppose: (uicolor*) C2;/*the color of the text within the CAP <?? >*/- (void) Set_asv_captextcolor_steping: (uicolor*) C1 Oppose: (uicolor*) C2;/*hat Text (default = [1 period ...] There is a missing check) <?? >*/- (void) Set_asv_captitles: (nsarray*) tary;/*hat distance from the leftmost distance (def=25) <?? >*/- (void) Set_asv_capleft: (cgfloat) l_m;/*the diameter of the hat (def=25) <?? >*/- (void) Set_asv_capdiameter: (cgfloat) D;/*the ratio of cap rod to hat (0.01f ~ 1.0f; def=0.1) <?? >*/- (void) Set_asv_caprodscale: (cgfloat) Crscale;/*box distance from the far right of the page (def = +) <?? >*/- (void) Set_asv_boxright: (cgfloat) r_m;/*box and Lab horizontal spacing (def = cgsize (10,10)) <?? >*/- (void) Set_asv_boxmarginlab_l_r: (cgsize) bllrsize;#pragmaMark-———————— <?? > If it is to be implemented, it must be called before the data is added, otherwise it will not be implemented <?? >/*Box Lab and lab Vertical spacing (def = ten) <?? >*//*The first Lab in box with box top spacing is defined by a macro, where method modifications are no longer available*/- (void) Set_asv_inbox_labmarginlab_v: (cgfloat) LLMV;

2. How do you use it?

Enter the reference I write Demo,demo is based on StoryBoard;
Demo Description: Click on the page to simulate the Refresh function, timely update components, data.
Demo data simulation, I prefer to storyboard programming, development, is a person a storyboard, and do not put all the SB in a control Panel, pure code demo, there is a masory based on the demo I did not make, forgive me.
If you like pure code, or masory can modify the code, although not tried, it should be OK.

Put two below:
The data is implemented in a simulated manner:
(1), run the demo, may be the following look:

(2) Click on the page (simulated data refresh), may be the following look:

(3), scroll the page to see additional data

(4), re-refresh the data, additional data, can also be randomly assigned, but my demo is written dead, you can try,??

3. Concluding remarks

Although the method is a little low, but the realization of basic functions, exercise the thinking, but also to provide people in need of help, feel very good.
You can also refer to my brief book to use, hoping to help you.

4. Resources link

Https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git
If it brings you help, remember Star!?!

Easy to use milestones, Timeline <ios widgets >