简单易用"里程碑"、"时间轴"<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)点击页面(模拟数据刷新),可能是下面的样子:

 

                                               

 

(3)、滚动页面可以看到附加数据
 
 

                                               

(4)、再次刷新数据,附加数据,也可以随机赋值,但是我的demo里是写死的,你可以试一试,😀

 

                                               

  • 结束语

虽然方法有点low,但是实现了基本的功能,锻炼了思维,还能提供给有需要帮助的人,觉得挺好的。


你也可以参照我的简书说明进行使用,希望能够帮到你。

 

  • 资源链接

https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git


如果给你带来帮助了,记得star一下哦😯!

 

posted @ 2016-11-29 20:35  ywda  阅读(1332)  评论(0编辑  收藏  举报