IOS custom drag control: QiDragView

Painted painted levels: fostered fostered fostered

Tags: “iOS” “QiDragView” by MrLiuQ Review: QiShare team

First, let’s take a look at the effect of QiDragView:

I. QiDragView overall architecture design

Not much to say, shelves composition ~

QiDragView (QiDragSortView for short) is an optional drag-and-drop custom control, which can meet some drag-and-drop sorting business requirements.

How to customize QiDragView?

Before the Demo, here are a few customizable UI configuration properties:

And some logical configuration properties:

It’s also easy to use:

• Setting titles directly creates Buttons for titles.
• throughdragSortEndedBlock method callback to handle drag and drop business logic: button sorting, button selection, etc

Default configuration usage:

QiDragSortView * dragSortView = [[QiDragSortView alloc] initWithFrame: CGRectMake (. 0, 100.0, and the self. The bounds. The size, width, . 0)]; dragSortView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.5]; DragSortView. Titles = @ [@ "recommended home page," @ "strange dance weekly," @ "the into translation," @ "QiShare," @ "HULK a gleam of gossip," @ "Qtest way"]. / /! < initial Buttons (required) [self.view addSubview:dragSortView]; / /! Drag method callback: Can get the Button array sorting and selection state dragSortView. DragSortEnded = ^ (NSArray < > UIButton * * _Nonnull buttons) {for (UIButton * Button in buttons) { NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected); }};Copy the code

Custom configuration usage:

QiDragSortView * dragSortView = [[QiDragSortView alloc] initWithFrame: CGRectMake (. 0, 100.0, and the self. The bounds. The 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 = @ [@ "strange dance weekly," @ "the into translation," @ "QiShare," @ "HULK a gleam of gossip," @ "Qtest way"]. / /! < can click on the Buttons of choice (optional, default selection) dragSortView. SelectedTitles = @ [@ "recommended home page," @ "HULK a gleam of gossip," @ "Qtest way"]. / /! < Buttons > dragsortView. titles = @[@" Buttons ", @"QiShare", @"HULK Line of Chat ", @"Qtest way "]; / /! < initial Buttons (required) [self.view addSubview:dragSortView]; / /! Drag method callback: Can get the Button array sorting and selection state dragSortView. DragSortEnded = ^ (NSArray < > UIButton * * _Nonnull buttons) {for (UIButton * Button in buttons) { NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected); }};Copy the code

3. Technical points of QiDragView

3.1 Long press gesture:

Long press gestures corresponding to three kinds of state: UIGestureRecognizerStateBegan, UIGestureRecognizerStateChanged, UIGestureRecognizerStateEnded.

/ /! Long press gestures - (void) longPress: (UILongPressGestureRecognizer *) gesture {UIButton * currentButton = (UIButton *) gesture. The 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; }]; }}}Copy the code

3.2 Configuration Button:

In the setter method for property titles, initialize and configure 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; / /! If yes, pass in, otherwise pass in 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:)]]; / /! < long press gesture [self selectButton: self. [I] forStatus buttons: [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; }); }Copy the code

Source code address: QiDragView

Recommended articles:

IOS Wireshark Packet capture iOS Charles Packet capture TCP IP address UDP weekly