iOS 서랍 효과 개발 사례 공유

본 논문 의 사례 는 iOS 서랍 효과 개발 사례 를 공유 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
창 에 표시 되 는 컨트롤 러 에 view 세 개 추가(한쪽 으로 만 미 끄 러 지면 view 2 개 만 추가)
먼저 세 개의 view 를 성명 합 니 다.

#import "ViewController.h"
 
@interface ViewController ()
@property(nonatomic, weak) UIView *mainV;
@property(nonatomic, weak) UIView *leftV;
@property(nonatomic, weak) UIView *rightV;
@end

컨트롤 러 view 에 view 추가

#pragma mark -      
- (void)setUpChildViews {  
 UIView *leftV = [[UIView alloc]initWithFrame:self.view.bounds];  
 leftV.backgroundColor = [UIColor orangeColor];  
 [self.view addSubview:leftV];  
 _leftV = leftV;  
 UIView *rightV = [[UIView alloc]initWithFrame:self.view.bounds];  
 rightV.backgroundColor = [UIColor groupTableViewBackgroundColor];  
 [self.view addSubview:rightV];  
 _rightV = rightV;  
 UIView *mainV = [[UIView alloc]initWithFrame:self.view.bounds];  
 mainV.backgroundColor = [UIColor yellowColor];  
 [self.view addSubview:mainV];  
 _mainV = mainV;
}
 
- (void)viewDidLoad {
 [super viewDidLoad];
  
 //     
 [self setUpChildViews];
  
 //  Pan  
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  
 [self.view addGestureRecognizer:pan];
  
 //      ，                   
 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap)];
  
 [self.view addGestureRecognizer:tap];
  
}

#pragma mark -       
#define targetL -230
#define targetR 200
#define screenW [UIScreen mainScreen].bounds.size.width
- (void)pan:(UIPanGestureRecognizer *)pan {
  
 //         
 CGPoint tranP = [pan translationInView:self.view];
  
 //  x    
 CGFloat offsetX = tranP.x;
  
 //  mainV frame
 _mainV.frame = [self frameWithOffsetX:offsetX];
  
 //  mainV x    0
 [self observeValueForKeyPath:nil ofObject:nil change:nil context:nil];
  
 //  
 [pan setTranslation:CGPointZero inView:self.view];
  
 //          ，  
 if (pan.state == UIGestureRecognizerStateEnded) {
   
  CGFloat target = 0;
   
  if (_mainV.frame.origin.x > screenW * 0.5) {
   //     
   target = targetR;
  }else if(CGRectGetMaxX(_mainV.frame) < screenW * 0.5) {
   //     
   target = targetL;
  }
   
  //  X         
  CGFloat offsetX = target - _mainV.frame.origin.x;
   
  [UIView animateWithDuration:0.25 animations:^{
    
   _mainV.frame = target == 0 ? self.view.bounds : [self frameWithOffsetX:offsetX];
 
  }];
   
 }
  
}

- (void)tap {
  
 [UIView animateWithDuration:0.25 animations:^{
  _mainV.frame = self.view.bounds;
 }];
  
}

#define kMaxY 80
#pragma mark -   offsetX  mainV frame
- (CGRect)frameWithOffsetX:(CGFloat)offsetX {
  
 //      frame
 CGRect frame = _mainV.frame;
  
 //       
 CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
  
 //       
 //CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
  
 //X       Y        
 CGFloat offsetY = offsetX * kMaxY / screenW;
  
 //        
 CGFloat preH = frame.size.height;
  
 //        
 CGFloat preW = frame.size.width;
  
 //      
 CGFloat curH = preH - 2 * offsetY;
 //       
 if(frame.origin.x < 0) {
  curH = preH + 2 * offsetY;
 }
  
 //         
 CGFloat scale = curH / preH;
  
 //      
 CGFloat curW = preW * scale;
  
 //    x
 frame.origin.x += offsetX;
  
 //    y
 CGFloat y = (screenH - curH) / 2;
 frame.origin.y = y;
  
 frame.size.width = curW;
 frame.size.height = curH;
  
 return frame;
  
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
  
 if(_mainV.frame.origin.x > 0) {//     
  _rightV.hidden = YES;
 }else if(_mainV.frame.origin.x < 0) {//     
  _rightV.hidden = NO;
 }
  
}

mainV 메 인 보기에 tableView 를 표시 하려 면 TableView Controller 를 새로 만 들 고 이 안에 tableView 의 데 이 터 를 표시 합 니 다.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 
 return 30;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  
  
 static NSString *ID = @"cell";
  
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
  
 if(cell == nil) {
  cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
 }
  
 cell.textLabel.text = [NSString stringWithFormat:@" %ld ", indexPath.row];
  
 return cell;
}

storyboard 에 표 시 된 컨트롤 러 XXMainViewController 를 만 들 고 서랍 효 과 를 실현 한 ViewController 를 계승 하 며 storyboard 에서 class 를 이 제어 의 유형 으로 바 꾸 고 table View 를 표시 하 는 제어 도 그의 하위 컨트롤 러 로 바 꿉 니 다.

- (void)viewDidLoad {
 [super viewDidLoad];
  
 XXViewController *vc = [[XXViewController alloc]init];
 vc.view.frame = self.view.bounds;
  
 // vc             
 [self addChildViewController:vc];
  
 //     tableView
 [self.mainV addSubview:vc.view];
  
}

XXMainViewController 에서 mainV 에 만 접근 할 수 있 고 값 을 수정 할 수 없 기 때문에 하위 컨트롤 의 view 를 ViewController.h 에 노출 시 키 고 read-only 를 추가 합 니 다.

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController
@property(nonatomic, weak, readonly) UIView *mainV;
@property(nonatomic, weak, readonly) UIView *leftV;
@property(nonatomic, weak, readonly) UIView *rightV;
@end

실행 효과 그림:

이상 은 본 고의 모든 내용 입 니 다.iOS 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.