iOS 自定義拖拽式控制元件：QiDragView

iOS開發 · 發表 2019-02-14 17:16:04

摘要：級別： ★☆☆☆☆ 標籤：「iOS」「拖拽式控制元件」「QiDragView」作者：MrLiuQ 審校：QiShare團隊首先，我們先看一下QiDragView的效果圖：一、QiDragView整體架構設計話不多說，上架構圖~ ...

級別： ★☆☆☆☆

標籤：「iOS」「拖拽式控制元件」「QiDragView」

作者：MrLiuQ

審校：QiShare團隊

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

一、QiDragView整體架構設計

話不多說，上架構圖~

QiDragView（QiDragSortView的簡稱）是一種可選擇可拖拽的自定義控制元件，可以滿足一些拖拽排序的業務需求場景。

二、如何自定義使用QiDragView？

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

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

以及一些邏輯配置屬性：

屬性	型別	介紹
enabledTitles	NSArray<NSString *>	可以被點選的titles（上行引數，預設全選）
selectedTitles	NSArray<NSString *>	可以被選擇的titles（上行引數，預設全選）
titles	NSArray<NSString *>	按鈕的 titles （上行引數，會根據titles，創建出對應的button）

使用起來也很方便：

dragSortEnded

預設配置用法：

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

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

//! 拖拽方法回撥：能拿到Button陣列的排序和選擇狀態
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之道"];//!< 可以點選選擇的Buttons（選填，預設全選）
dragSortView.selectedTitles = @[@"首頁推薦", @"HULK一線雜談", @"Qtest之道"];//!< 初始選擇的Buttons（選填，預設全選）
dragSortView.titles = @[@"首頁推薦", @"奇舞週刊", @"眾成翻譯", @"QiShare", @"HULK一線雜談", @"Qtest之道"];//!< 初始的Buttons（必填）
[self.view addSubview:dragSortView];

//! 拖拽方法回撥：能拿到Button陣列的排序和選擇狀態
dragSortView.dragSortEnded = ^(NSArray<UIButton *> * _Nonnull buttons) {
for (UIButton *button in buttons) {
NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected);
}
};
複製程式碼

三、QiDragView的技術點

3.1 長按手勢：

長按手勢分別對應三種狀態： UIGestureRecognizerStateBegan 、 UIGestureRecognizerStateChanged 、 UIGestureRecognizerStateEnded 。

狀態	說明
UIGestureRecognizerStateBegan	長按手勢開始
UIGestureRecognizerStateChanged	長按手勢拖拽中（進行時）
UIGestureRecognizerStateEnded	長按手勢結束

//! 長按手勢
- (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 配置按鈕：

設計思路：在屬性titles的 setter 方法中，初始化並配置好各個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:)]];//!< 長按手勢
[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

小編微信：可加並拉入《QiShare技術交流群》。