简单易用"里程碑"、"时间轴"<iOS小组件>

非常感谢，帮助我的朋友们，谢谢你们。上次我的好朋友指出了我编码上（jwTextFiled工具组件）存在一些不规范问题，这次注意提高。

呆毛地址：https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git

【创做背景】组件的制作是因为用到类似的功能，UI设计的图片不能满足实际场景需要。这个组件可能存在一些我没有发现的bug，如果你发现了，希望批评指正。
【首先声明】该组件是本人原创，请珍惜劳动成果。因为创造它的灵感只有一瞬间，但是完成它却使用了6个多小时，而自己测试优化基本上花了8个小时。

1、它能够帮助你做什么？

a、组件基本说明：
【组件内部都有啥？说明：组件的box个数不确定，box内部的items个数不确定，item<为lab>的高度不确定，box要包裹住一个box内的所有items,最后一个box后可能有附加数据addtions，附加数据条数不确定，任何一条附加数据文字长度不确定 ===> 没关系，组件已经统统帮你做好了】；
【如何修改它：你可以在 jw_ASV_Macro.h 文件里去修改与相关布局参数，进而改变组件的布局配置】
b、你只需要传入一个包裹有若干数据模型的数组，数据模型中就是可能要显示的字段，这样很好的支持了该组件自己根据一个模型去判断要在一个Box里加载多少条数据。而数组的个数就是Box的条数。支持附加数据，附加数据也做了自适应排版与组件自适应，附加数据可以有若干条。【注意：如果你要实现自动根据数据模型去加载box内的items,你需要参照我的demo里的设计实现，你可能要把 jwAutoStepModel.h 与 jwAutoStepView.m 里相关模型部分做一些调整】
c、支持使用该组件的app在及时更新(刷新)数据的时候，组件及时更新，对内存做了优化，避免无用数据占据内存，能够根据数据模型，自己计算出在父视图中的高度，方便更新父视图的布局改变。
d、做一些自定义的修改，来定制它的布局，你只需要看懂一个宏文件 jw_ASV_Macro.h 即可。下面是宏文件，够简单吧

#pragma mark————————> (jwAutoStepView)方法宏定义

#define K_Cap_X  25 // 帽子x
#define K_Cap_Y  30 // 帽子y (默认)
#define K_Cap_W  25 // 帽子宽度
#define K_Cap_H  K_Cap_W // 帽子高度

#define K_Cap_B_B_Scale 0.1 // 帽子与帽杆的比例
#define K_LAB_LINE_DESTENCE  3 // 如果Lab大于1行的行间距

#define K_MOUTH_W_MARGIN 10 // 嘴角的宽度
#define K_MOUTH_H_MARGIN K_MOUTH_W_MARGIN *0.6 // 嘴角的高度
#define K_P_2_X  (FIRST_P_X + K_MOUTH_W_MARGIN)// 绘制第二个点的X值
#define BOX_RIGHT_MARGIN  25//边框距离最右边的距离

#define K_Line_H ((K_Cap_W)*1.40f) // 默认的帽子下面杆子高度

#define K_Cap_Box_Margin 8 // 帽子与Box间距

#define JW_A_S_MAINS_WIDTH [[UIScreen mainScreen] bounds].size.width//屏幕宽

// 第一个点的起始位置
#define FIRST_P_X  ((K_Cap_X)+(K_Cap_W)+(K_Cap_Box_Margin))
#define BOX_WIDTH  (JW_A_S_MAINS_WIDTH-K_Cap_X-K_Cap_W-K_Cap_Box_Margin-BOX_RIGHT_MARGIN) // 虚线框的宽度

// box 与 lab 与 lab 间距
#define K_inBOX_M_LAB_H  10.0f  // box 与 Lab 水平 左右 间距
#define K_BOX_M_LAB_V  10.0f  // box 内 Lab 与 Lab 竖直 间距
#define K_BOX_LR_LAB_SIZE  CGSizeMake(inK_BOX_M_LAB_H, inK_BOX_M_LAB_H)// box 与 Lab 水平 左右 间距

#define K_L_H   21 // 一个Lab 的默认高度

#define K_CONAIN_TOP  100  // 组件页眉距离
#define K_CONAIN_BOTTOM  100  // 组件页脚距离

#define K_BOX_M_BOX_V  20 // 线框间距离 （默认）

#define K_LASTBOX_M_ADDLAB_V  50 // 最后一个box 与首个附加Lab 的竖直距离
#define K_ADDLAB_M_ADDLAB_V  15 // 附加Lab与附加Lab之间的竖直距离

