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 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
View의 레이아웃 방법을 AutoLayout에서 따뜻한 손 계산으로 하면 성능이 9.26배로 된 이야기이 기사는 의 15 일째 기사입니다. 어제는 에서 이었습니다. 손 계산을 권하는 의도는 없고, 특수한 상황하에서 계측한 내용입니다 화면 높이의 10 배 정도의 contentView가있는 UIScrollView 레이아...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.