Tinder風のUIというのは下のようなもので、フリックで操作できるUIのことです。この動きを簡単に作ることができるMDCSwipeToChooseというライブラリがあります。
CocoaPodsでインストール
pod "MDCSwipeToChoose"
単体での動かし方
view.m
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>
// ... in a view controller
#pragma mark - Creating and Customizing a MDCSwipeToChooseView
- (void)viewDidLoad {
[super viewDidLoad];
// You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions.
MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptions new];
options.delegate = self;
options.likedText = @"Keep";
options.likedColor = [UIColor blueColor];
options.nopeText = @"Delete";
options.onPan = ^(MDCPanState *state){
if (state.thresholdRatio == 1.f && state.direction == MDCSwipeDirectionLeft) {
NSLog(@"Let go now to delete the photo!");
}
};
MDCSwipeToChooseView *view = [[MDCSwipeToChooseView alloc] initWithFrame:self.view.bounds
options:options];
view.imageView.image = [UIImage imageNamed:@"photo"];
[self.view addSubview:view];
}
#pragma mark - MDCSwipeToChooseDelegate Callbacks
// This is called when a user didn't fully swipe left or right.
- (void)viewDidCancelSwipe:(UIView *)view {
NSLog(@"Couldn't decide, huh?");
}
// Sent before a choice is made. Cancel the choice by returning `NO`. Otherwise return `YES`.
- (BOOL)view:(UIView *)view shouldBeChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
return YES;
} else {
// Snap the view back and cancel the choice.
[UIView animateWithDuration:0.16 animations:^{
view.transform = CGAffineTransformIdentity;
view.center = [view superview].center;
}];
return NO;
}
}
// This is called then a user swipes the view fully left or right.
- (void)view:(UIView *)view wasChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
NSLog(@"Photo deleted!");
} else {
NSLog(@"Photo saved!");
}
}
複数の画像を非同期で読み込んでみる
view.m
- (void)viewDidLoad {
[super viewDidLoad];
//読み込む画像のURL
picurl=[NSArray arrayWithObjects:@"http://xxxx.jpg", @"http://xxxx.jpg",@"http://xxxx.jpg", nil];
[self local_picLoad:@"end"]; //最後に表示するローカル画像
[self picLoad:picurl]; //urlから非同期で画像を読み込む
}
//picture load
-(void)picLoad:(NSArray *)urls
{
for (int i=0; i<[urls count]; i++) {
//MDCSwipeToChooseViewのオプション設定と作成
MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptions new];
options.delegate = self;
options.likedText = @"Keep";
options.likedColor = [UIColor blueColor];
options.nopeText = @"Delete";
options.onPan = ^(MDCPanState *state){
if (state.thresholdRatio == 1.f && state.direction == MDCSwipeDirectionLeft) {
NSLog(@"Let go now to delete the photo!");
}
};
MDCSwipeToChooseView *mdview = [[MDCSwipeToChooseView alloc] initWithFrame:self.view.bounds options:options];
//addsubview読み込んだ画像をのせる
long int cnt = [urls count]-1;
NSString *imageURL = [urls objectAtIndex:(cnt-i)];
dispatch_queue_t q_global = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_queue_t q_main = dispatch_get_main_queue();
//一旦viewだけ作っている
mdview.imageView.image = [UIImage imageNamed:@"load"];
[self.view addSubview:mdview];
dispatch_async(q_global, ^{
UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString: imageURL]]];
dispatch_async(q_main, ^{
mdview.imageView.image = img;
});
});
}
}
//ローカル画像の読み込み
-(void)local_picLoad:(NSString *)url
{
UIImageView *iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:url]];
iv.frame = self.view.bounds;
[self.view addSubview:iv];
}
#pragma mark - MDCSwipeToChooseDelegate Callbacks
// This is called when a user didn't fully swipe left or right.
- (void)viewDidCancelSwipe:(UIView *)view {
NSLog(@"Couldn't decide, huh?");
}
// Sent before a choice is made. Cancel the choice by returning `NO`. Otherwise return `YES`.
- (BOOL)view:(UIView *)view shouldBeChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
NSLog(@"yes");
return YES;
} else {
NSLog(@"no");
// Snap the view back and cancel the choice.
[UIView animateWithDuration:0.16 animations:^{
view.transform = CGAffineTransformIdentity;
view.center = [view superview].center;
}];
return NO;
}
}
// This is called then a user swipes the view fully left or right.
- (void)view:(UIView *)view wasChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
NSLog(@"Photo deleted!");
} else {
NSLog(@"Photo saved!");
}
}
@end
使いやすくて応用の効くライブラリですので、使いどころがあれば使いたいです。