iOS 自定義拖拽式控件：QiDragView

級(jí)別： ★★☆☆☆
標(biāo)簽：「iOS」「拖拽式控件」「QiDragView」
作者： MrLiuQ
審校： QiShare團(tuán)隊(duì)

首先，我們先看一下QiDragView的效果圖：

一、QiDragView整體架構(gòu)設(shè)計(jì)

話不多說，上架構(gòu)圖~

QiDragView（QiDragSortView的簡(jiǎn)稱）是一種可選擇可拖拽的自定義控件，可以滿足一些拖拽排序的業(yè)務(wù)需求場(chǎng)景。

二、如何自定義使用QiDragView？

在上Demo之前，先介紹幾個(gè)可以自定義的UI配置屬性：

屬性 類型 介紹
rowHeight CGFloat 行高
rowMargin CGFloat 行邊距
rowPadding CGFloat 行間距
columnMargin CGFloat 列邊距
columnPadding CGFloat 列間距
columnCount NSInteger 列數(shù)
normalColor UIColor 按鈕基本字體顏色
selectedColor UIColor 按鈕選擇字體顏色

以及一些邏輯配置屬性：

屬性 類型 介紹
enabledTitles NSArray<NSString *> 可以被點(diǎn)擊的titles（上行參數(shù)，默認(rèn)全選）
selectedTitles NSArray<NSString *> 可以被選擇的titles（上行參數(shù)，默認(rèn)全選）
titles NSArray<NSString *> 按鈕的titles（上行參數(shù)，會(huì)根據(jù)titles，創(chuàng)建出對(duì)應(yīng)的button）

使用起來(lái)也很方便：

  • 直接設(shè)置titles即可創(chuàng)建出對(duì)應(yīng)title的Buttons。
  • 通過dragSortEnded的block方法回調(diào)，處理拖拽后的業(yè)務(wù)邏輯：按鈕的排序、按鈕是否選擇等屬性

默認(rèn)配置用法：

QiDragSortView *dragSortView = [[QiDragSortView alloc] initWithFrame:CGRectMake(.0, 100.0, self.view.bounds.size.width, .0)];
dragSortView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.5];

dragSortView.titles = @[@"首頁(yè)推薦", @"奇舞周刊", @"眾成翻譯", @"QiShare", @"HULK一線雜談", @"Qtest之道"];//!< 初始的Buttons（必填）
[self.view addSubview:dragSortView];

//! 拖拽方法回調(diào)：能拿到Button數(shù)組的排序和選擇狀態(tài)
dragSortView.dragSortEnded = ^(NSArray<UIButton *> * _Nonnull buttons) {
    for (UIButton *button in buttons) {
        NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected);
    }
};

自定義配置用法：

QiDragSortView *dragSortView = [[QiDragSortView alloc] initWithFrame:CGRectMake(.0, 100.0, self.view.bounds.size.width, .0)];
dragSortView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.5];
dragSortView.rowHeight = 50.0;
dragSortView.rowMargin = 30.0;
dragSortView.rowPadding = 20.0;
dragSortView.columnCount = 3;
dragSortView.columnMargin = 30.0;
dragSortView.columnPadding = 20.0;
dragSortView.normalColor = [UIColor redColor];
dragSortView.selectedColor = [UIColor purpleColor];
dragSortView.enabledTitles = @[@"奇舞周刊", @"眾成翻譯", @"QiShare", @"HULK一線雜談", @"Qtest之道"];//!< 可以點(diǎn)擊選擇的Buttons（選填，默認(rèn)全選）
dragSortView.selectedTitles = @[@"首頁(yè)推薦", @"HULK一線雜談", @"Qtest之道"];//!< 初始選擇的Buttons（選填，默認(rèn)全選）
dragSortView.titles = @[@"首頁(yè)推薦", @"奇舞周刊", @"眾成翻譯", @"QiShare", @"HULK一線雜談", @"Qtest之道"];//!< 初始的Buttons（必填）
[self.view addSubview:dragSortView];

//! 拖拽方法回調(diào)：能拿到Button數(shù)組的排序和選擇狀態(tài)
dragSortView.dragSortEnded = ^(NSArray<UIButton *> * _Nonnull buttons) {
    for (UIButton *button in buttons) {
        NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected);
    }
};

三、QiDragView的技術(shù)點(diǎn)

3.1 長(zhǎng)按手勢(shì)：

長(zhǎng)按手勢(shì)分別對(duì)應(yīng)三種狀態(tài)：UIGestureRecognizerStateBegan、UIGestureRecognizerStateChanged、UIGestureRecognizerStateEnded。

