简单易用"里程碑"、"时间轴"<iOS小组件>
非常感谢,帮助我的朋友们,谢谢你们。上次我的好朋友指出了我编码上(jwTextFiled工具组件)存在一些不规范问题,这次注意提高。
呆毛地址:https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git
【创做背景】组件的制作是因为用到类似的功能,UI设计的图片不能满足实际场景需要。这个组件可能存在一些我没有发现的bug,如果你发现了,希望批评指正。
【首先声明】该组件是本人原创,请珍惜劳动成果。因为创造它的灵感只有一瞬间,但是完成它却使用了6个多小时,而自己测试优化基本上花了8个小时。
-
它能够帮助你做什么?
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;
-
你如何使用它?
进入参照我写的demo,demo是基于 storyBoard 的;
demo说明:点击页面模拟刷新功能,及时更新组件、数据。
demo里进行了数据的模拟,我比较钟爱于StoryBoard 编程,开发的时候,就是一人一个storyBoard ,并没有将所有的sb全放在一个控制面板里,纯代码的demo、还有基于 Masory 的demo我没有制作,见谅了。
如果你爱好纯代码,或者Masory 可以修改一下代码,虽然没有试过,应该可以的吧。
下面放两张截图:
数据以模拟的样子实现的:
(1)、运行demo,可能是下面的样子:
(2)点击页面(模拟数据刷新),可能是下面的样子:
(4)、再次刷新数据,附加数据,也可以随机赋值,但是我的demo里是写死的,你可以试一试,😀
-
结束语
虽然方法有点low,但是实现了基本的功能,锻炼了思维,还能提供给有需要帮助的人,觉得挺好的。
你也可以参照我的简书说明进行使用,希望能够帮到你。
-
资源链接
https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git
如果给你带来帮助了,记得star一下哦😯!