ReactiveCocoa代碼實踐之-UI組件的RAC信號操作
相關閱讀：
ReactiveCocoa代碼實踐之-RAC網(wǎng)絡請求重構這一節(jié)是自己對網(wǎng)絡層的一些重構，本節(jié)是自己一些代碼小實踐做出的一些demo程序，基本涵蓋大多數(shù)UI控件操作。
一.用UISlider實現(xiàn)調(diào)色板
假設我們現(xiàn)在做一個demo，上面有一個View用來展示顏色，下面有三個UISlider滑竿分別控制RGB的色值，隨著不同滑竿的拖動上面view的顏色會隨之改變。 可以先腦補一下不用RAC該怎么寫。 如果使用RAC只需要將三個信號包裝起來用適當?shù)牟僮骶湍軐崿F(xiàn)。
// 拖線的UI控件
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UISlider *slider;
@property (weak, nonatomic) IBOutlet UISlider *slider;
@property (weak, nonatomic) IBOutlet UISlider *slider;
// viewDidLoad中
// 分別將三個控件的改變都包成一個信號。
RACSignal *s = [[self.slider rac_newValueChannelWithNilValue:@]startWith:@];
RACSignal *s = [[self.slider rac_newValueChannelWithNilValue:@]startWith:@];
RACSignal *s = [[self.slider rac_newValueChannelWithNilValue:@]startWith:@];
RACSignal *threeSignal = [RACSignal combineLatest:@[s,s,s] reduce:^id(NSNumber* value,NSNumber* value,NSNumber* value){
return @[value,value,value];
}];
// 監(jiān)聽這個"合成"后的信號，改變view的顏色
[threeSignal subscribeNext:^(NSArray *arr) {
self.topView.backgroundColor = [UIColor colorWithRed:[arr[] doubleValue] green:[arr[] doubleValue] blue:[arr[] doubleValue] alpha:];
}];
上面的startWith:@0需要注意，如果不加這個初始值那必須在三個滑竿都動一下才能顯示顏色。 上面使用的方法時UISlider專屬的，也可以用下面的方法寫，這個是UIControl的方法會支持更多其他UI控件。
RACSignal *s1 = [[[self.slider1 rac_signalForControlEvents:UIControlEventValueChanged] map:^id(id value) {
return @(self.slider1.value);
}] startWith:@0];
二.簡潔代碼實現(xiàn)登錄邏輯
在UI控件中難點不多，但是值得注意的就是各種狀態(tài)的多級管理，如果哪里疏忽了就很容易造成bug，這也就導致很多地方有判斷結構，并且各種來回賦值。 假設現(xiàn)在需要做一個登錄框，有賬號密碼和同意條款三項，必須滿足賬號密碼大于2位且選擇了同意，才允許注冊。 舊的寫法非常麻煩，還需要監(jiān)聽valueChange事件等。如果用RAC只需要寫如下代碼：
@property (weak, nonatomic) IBOutlet UITextField *accountTxt;
@property (weak, nonatomic) IBOutlet UITextField *pwdTxt;
@property (weak, nonatomic) IBOutlet SXSwitch *agreeSw; // 同意條款
@property (weak, nonatomic) IBOutlet UIButton *loginBtn; // 注冊按鈕
// viewDidLoad方法
self.loginBtn.enabled = NO;
RAC(self.loginBtn , enabled) = [RACSignal combineLatest:@[self.accountTxt.rac_textSignal , self.pwdTxt.rac_textSignal, self.agreeSw.rac_newOnChannel] reduce:^(NSString *account, NSString *pwd, NSNumber *isOn){
return @((account.length > )&&(pwd.length >)&&[isOn boolValue]);
}];
這其中combineLatest數(shù)組中用的都是控件專屬的信號， 也可以使用RAC(self.agreeSw, on) 這種寫法直接把某一個屬性的狀態(tài)用信號傳過來。但是這里需要注意：假設你監(jiān)聽了A類的B屬性時，只有走了B屬性的set方法才會被監(jiān)聽捕獲，如果是通過其他方法修改的屬性值則無效。 比如UISwitch的來回撥動過程中并沒有走on這個屬性的set方法。
三.通過interval方法實現(xiàn)時鐘
這是一種默認循環(huán)的方法，除非你通過控制Disposable把他禁了。 interval這個方法就是傳入一個參數(shù)是間隔時間，然后內(nèi)部每隔這一段時間就發(fā)一個[NSDate date]的對象，然后block內(nèi)部把這個date設置一個格式以字符串的方法返回。
RAC(self, timeLabel.text) = [[[RACSignal interval: onScheduler:[RACScheduler currentScheduler]] startWith:[NSDate date]] map:^id (NSDate *value) {
NSDateComponents *dateComponents = [[NSCalendar currentCalendar] components:NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond fromDate:value];
return [NSString stringWithFormat:@"%ld:%ld:%ld", (long)dateComponents.hour, (long)dateComponents.minute, (long)dateComponents.second];
}];
四.其他控件事件操作
除了上面的UIButton，UISlider，UIControl的分類方法還有很多操作
UISegmentedControl (RACSignalSupport)分類就為此控件提供了便捷處理方法，相比于常規(guī)的監(jiān)聽seg的元素點擊事件，再取出當前選中的index。RACSignal可以直接得到需要的值
[[self.seg rac_newSelectedSegmentIndexChannelWithNilValue:@]subscribeNext:^(id x) {
// 返回的基本數(shù)據(jù)類型都被裝包成NSNumber，可在此做一些判斷操作
NSLog(@"selectIndex-%@",x);
}];
UIDatePicker (RACSignalSupport)分類為時間選擇框封裝了一個操作，每當選框改變時返回NSDate類型
[[picker rac_newDateChannelWithNilValue:[NSDate date]]subscribeNext:^(NSDate *x) {
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
dateFormatter.dateFormat = @"HH:mm";
dateFormatter.locale = [[NSLocale alloc] initWithLocaleIdentifier:@"zh_CN"];
NSString *dateStr = [dateFormatter stringFromDate:x];
}];
如果在這里給控件賦值，每一次改動都會讓展示控件的值更新，如果有的設計不希望這么頻繁只有在點擊確認后再將時間顯示可以根據(jù)自己喜好自行賦值。
除此這些還有很多UI控件綁定的方法 UIAlertView (RACSignalSupport) 里面就提供了一些方法比如點擊彈窗按鈕可以在subscribeNext里統(tǒng)一處理各個按鈕的點擊事件。 但是現(xiàn)在UIAlertView已被UIAlertController取代所以，UIAlertView和UIActionSheet這里可以忽略不提。
五.生命周期相關操作
UITableView和UICollectionView的Cell都有重用的機制，如果給這個Cell綁定了一些監(jiān)聽，那這個Cell被重用它子控件的監(jiān)聽該何去何從？UITableViewCell (RACSignalSupport)、UICollectionReusableView (RACSignalSupport)這兩個分類里提供了即將重用時的信號rac_prepareForReuseSignal
做過兩個類似的場景，一個是tableView的cell回復按鈕點擊會跳到回復頁，一個是collection的item內(nèi)有個按鈕點擊就變顏色。
// UITableViewDataSource
- (UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
SXFeedbackCell * cell = [tableView dequeueReusableCellWithIdentifier:@"SXFeedbackCell"];
@weakify(self)
[[[cell.replyButton rac_signalForControlEvents:UIControlEventTouchUpInside] takeUntil:cell.rac_prepareForReuseSignal]
subscribeNext:^(UIButton *x) {
@strongify(self)
// 處理一些其他邏輯
[self.navigationController pushViewController:[SXReplyPage new] animated:YES];
}];
return cell;
}
// UICollectionViewDataSource
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithIdentifier:@"SXDownloadCell"];
[[[cell.changeBtn rac_signalForControlEvents:UIControlEventTouchUpInside] takeUntil:cell.rac_prepareForReuseSignal]
subscribeNext:^(UIButton *x) {
cell.backgroundColor = [UIColor grayColor];
}];
return cell;
}
其中takeUntil操作是監(jiān)聽某個事件直到什么時候結束。當這個cell即將重用時rac_prepareForReuseSignal到來會觸發(fā)disposable信號結束監(jiān)聽。
非重用類型的控件的生命周期可以用rac_willDeallocSignal 信號監(jiān)聽，但是在開發(fā)中很少會用到此信號，因為大多是信號操作的內(nèi)部代碼里都幫你做了這個操作，即監(jiān)聽一個事件直到自己結束時停止監(jiān)聽。
// rac_textSignal源碼
- (RACSignal *)rac_textSignal {
@weakify(self);
return [[[[[RACSignal
defer:^{
@strongify(self);
return [RACSignal return:self];
}]
concat:[self rac_signalForControlEvents:UIControlEventAllEditingEvents]]
map:^(UITextField *x) {
return x.text;
}]
takeUntil:self.rac_willDeallocSignal]
setNameWithFormat:@"%@ -rac_textSignal", self.rac_description];
}
// rac_signalForControlEvents源碼
- (RACSignal *)rac_signalForControlEvents:(UIControlEvents)controlEvents {
@weakify(self);
return [[RACSignal
createSignal:^(id<RACSubscriber> subscriber) {
@strongify(self);
[self addTarget:subscriber action:@selector(sendNext:) forControlEvents:controlEvents];
[self.rac_deallocDisposable addDisposable:[RACDisposable disposableWithBlock:^{
[subscriber sendCompleted];
}]];
return [RACDisposable disposableWithBlock:^{
@strongify(self);
[self removeTarget:subscriber action:@selector(sendNext:) forControlEvents:controlEvents];
}];
}]
setNameWithFormat:@"%@ -rac_signalForControlEvents: %lx", self.rac_description, (unsigned long)controlEvents];
}
關于ReactiveCocoa代碼實踐之-UI組件的RAC信號操作就給大家介紹這么多，希望對大家有所幫助！
相關文章
本文主要介紹了React?State?原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
使用Axios在React中請求數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了初學React,如何規(guī)范的在react中請求數(shù)據(jù),主要介紹了使用axios進行簡單的數(shù)據(jù)獲取,加入狀態(tài)變量,優(yōu)化交互體驗,自定義hook進行數(shù)據(jù)獲取和使用useReducer改造請求,本文主要適合于剛接觸React的初學者以及不知道如何規(guī)范的在React中獲取數(shù)據(jù)的人2023-09-09
近年來，隨著移動端對數(shù)據(jù)可視化的要求越來越高，通過 WebView 在移動端使用 Echarts 這樣功能強大的前端數(shù)據(jù)可視化庫，是解決問題的好辦法。下面就和小編來一起學習一下吧2019-05-05
這篇文章主要介紹了React事件處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
React Native 使用Fetch發(fā)送網(wǎng)絡請求的示例代碼
本篇文章主要介紹了React Native 使用Fetch發(fā)送網(wǎng)絡請求的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
React中useCallback useMemo到底該怎么用
在React函數(shù)組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2023-02-02
這篇文章主要介紹了淺談React前后端同構防止重復渲染，首先解釋React前后端同構、React首屏渲染的概念。然后通過這2個概念解決服務端渲染完成后瀏覽器端重復渲染的問題。有興趣的可以了解一下2018-01-01
useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關于React中useState的使用方法及注意事項的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
React-Hook中使用useEffect清除定時器的實現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時器，需要的朋友可以參考下2022-11-11