_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __ / / / / / _ _ _ / / / ╱ ╱ /__/ /_ _ _ _ _ _/ / / / / / / / / ╱ ╱ _ _ / / / / / / / /_ _ _ / / ╱ ╱ / / / / / / / / / _ _ _ / / / \ \ / / / / / /_ __/ / / / / / \ \ / / / / \ _ _ _ _ / /__/ /__/ \__\ /__/ /__/
效果
一、表單UFFormView
UFFormView *formView = [UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { // TODO:設置表單樣式 }];
或者git
UFFormView *formView = [[UFFormView alloc] init]; // TODO:設置表單樣式
二、表單樣式
一、什麼是樣式?
樣式就是設置UI控件的字體、顏色、對齊方式等一列屬性。包括:文本樣式UFTextStyle、標題樣式UFRowTitleStyle、手機驗證碼按鈕樣式UFMobileCodeStyle、單選按鈕樣式UFRadioGroupStyle、表單組樣式UFSectionStyle等。github
二、如何建立表單樣式?
一、文本樣式objective-c
UFTextStyle *textStyle = [UFTextStyle makeTextStyle:^(UFRowTextStyleMaker * _Nonnull make) { make .color([UIColor redColor]) // 設置文本顏色 .font([UIFont systemFontOfSize:14]) // 設置文本字體 .textAlignment(NSTextAlignmentLeft); // 設置文本對齊方式 }];
或者api
UFTextStyle *textStyle = [[UFTextStyle alloc] init]; textStyle.color = [UIColor redColor]; // 設置文本顏色 textStyle.font = [UIFont systemFontOfSize:14]; // 設置文本字體 textStyle.textAlignment = NSTextAlignmentLeft; // 設置文本對齊方式
二、標題樣式安全
UFRowTitleStyle *titleStyle = [UFRowTitleStyle makeTitleStyle:^(UFRowTitleStyleMaker * _Nonnull make) { make .width(90) // 設置標題寬度 .color([UIColor redColor]) // 設置標題顏色 .font([UIFont systemFontOfSize:14]) // 設置標題字體 .textAlignment(NSTextAlignmentLeft); // 設置標題對齊方式 }];
或網絡
UFRowTitleStyle *titleStyle = [[UFTextStyle alloc] init]; titleStyle.width = 90; // 設置標題寬度 titleStyle.color = [UIColor redColor]; // 設置標題顏色 titleStyle.font = [UIFont systemFontOfSize:14]; // 設置標題字體 titleStyle.textAlignment = NSTextAlignmentLeft; // 設置標題對齊方式
三、手機驗證碼樣式字體
UFMobileCodeStyle *codeStyle = [UFMobileCodeStyle makeMobileCodeStyle:^(UFMobileCodeStyleMaker * _Nonnull make) { make .cornerRadius(10) // 設置按鈕圓角 .backgroundColor([UIColor redColor]) // 設置按鈕背景色 .separatorColor([UIColor lightGrayColor]) // 設置輸入框與按鈕之間分割線的顏色 .color([UIColor whiteColor]) // 設置按鈕標題顏色 .font([UIFont systemFontOfSize:14]) // 設置按鈕標題字體 .textAlignment(NSTextAlignmentLeft); // 設置按鈕標題對齊方式 }];
或3d
UFMobileCodeStyle *codeStyle = [[UFMobileCodeStyle alloc] init]; codeStyle.cornerRadius = 10; // 設置按鈕圓角 codeStyle.backgroundColor = [UIColor redColor]; // 設置按鈕背景色 codeStyle.separatorColor = [UIColor lightGrayColor] // 設置輸入框與按鈕之間分割線的顏色 codeStyle.color = [UIColor whiteColor]; // 設置按鈕標題顏色 codeStyle.font = [UIFont systemFontOfSize:14]; // 設置按鈕標題字體 codeStyle.textAlignment = NSTextAlignmentLeft; // 設置按鈕標題對齊方式
四、單選按鈕樣式代理
UFRadioGroupStyle *radioGroupStyle = [UFRadioGroupStyle makeRadioGroupStyle:^(UFRowRadioGroupStyleMaker * _Nonnull make) { make .image([UIImage imageNamed:@"radio_checked"]) // 未選中圖片 .selectedImage([UIImage imageNamed:@"radio_unchecked"]); // 選中圖片 }];
或code
UFRadioGroupStyle *radioGroupStyle = [[UFRadioGroupStyle alloc] init]; radioGroupStyle.image = [UIImage imageNamed:@"radio_checked"]; // 未選中圖片 radioGroupStyle.selectedImage = [UIImage imageNamed:@"radio_unchecked"]; // 選中圖片
三、統一添加表單樣式
一、添加左側標題樣式
[UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .titleStyle([UFRowTitleStyle makeTitleStyle:^(UFRowTitleStyleMaker * _Nonnull make) { // TODO:設置標題樣式(參考如何建立標題樣式) }]); }];
或
UFRowTitleStyle *titleStyle = [[UFRowTitleStyle alloc] init]; // TODO:設置標題樣式(參考如何建立標題樣式) formView.titleStyle = titleStyle;
二、設置右側值樣式
UFFormView *formView = [UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .valueStyle([UFTextStyle makeTextStyle:^(UFRowTextStyleMaker * _Nonnull make) { // TODO:設置值樣式(參考如何建立文本樣式) }]); }];
或
UFTextStyle *valueStyle = [[UFTextStyle alloc] init]; // TODO:設置值樣式(參考如何建立文本樣式) formView.valueStyle = valueStyle;
四、統一設置行高
UFFormView *formView = [UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .rowHeight(50); }];
或
formView.rowHeight = 50;
三、分組UFSection
一、建立分組
UFSection *section = [UFSection makeSection:^(UFSectionMaker * _Nonnull make) { }];
或
UFSection *section = [[UFSection alloc] init];
二、設置分組樣式
一、統一設置組內的表單樣式
UFSection *section = [UFSection makeSection:^(UFSectionMaker * _Nonnull make) { make // 設置標題樣式 .titleStyle([UFRowTitleStyle makeTitleStyle:^(UFRowTitleStyleMaker * _Nonnull make) { // TODO:設置標題樣式(參考如何建立標題樣式) }]) // 設置值樣式 .valueStyle([UFTextStyle makeTextStyle:^(UFRowTextStyleMaker * _Nonnull make) { // TODO:設置值樣式(參考如何建立文本樣式) }]); }];
或
UFSection *section = [[UFSection alloc] init]; // 設置標題樣式 UFRowTitleStyle *titleStyle = [[UFRowTitleStyle alloc] init]; // TODO:設置標題樣式(參考如何建立標題樣式) section.titleStyle = titleStyle; // 設置值樣式 UFTextStyle *valueStyle = [[UFTextStyle alloc] init]; // TODO:設置值樣式(參考如何建立文本樣式) section.valueStyle = valueStyle;
二、設置組頭、腳樣式
[UFSection makeSection:^(UFSectionMaker * _Nonnull make) { make // 設置頭樣式 .headerStyle([UFSectionStyle makeSectionStyle:^(UFSectionStyleMaker * _Nonnull make) { make .height(30) // 設置頭高度 .text(@"頁眉") // 設置頭描述信息 .color([UIColor lightGrayColor]) // 設置頭描述信息顏色 .font([UIFont systemFontOfSize:12]) // 設置頭描述信息字體 .numberOfLines(0); // 設置頭描述信息多行 }]) // 設置腳樣式 .footerStyle([UFSectionStyle makeSectionStyle:^(UFSectionStyleMaker * _Nonnull make) { make .height(30) // 設置腳高度 .text(@"頁腳") // 設置腳描述信息 .color([UIColor lightGrayColor]) // 設置腳描述信息顏色 .font([UIFont systemFontOfSize:12]) // 設置腳描述信息字體 .numberOfLines(0); // 設置腳描述信息多行 }]); }];
或
UFSection *section = [[UFSection alloc] init]; // 設置頭樣式 UFSectionStyle *headerStyle = [[UFSectionStyle alloc] init]; headerStyle.height = 30; // 設置頭高度 headerStyle.text = @"頁眉"; // 設置頭描述信息 headerStyle.color = [UIColor lightGrayColor]; // 設置頭描述信息顏色 headerStyle.font = [UIFont systemFontOfSize:12]; // 設置頭描述信息字體 headerStyle.numberOfLines = 0; // 設置頭描述信息多行 section.headerStyle = headerStyle; // 設置腳樣式 UFSectionStyle *footerStyle = [[UFSectionStyle alloc] init]; footerStyle.height = 30; // 設置腳高度 footerStyle.text = @"頁腳"; // 設置腳描述信息 footerStyle.color = [UIColor lightGrayColor]; // 設置腳描述信息顏色 footerStyle.font = [UIFont systemFontOfSize:12]; // 設置腳描述信息字體 footerStyle.numberOfLines = 0; // 設置腳描述信息多行 section.footerStyle = footerStyle;
三、添加組到表單
UFFormView *formView = [UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .addSection([UFSection makeSection:^(UFSectionMaker * _Nonnull make) { // TODO:設置組樣式 }; }];
或
[formView addSection:section];
四、行UFRow
一、子類
UFRow // 文本 UFSubtitleRow // 子標題 UFTextFieldRow // 單行輸入 UFDatePickerRow // 日期選擇器 UFPickerViewRow // 單項選擇器 UFMultiplePickerViewRow // 多項選擇器 UFAreaPickerRow // 三級地址選擇器 UFCustomPickerViewRow // 自定義選擇器 UFTextViewRow // 多行輸入 UFMobileCodeRow // 手機驗證碼 UFAvatarRow // 頭像 UFRadioGroupRow // 單選 UFSwitchRow // 開關 UFPlateNumberRow // 車牌號碼
二、如何建立行?(常規寫法再也不贅述)
(1)UFRow
UFRow *row = [UFRow makeRow:^(UFRowMaker * _Nonnull make) { make .height(50) // 設置行高 .image([UIImage imageNamed:@"icon"]) // 設置圖標 .title(@"姓名") // 設置標題 .titleStyle([UFRowTitleStyle makeTitleStyle:^(UFRowTitleStyleMaker * _Nonnull make) { make .width(100) // 設置標題寬度,爲了對齊表單 .color([UIColor blackColor]) // 設置標題顏色 .font([UIFont systemFontOfSize:15]) // 設置標題字體 .textAlignment(NSTextAlignmentLeft); // 設置標題對齊方式 }]) // 設置標題樣式 .value(@"陳張利") // 設置默認值 .valueStyle([UFTextStyle makeTextStyle:^(UFRowTextStyleMaker * _Nonnull make) { make .color([UIColor blackColor]) // 設置值顏色 .font([UIFont systemFontOfSize:15]) // 設置值字體 .textAlignment(NSTextAlignmentRight); // 設置值對齊方式 }]) // 設置值樣式 .valueDidChanged(^(__kindof UFRow * _Nonnull row, NSString * _Nonnull value) { // 監聽值得變化 }) .accessoryType(UFRowAccessoryDisclosureIndicator) // 設置行後的附件樣式,如箭頭、對號 .accessoryImage([UIImage imageNamed:@"arrow"]) // 自定義行後的附件圖片,如箭頭、對號 .rowDidSelected(^(__kindof UFRow * _Nonnull row) { // 點擊行事件 }) .name(@"name"); // 行的名稱,可看作時字段的key,惟一值 }];
注:爲使行的右端對齊,你可以使用UFRowAccessorySpace進行佔位。
(2)UFSubtitleRow
UFSubtitleRow *subtitleRow = [UFSubtitleRow makeSubtitleRow:^(UFSubtitleRowMaker * _Nonnull make) { make .subtitle(@"推薦支付寶用戶使用") // 設置子標題 .subtitleStyle([UFRowTitleStyle makeTitleStyle:^(UFRowTitleStyleMaker * _Nonnull make) { make .width(140) // 設置子標題寬度 .font([UIFont systemFontOfSize:12]) // 設置子標題字體 .color([UIColor lightGrayColor]); // 設置子標題顏色 }]) // 設置子標題樣式 .accessoryImage([UIImage imageNamed:@"checked"]) // 自定義行後的附件圖片 .height(80) // 設置行高 .image([UIImage imageNamed:@"alipay"]) // 設置圖標 .title(@"支付寶") // 設置標題 .name(@"pay"); // 其餘屬性再也不贅述,參考UFRow設置 }];
(3)UFAvatarRow
UFAvatarRow *avatarRow = [UFAvatarRow makeAvatarRow:^(UFAvatarRowMaker * _Nonnull make) { make .cornerRadius(30) // 設置頭像圓角,圓角大小決定行高 .avatarImage([UIImage imageNamed:@"touxiang"]) // 設置默認頭像,網絡圖像不設置或加載失敗時,可做爲佔位頭像 .avatarDidSelected(^(__kindof UFAvatarRow * _Nonnull row, UIImageView * _Nonnull avatarView) { // 點擊頭像事件 }) .title(@"頭像") .value(@"http://img0.imgtn.bdimg.com/it/u=2572957358,1108684168&fm=26&gp=0.jpg") // 設置網絡圖片 .accessoryType(UFRowAccessorySpace) .name(@"avatar"); // 其餘屬性再也不贅述,參考UFRow設置 }];
注:UFKit提供了UIViewControlle的選擇圖片的方法
[self ufk_pickerImageForResult:^(UIImage * _Nonnull image) { }];
(4)UFRadioGroupRow
UFRadioGroupRow *radioGroupRow = [UFRadioGroupRow makeRadioGroupRow:^(UFRadioGroupRowMaker * _Nonnull make) { make .itemArray(@[@"男",@"女"]) // 設置選項 .editable(YES) // 是否容許編輯 .radioGroupStyle([UFRadioGroupStyle makeRadioGroupStyle:^(UFRowRadioGroupStyleMaker * _Nonnull make) { make .image([UIImage imageNamed:@"rg_unchecked"]) // 設置默認未選中圖片 .selectedImage([UIImage imageNamed:@"rg_checked"]); // 設置選中圖片 }]) .title(@"性別") .value(@"男") .accessoryType(UFRowAccessorySpace) .name(@"gender"); // 其餘屬性再也不贅述,參考UFRow設置 }];
(5)UFTextFieldRow
UFTextFieldRow *textFieldRow = [UFTextFieldRow makeTextFieldRow:^(UFTextFieldRowMaker * _Nonnull make) { make .limitType(UFInputLimitTypeMobile) // 設置輸入限制 .editable(YES) // 是否容許編輯 .maxLength(11) // 設置最大輸入長度,設置limitType後該屬性可能會不起做用 .keyboardType(UIKeyboardTypeDefault) // 設置鍵盤樣式,設置limitType後該屬性可能會不起做用 .secureTextEntry(NO) // 是否安全輸入 .canPerformAction(YES) // 是否容許粘貼複製 .placeholder(@"請輸入") // 佔位字符,不設置時自動會添加請輸入title .barTintColor([UIColor blackColor]) // 鍵盤上方取消/肯定的顏色 .title(@"聯繫方式") .accessoryType(UFRowAccessorySpace) .name(@"mobile"); // 其餘屬性再也不贅述,參考UFRow設置 }];
注: UFKit提供瞭如下輸入限制樣式,以便限制輸入框內輸入的內容。
typedef NS_ENUM(NSUInteger, UFInputLimitType) { UFInputLimitTypeNone = 0, // 無限制 UFInputLimitTypeMobile, // 手機號碼 UFInputLimitTypeEmail, // 郵箱 UFInputLimitTypeIdCard, // 身份證號 UFInputLimitTypeNumbers, // 數字 UFInputLimitTypeLetters, // 字母 UFInputLimitTypeCapitalLetters, // 大寫字母 UFInputLimitTypeAlphanumeric, // 字母和數字 UFInputLimitTypeFloat, // 浮點數 UFInputLimitTypeMoney, // 金額(2位小數) };
(5)UFMobileCodeRow
UFMobileCodeRow *mobileCodeRow = [UFMobileCodeRow makeCodeRow:^(UFCodeRowMaker * _Nonnull make) { make .codeStyle([UFMobileCodeStyle makeMobileCodeStyle:^(UFMobileCodeStyleMaker * _Nonnull make) { make .backgroundColor([UIColor whiteColor]) // 設置按鈕背景色 .cornerRadius(5) // 設置按鈕圓角 .separatorColor([UIColor lightGrayColor]); // 設置輸入框與按鈕之間分割線的顏色 // 其餘屬性再也不贅述,參考UFRowTextStyleMaker設置 }]) .codeDidClicked(^(__kindof UFMobileCodeRow * _Nonnull row, UIButton * _Nonnull button) { //點擊獲取驗證碼事件 }) .maxLength(4) .limitType(UFInputLimitTypeNumbers) .title(@"驗證碼") .accessoryType(UFRowAccessorySpace) .name(@"code"); // 其餘屬性再也不贅述,參考UFTextFieldRow設置 }];
注:UFKit提供了UIButton的倒計時方法
[button ufk_countDown:60]; // 60s倒計時
(6)UFPickerViewRow
UFPickerViewRow *pickerViewRow = [UFPickerViewRow makePickerViewRow:^(UFPickerViewRowMaker * _Nonnull make) { make .itemArray(@[@"總經辦",@"行政部",@"人力資源部",@"財務部",@"產品部",@"技術部",@"運營部"]) // 設置選項 .title(@"部門") .value(@"技術部") .accessoryType(UFRowAccessoryDisclosureIndicator) .name(@"org"); // 其餘屬性再也不贅述,參考UFTextFieldRow設置 }];
(7)UFAreaPickerRow
UFAreaPickerRow *areaPickerRow = [UFAreaPickerRow makeAreaPickerRow:^(UFAreaPickerRowMaker * _Nonnull make) { make .areaSeparator(@",") // 省市區之間的分割字符 .title(@"地址") .accessoryType(UFRowAccessoryDisclosureIndicator) .name(@"address"); // 其餘屬性再也不贅述,參考UFPickerViewRow設置 }];
(8)UFCustomPickerViewRow
UFCustomPickerViewRow *customPickerRow = [UFCustomPickerViewRow makeCustomPickerViewRow:^(UFCustomPickerViewRowMaker * _Nonnull make) { make. delegate(weakSelf) // 設置代理 .valueDidSelected(^(__kindof UFCustomPickerViewRow * _Nonnull row, UITextField * _Nonnull textField) { // 選擇結束後的肯定事件 }) .title(@"選擇器") .name(@"custom") .accessoryType(UFRowAccessoryDisclosureIndicator);; }];
UFCustomPickerViewRowDelegate
// 列數 - (NSInteger)numberOfComponentsInPickerViewRow:(UFCustomPickerViewRow *)pickerViewRow; // 每列的行數 - (NSInteger)pickerViewRow:(UFCustomPickerViewRow *)pickerViewRow numberOfRowsInComponent:(NSInteger)component; // 行標題 - (NSString *)pickerViewRow:(UFCustomPickerViewRow *)pickerViewRow titleForRow:(NSInteger)row forComponent:(NSInteger)component; // 選中行 - (void)pickerViewRow:(UFCustomPickerViewRow *)pickerViewRow didSelectRow:(NSInteger)row inComponent:(NSInteger)component;
(9)UFMultiplePickerViewRow
UFMultiplePickerViewRow *multiplePickerViewRow = [UFMultiplePickerViewRow makeMultiplePickerViewRow:^(UFMultiplePickerViewRowMaker * _Nonnull make) { make .itemArray(@[@"看電影",@"旅遊",@"看書",@"打遊戲",@"籃球",@"足球",@"其餘"]) // 設置選項 .title(@"愛好") .value(@"打遊戲,其餘") .accessoryType(UFRowAccessoryDisclosureIndicator) .name(@"hobby"); // 其餘屬性再也不贅述,參考UFTextFieldRow設置 }];
(10)UFDatePickerRow
UFDatePickerRow *datePickerRow = [UFDatePickerRow makeDatePickerRow:^(UFDatePickerRowMaker * _Nonnull make) { make .minimumDate(最小時間) // 最小時間 .maximumDate(最大時間) // 最大時間 .datePickerMode(UIDatePickerModeDate) // 時間選擇樣式 .dateFormat(@"yyyy-MM-dd") // 時間格式 .title(@"生日") .value(@"2016-12-12") .accessoryType(UFRowAccessoryDisclosureIndicator) .name(@"birthday"); // 其餘屬性再也不贅述,參考UFTextFieldRow設置 }];
(11)UFPlateNumberRow
UFPlateNumberRow *plateNumberRow = [UFPlateNumberRow makePlateNumberRow:^(UFPlateNumberRowMaker * _Nonnull make) { make .title(@"車牌號") .value(@"魯A12345") .accessoryType(UFRowAccessorySpace) .name(@"plate"); // 其餘屬性再也不贅述,參考UFTextFieldRow設置 }];
(12)UFTextViewRow
UFTextViewRow *textViewRow = [UFTextViewRow makeTextViewRow:^(UFTextViewRowMaker * _Nonnull make) { make .title(@"我的簡介") .value(@"蘋果公司是美國一家高科技公司。由史蒂夫·喬布斯、斯蒂夫·沃茲尼亞克和羅·韋恩等人於1976年4月1日創立,總部位於加利福尼亞州的庫比蒂諾") .accessoryType(UFRowAccessorySpace) .name(@"introduction"); }];
(13)UFSwitchRow
UFSwitchRow *switchRow = [UFSwitchRow makeSwitchRow:^(UFSwitchRowMaker * _Nonnull make) { make .tintColor([UIColor redColor]) // 設置開關顏色 .title(@"免打擾") .value(SWITCH_ON) .accessoryType(UFRowAccessorySpace) .valueDidChanged(^(__kindof UFRow * _Nonnull row, NSString * _Nonnull value) { // 開關事件 }) .name(@"allow"); }];
注:UFKit提供了 SWITCH_ON (開)和 SWITCH_OFF (關)的常量定義
三、如何自定義行
一、繼承UFRow建立其子類
二、繼承UFRowCell建立其子類
三、註冊Row和cell到formView
UFFormView *formView = [UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .registerRow([CustomRow class], [CustomRowCell class]); }];
四、添加行到組
UFSection *section = [UFSection makeSection:^(UFSectionMaker * _Nonnull make) { make .addRow(/*你定義的行*/); }];
五、提交
一、添加提交按鈕
UFActionButton *submitButton = [UFActionButton makeActionButton:^(UFActionButtonMaker * _Nonnull make) { make .titleForState(@"提交", UIControlStateNormal) .titleColorForState([UIColor whiteColor], UIControlStateNormal) .cornerRadius(22) .backgroundColor([UIColor redColor]) .actionButtonClick(^(UFActionButton * _Nonnull button) { // 點擊提交事件 }); }];
[UFFormView makeFormView:^(UFFormViewMaker * _Nonnull make) { make .addSubmitButton(submitButton) .addCancelButton(cancelButton); }];
二、獲取表單數據
[formView toDictionary];
六、依賴
'Masonry', '~> 1.1.0'
'SDWebImage', '~> 5.0.6'
'IQKeyboardManager', '~> 6.3.0'
七、安裝
pod 'UFKit'
八、聯繫方式
QQ:893419255