狀態(tài) 說明
UIGestureRecognizerStateBegan 長(zhǎng)按手勢(shì)開始
UIGestureRecognizerStateChanged 長(zhǎng)按手勢(shì)拖拽中（進(jìn)行時(shí)）
UIGestureRecognizerStateEnded 長(zhǎng)按手勢(shì)結(jié)束 
//! 長(zhǎng)按手勢(shì)
- (void)longPress:(UILongPressGestureRecognizer *)gesture {
    
    UIButton *currentButton = (UIButton *)gesture.view;
    
    if (gesture.state == UIGestureRecognizerStateBegan) {
        
        [self bringSubviewToFront:currentButton];
        
        [UIView animateWithDuration:.25 animations:^{
            self.originButtonCenter = currentButton.center;
            self.originGesturePoint = [gesture locationInView:currentButton];
            currentButton.transform = CGAffineTransformScale(currentButton.transform, 1.2, 1.2);
        }];
    }
    else if (gesture.state == UIGestureRecognizerStateEnded) {
        
        [UIView animateWithDuration:.25 animations:^{
            currentButton.center = self.originButtonCenter;
            currentButton.transform = CGAffineTransformIdentity;
        } completion:^(BOOL finished) {
            if (self.dragSortEnded) {
                self.dragSortEnded(self.buttons);
            }
        }];
    }
    else if (gesture.state == UIGestureRecognizerStateChanged) {
        
        CGPoint gesturePoint = [gesture locationInView:currentButton];
        CGFloat deltaX = gesturePoint.x - _originGesturePoint.x;
        CGFloat deltaY = gesturePoint.y - _originGesturePoint.y;
        currentButton.center = CGPointMake(currentButton.center.x + deltaX, currentButton.center.y + deltaY);
        
        NSInteger fromIndex = currentButton.tag;
        NSInteger toIndex = [self toIndexWithCurrentButton:currentButton];
        
        if (toIndex >= 0) {
            currentButton.tag = toIndex;
            
            if (toIndex > fromIndex) {
                for (NSInteger i = fromIndex; i < toIndex; i++) {
                    UIButton *nextButton = _buttons[i + 1];
                    CGPoint tempPoint = nextButton.center;
                    [UIView animateWithDuration:.5 animations:^{
                        nextButton.center = self.originButtonCenter;
                    }];
                    _originButtonCenter = tempPoint;
                    nextButton.tag = i;
                }
            }
            else if (toIndex < fromIndex) {
                for (NSInteger i = fromIndex; i > toIndex; i--) {
                    UIButton *previousButton = self.buttons[i - 1];
                    CGPoint tempPoint = previousButton.center;
                    [UIView animateWithDuration:.5 animations:^{
                        previousButton.center = self.originButtonCenter;
                    }];
                    _originButtonCenter = tempPoint;
                    previousButton.tag = i;
                }
            }
            [_buttons sortUsingComparator:^NSComparisonResult(UIButton *obj1, UIButton *obj2) {
                return obj1.tag > obj2.tag;
            }];
        }
    }
}

3.2 配置按鈕：

設(shè)計(jì)思路：在屬性titles的setter方法中，初始化并配置好各個(gè)Buttons。

- (void)setTitles:(NSArray<NSString *> *)titles {
    
    _titles = titles;
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.01 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        NSInteger differCount = titles.count - self.buttons.count;
        
        if (differCount > 0) {
            for (NSInteger i = self.buttons.count; i < titles.count; i++) {
                [self.buttons addObject:[self buttonWithTag:i]];
            }
        }
        else if (differCount < 0) {
            NSArray *extraButtons = [self.buttons subarrayWithRange:(NSRange){titles.count, self.buttons.count - titles.count}];
            [self.buttons removeObjectsInArray:extraButtons];
            for (UIButton *button in extraButtons) {
                [button removeFromSuperview];
            }
        }
        
        self.enabledTitles = self.enabledTitles ?: titles;//!< 如果有，就傳入，否則傳入titles
        self.selectedTitles = self.selectedTitles ?: titles;
        
        for (NSInteger i = 0; i < self.buttons.count; i++) {
            [self.buttons[i] setTitle:titles[i] forState:UIControlStateNormal];
            [self.buttons[i] addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)]];//!< 長(zhǎng)按手勢(shì)
            [self selectButton:self.buttons[i] forStatus:[self.selectedTitles containsObject:titles[i]]];
            if ([self.enabledTitles containsObject:titles[i]]) {
                [self.buttons[i] addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
            }
        }
        
        for (NSInteger i = 0; i < self.buttons.count; i++) {
            NSInteger rowIndex = i / self.columnCount;
            NSInteger columnIndex = i % self.columnCount;
            CGFloat buttonWidth = (self.bounds.size.width - self.columnMargin * 2 - self.columnPadding * (self.columnCount - 1))  / self.columnCount;
            CGFloat buttonX = self.columnMargin + columnIndex * (buttonWidth + self.columnPadding);
            CGFloat buttonY = self.rowMargin + rowIndex * (self.rowHeight + self.rowPadding);
            self.buttons[i].frame = CGRectMake(buttonX, buttonY, buttonWidth, self.rowHeight);
        }
        
        CGRect frame = self.frame;
        NSInteger rowCount = ceilf((CGFloat)self.buttons.count / (CGFloat)self.columnCount);
        frame.size.height = self.rowMargin * 2 + self.rowHeight * rowCount  + self.rowPadding * (rowCount - 1);
        self.frame = frame;
    });
}

源碼地址：QiDragView

推薦文章：
iOS Wireshark抓包
iOS Charles抓包
初探TCP
IP、UDP初探

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容