這周做完了任務篩選功能。花了半小時把篩選視圖做成了一個小控件方便以后使用。
實際項目效果圖如下
屏幕快照 2018-07-12 上午10.03.58.png
開源控件效果
屏幕快照 2018-07-12 上午10.04.11.png
支持手勢側滑,且view的frame和遮罩的alpha值跟隨手勢變化。
使用非常簡單。導入頭文件。
#import "SideBarView.h"
類方法調用
[SideBarView show];
篩選列表(FilterConditionView)是我單獨封裝的一個視圖,可以根據項目需要替換自己的視圖。其實如果你只需要側欄滑動效果的視圖,用SideBarView即可。
Snip20170422_9.png
簡單說一下代碼
基于UIView的基礎動畫實現視圖的淡入淡出效果,并且對子視圖和父視圖添加手勢和KVO監聽。
-(void)addSubViews{
[self addSubview:self.coverView];
[self addSubview:self.filterView];
[UIView animateWithDuration:0.25 animations:^{
self.coverView.alpha = 0.4;
self.filterView.x = SCREENW - 300;
}];
//給整個視圖添加滑動手勢
UIPanGestureRecognizer *pan=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panEvent:)];
pan.delegate = self;
[self addGestureRecognizer:pan];
//給遮罩視圖添加輕觸手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapEvent)];
[self.coverView addGestureRecognizer:tap];
//給篩選視圖添加KVO監聽其x值的變化
[self.filterView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
}
手勢和KVO的監聽方法
#pragma mark - private Methods
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{//監聽篩選列表的x值變化
if ([keyPath isEqualToString:@"frame"]) {
CGRect new = [change[@"new"] CGRectValue];
CGFloat x = new.origin.x;
if (x < SCREENW) {
self.coverView.alpha = 0.4*(1-x/SCREENW)+0.1;
}else{
self.coverView.alpha = 0.0;
}
}
}
- (void)panEvent:(UIPanGestureRecognizer *)recognizer{//監聽手指的移動
CGPoint translation = [recognizer translationInView:self];
if(UIGestureRecognizerStateBegan == recognizer.state || UIGestureRecognizerStateChanged == recognizer.state){
if (translation.x > 0 ) {//右滑
self.filterView.x = SCREENW-300 + translation.x;
}else{//左滑
if (self.filterView.x < SCREENW-300) {
self.filterView.x = self.filterView.x - translation.x;
}else{
self.filterView.x = SCREENW-300;
}
}
}else{
[self tapEvent];
}
}
- (void)tapEvent{//監聽手指的輕觸
[UIView animateWithDuration:0.25 animations:^{
self.coverView.alpha = 0.0;
self.filterView.x = SCREENW;
} completion:^(BOOL finished) {
[self removeAllSubviews];
[self removeFromSuperview];
}];
}
- (void)removeAllSubviews {
while (self.subviews.count) {
UIView* child = self.subviews.lastObject;
[child removeFromSuperview];
}
}
點擊遮罩,或者左右滑動,視圖都會自動消失,銷毀view無需調用方法,都完全封裝了。所有效果的呈現你只需要調用一個show方法即可。
這里的清空指的是清空列表中的所有選中的篩選條件及搜索框輸入的關鍵字,回到一個清零的篩選狀態。完成是指根據列表中的所有篩選條件進行篩選。
小小吐槽一下項目需求,雖然控件開發起來非常簡單。但是做這個功能卻用5個工作日。因為這里的數據處理非常麻煩。一般的多級篩選是交集,我的項目需求居然是并集,篩選條件越多,得出的結果越多,所有符合條件的結果都要展現。并且列出的篩選條件都是當前用戶所用到的東西。此外各個篩選條件數據處理起來也非常麻煩。做移動OA開發,最惡心的就是數據處理。很多時候,你會感覺你是在做后臺開發.....