Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@iritec

Tinder風のUIを作れるMDCSwipeToChooseの使い方

More than 5 years have passed since last update.

Tinder風のUIというのは下のようなもので、フリックで操作できるUIのことです。この動きを簡単に作ることができるMDCSwipeToChooseというライブラリがあります。

alt

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

使いやすくて応用の効くライブラリですので、使いどころがあれば使いたいです。

16
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
iritec
プログラミングのメンターサービスMENTAをつくってます http://menta.work / 個人開発コミュニティ「入江開発室」を運営(約100名) / WEB制作会社→フリー→法人化→受託をやめてサービスに専念

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?