簡單易用"裡程碑"、"時間軸"<iOS小工具>

標籤：9.png   img   添加   items   左右      避免   地址   uid   

 

非常感謝，協助我的朋友們，謝謝你們。上次我的好朋友指出了我編碼上（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一下哦??！

 

簡單易用"裡程碑"、"時間軸"<iOS小工具>