#define K_ADDLAB_M_CONTAIN_L  20 // 附加Lab与组件左边的水平距离
#define K_ADDLAB_M_CONTAIN_R  20 // 附加Lab与组件右边的水平距离

??是我写的简单的几个方法，还能写几个，但是我看也没有必要了，又不是什么牛逼的组件，??

#pragma mark———————— 重要方法

/*传入页面数据  （data 为 内容条数不固定）<??>*/
- (void)set_asv_uiData:(NSMutableArray<jwAutoStepModel*>*)data;

/*传入页面数据 （data 为 附加内容条数不固定）<??>*/
- (void)set_asv_addData:(NSMutableArray*)data;

/*返回组件 高度 <??>*/
- (CGFloat)get_asv_ControlHeight;

/*默认设置 <??你可以省去“次要方法”配置，直接在该方法内去配置??>*/
-(void)set_asv_default;

#pragma mark———————— 次要方法

/*正在进行step的 帽子 颜色,反之颜色 <??>*/
- (void)set_asv_capColor_steping:(UIColor*)c1 oppose:(UIColor*)c2 cap:(UIColor*)c3;

/*正在进行step的 帽杆 颜色,反之颜色 <??>*/
- (void)set_asv_capBarColor_setping:(UIColor*)c1 oppose:(UIColor*)c2 cap:(UIColor*)c3;

/*box 内文字的颜色 <??>*/
- (void)set_asv_boxTextColor_steping:(UIColor*)c1 oppose:(UIColor*)c2;

/*box 边框的颜色 <??>*/
- (void)set_asv_boxBorderColor_stepingColor:(UIColor*)c1 oppose:(UIColor*)c2;

/* cap 内文字的颜色 <??>*/
- (void)set_asv_capTextColor_steping:(UIColor*)c1 oppose:(UIColor*)c2;

/*帽子文字（默认为 [1期...]有缺失校验）<??> */
- (void)set_asv_CapTitles:(NSArray*)tAry;

/*帽子距离最左边距离（def=25） <??>*/
- (void)set_asv_CapLeft:(CGFloat)l_m;

/*帽子的直径（def=25） <??>*/
- (void)set_asv_CapDiameter:(CGFloat)d;

/*帽杆与帽子的比例（0.01f ~ 1.0f ; def=0.1）<??> */
- (void)set_asv_CapRodScale:(CGFloat)crScale;

/*box距离页面最右边的距离（def = 25）<??>*/
- (void)set_asv_BoxRight:(CGFloat)r_m;

/* box 与 Lab 水平左右 间距（def = CGSize(10,10)）<??>*/
- (void)set_asv_BoxMarginLab_L_R:(CGSize)bllrSize;

#pragma mark-———————— <??>如要实现，必须在 添加数据之前调用，不然不能实现<??>
/* box 内 Lab 与 Lab 竖直 间距（def = 10）<??>*/
/* ?? box 内 首个 Lab 与 box 顶部间距由 宏定义，这里不再提供方法修改*/
- (void)set_asv_inBox_LabMarginLab_V:(CGFloat)llmv;

2、你如何使用它？

进入参照我写的demo，demo是基于 storyBoard 的；
demo说明：点击页面模拟刷新功能，及时更新组件、数据。
demo里进行了数据的模拟，我比较钟爱于StoryBoard 编程，开发的时候，就是一人一个storyBoard ,并没有将所有的sb全放在一个控制面板里，纯代码的demo、还有基于 Masory 的demo我没有制作，见谅了。
如果你爱好纯代码，或者Masory 可以修改一下代码，虽然没有试过，应该可以的吧。

下面放两张截图：
数据以模拟的样子实现的：
（1）、运行demo，可能是下面的样子：

（2）点击页面（模拟数据刷新），可能是下面的样子：

（3）、滚动页面可以看到附加数据

（4）、再次刷新数据，附加数据，也可以随机赋值，但是我的demo里是写死的，你可以试一试，??

3、结束语

虽然方法有点low,但是实现了基本的功能，锻炼了思维，还能提供给有需要帮助的人，觉得挺好的。
你也可以参照我的简书说明进行使用，希望能够帮到你。

4、资源链接

https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git
如果给你带来帮助了，记得star一下哦??！

时间： 2024-10-23 00:13:15

简单易用"里程碑"、"时间轴"<iOS小组件>

1、它能够帮助你做什么？

2、你如何使用它？

3、结束语

4、资源链接