Can drag and drop small window, the best use?

I. Preface

  • 1, write more than 10 days a small code, are interested can see me this small program official document small program version [] is continuously updated, the pit was a bit dizzy, suddenly want to change, write iOS, see group someone mentioned the drag function of view should be many people need, then make a share it.
  • 2, the company has its own live project, see other live app have small screen can drag and play view (as below), although not yet this demand, ready as soon as possible.
Can drag and drop small window, the best use?
screenshots from a live tooth
  • 3, and has not shared for a long time, as usual, the process of packaging wheels will be described in detail, to share more ideas are encapsulated.
  • 4, take a look at the effect chart first:
    , Can drag and drop small window, the best use?,
    demo renderings, you can do it

Two, functional analysis (for all controls)

  • 1, drag and drop. The most basic function, pulled out of the parent container, can be reset after letting go, can be closed.
  • 2, drag and drop without covering. Controls at the same level, which appear at the top if the overlap occurs during the drag and drop process.
  • 3. Adsorption boundary. This point of reference, Apple’s AssistiveTouch, can only be turned to the left or right of the screen and can be turned off.
  • 4, spring effect. If you go beyond the screen, there will be a spring effect, which refers to the scrollView effect of bounces and can be turned off.
  • 5, support Xib, storyboard parameter settings. Many controls are created in Xib or storyboard, at this point, look at the following figure:
The Can drag and drop small window, the best use?
supports the Xib and storyboard parameter settings

Three 、 API analysis and design

  • 1, whether to drag or drop, default to close, support Xib, storyboard parameter settings
@author gitKong / * * * * * is allowed to drag off by default (can be set in XIB or SB) / @property (nonatomic, assign) IBInspectable BOOL fl_canDrag;
  • 2, whether you need the border spring effect, open by default, support the Xib and storyboard parameter settings
@author gitKong * / * * * * whether the boundary spring effect, enabled by default (can be set in XIB or SB) / @property (nonatomic, assign) IBInspectable BOOL fl_bounces;
  • 3, whether you need to absorb the border effect, open by default (can be set in XIB or SB
@author gitKong * / * * * * whether the absorption boundary effect, enabled by default (can be set in XIB or SB) / @property (nonatomic, assign) IBInspectable BOOL fl_isAdsorb;

Four 、 function realization analysis

  • 1. Classification or inheritance. Because of the need to support all controls, we all know that the controls are directly or indirectly inherited from UIView, there are two ways this can be achieved, inheritance and classification, then I use classification, why? (1) if the current view is, I have inherited another custom view, and features a very independent, at this time if you want to add the view drag and drop function, it must be integrated with the two functions of the code, it will be very troublesome, but also very confused. (2) if I need to add a drag and drop function to a button, then inheritance can not be achieved, because you modified this button to inherit, it does not have its own function.
  • 2, listen, drag and drop. Drag event by – (void) touchesMoved: (NSSet< UITouch *> touches withEvent: (* *) UIEvent event) method to monitor, you can also add pan drag gesture, as for why use gestures? (1) the touchesMoved method needs to be implemented in the taxonomy, and it is easy to conflict if the method is implemented by the outside world. (2) although the dynamic drag and drop switch is dynamically modified, the touchesMoved method is invoked many times. Even if the drag and drop function is turned off, the relative gesture implementation is less flexible.
  • 3, add the pan event in the Setter method. Began to think of the init method is to replace the runtime system through Swizzle, and then realize the drag gesture add inside his own way, but then take into account, this is added to the classification of UIView, and all the controls on the page are a subclass of UIView, then init will call several times, will cause the page display slow; so judge directly in the setter method, when the need to drag, I can add events, need not be removed when the drag gesture, is a small optimization. At this point, you need to log the current control in the parent container’s index, and so on, you will know what to use.
  • 4, covering treatment. As we all know, control by adding addSubviews to the parent container, is in order, will add at the top; if I add view1 in add view2, when I drag the view1 to view2, view2 will be blocked. Practices are as follows: (1) traversal of the parent class view subViews array, to determine whether the current view coincidence, with the system comes with the CGRectIntersectsRect method to determine. (2) when drag and drop begins (UIGestureRecognizerStateBegan), drag the view to the top with bringSubviewToFront. (3) in the end, drag (UIGestureRecognizerStateEnd) when judging whether the state at this time also coincide, if not by coincidence, insertSubview controls will reset back to the original order (by the above third points recorded index)
  • 5, support Xib, storyboard parameter settings. This only needs to add a keyword modifier on the line, IBInspectable, usage can see my API design, the main role is to make view variables visualization, and can be modified immediately see
  • 6, spring effect and adsorption effect. This can use UIView animation can be achieved, there is a point of attention, to determine whether the adsorption to the left or right, the comparison should be absolute position, rather than the relative position, you need to add the x value of the parent class
If (gesR.view.fl_centerX + self.superview.fl_x > self.superview.fl_centerX) {[UIView animateWithDuration:0.25 = animations:^{ CGPointMake (self.superview.fl_width - self.fl_width / 2, y);} else{[UIView animateWithDuration:0.25 animations:^{}]; = CGPointMake (self.fl_width / 2, y);}];}
Can drag and drop small window, the best use?
calculation pit

Five, pay attention to:

  • 1, if you are using the constraint conditions, this may appear when you drag a certain range, can remain at the current location; but when you drag the position in the vicinity of position constraints are good, is absorbed back, as shown below: (the picture is the use of constrained layout)
This may occur in Can drag and drop small window, the best use?
using constraint layout
  • 2, if the gesture fails, there will be an assertion.

Six, summary

  • 1, in order to facilitate the use of everyone, support cocoapod, through the pod search FLDragView will be able to search. If you can’t find it, clean it first, execute RM ~/Library/Caches/CocoaPods/search_index.json, and execute search again. Just Can drag and drop small window, the best use?
  • 2, the code is not difficult to achieve, the specific code is not copied up, the code is relatively small calculation, text analysis should be relatively clear, and if there are any other problems, despite finding me.
  • 3, Github address, welcome to pay attention to me, like to give a star and like, your support is my biggest motivation, will always update original article Oh!