iOS Drag button Sort UI effect

Source: Internet
Author: User

The project encountered the drag button sorting effect requirements, online also just write scattered explanations, after a simple study, a demo was done and a custom control was encapsulated for everyone to learn. Nonsense not much talk, first on the effect of the picture to say:

PS: also please support im_loser and my github:imloser if there are not enough to discuss together ~

Demo Address: Https://github.com/IMLoser/HWSortViewDemo Remember the point of the star support yo ~


Summing up, in fact, want to achieve this effect there are so many steps to solve:

1. Nine Sudoku sorting

2. Click on the button to drag (including adding gestures, monitoring gestures state changes ...)

3. Long press button to trigger drag state (I used here is a long press button to become larger and transparent ...)

4. Record the initial position of the button, after dragging can be automatically reset (is to use the property record to drag the Front button center point position ...)

5. In the gesture method to determine whether the drag to enter the range of other buttons (if overlapping, start according to the tag Sort button position, so as to achieve the corresponding UI effect ...)


Let's show the core code below.

#import "HWSortView.h" #define SELF_SIZE self.frame.size #define DEFAULT_COLUMN_MARGIN #define DEFAULT_COLUMN_COUNT 3 #define Rgb_color [Uicolor colorwithred:arc4random_uniform (255)/255.0 Green:arc4random_uniform (255)/255.0 Blue: Arc4random_uniform (255)/255.0 alpha:0.8] @interface Hwsortview () @property (Strong, Nonatomic) Nsmutablearray * buttons

;
@property (Assign, nonatomic) Cgpoint STARTP;


@property (Assign, nonatomic) Cgpoint Buttonp; @end @implementation Hwsortview-(Nsmutablearray *) buttons {if (!_buttons) {_buttons = [Nsmutablearr
    Ay array];
return _buttons;
    } + (Instancetype) sortview {Hwsortview * sortview = [[Hwsortview alloc] init];
    Sortview.backgroundcolor = [Uicolor Clearcolor];
return sortview; } + (Instancetype) Sortviewwithtitlesarray: (Nsmutablearray *) Titlesarray {Hwsortview * Sortview = [HWSortView sortVie
    W];
    Sortview.titlesarray = Titlesarray;
    [Sortview initailbuttons];
return sortview; }-(void)initailbuttons {if (!_titlesarray.count) return; for (Nsinteger i = 0; i < _titlesarray.count i++) {UIButton * movedbtn = [UIButton buttonwithtype: (uibuttonty
        Pesystem)];
        [Movedbtn Setbackgroundcolor:rgb_color];
        MovedBtn.layer.cornerRadius = 5;
        [Movedbtn Settitlecolor:[uicolor Whitecolor] forstate: (UIControlStateNormal)];
        [Movedbtn Settitle:_titlesarray[i] forstate: (UIControlStateNormal)];
        [Self.buttons ADDOBJECT:MOVEDBTN];
        Movedbtn.tag = i;
        
        [Self addsubview:movedbtn]; Add long press gesture Uilongpressgesturerecognizer * longges = [[Uilongpressgesturerecognizer alloc] initwithtarget:self actio
        N: @selector (Longpressclick:)];
    [Movedbtn Addgesturerecognizer:longges];
   
    }-(void) layoutsubviews {[Super layoutsubviews];
    Static dispatch_once_t Oncetoken;
    Dispatch_once (&oncetoken, ^{[self settingbuttonframe];
}); }//Layout nine Sudoku-(void) Settingbuttonframe {iF (0 = _columnmargin) {_columnmargin = Default_column_margin;}
    
    if (0 = _columncount) {_columncount = Default_column_count;}
    CGFloat buttonh = 30;
    CGFloat buttonw = (Self_size.width-_columnmargin * (_columncount + 1))/_columncount * 1.0;
    CGFloat Buttonx = 0;
    CGFloat buttony = 0;
        Sets the initial position of the button for (Nsinteger i = 0; i < Self.buttons.count i++) {nsinteger column = i% _columncount;
        Nsinteger row = I/_columncount;
        Buttonx = _columnmargin + column * (buttonw + _columnmargin);
        Buttony = _columnmargin + row * (Buttonh + _columnmargin);
        UIButton * btn = self.buttons[i];
    Btn.frame = CGRectMake (Buttonx, Buttony, Buttonw, Buttonh);
    }//Set button text color-(void) Settitlescolor: (Uicolor *) titlescolor {_titlescolor = Titlescolor;
    For (UIButton * movedbtn in _buttons) {[Movedbtn settitlecolor:_titlescolor forstate: (UIControlStateNormal)]; #pragma MARK-< Button_gesture >-(void) Longpressclick: (Uigesturerecognizer *) longges {UIButton * currentbtn = (UIButton *) Longges.view;
            if (Uigesturerecognizerstatebegan = = longges.state) {[UIView animatewithduration:0.2 animations:^{
            Currentbtn.transform = Cgaffinetransformscale (Currentbtn.transform, 1.2, 1.2);
            Currentbtn.alpha = 0.7f;
            _STARTP = [Longges locationinview:currentbtn];
        _buttonp = Currentbtn.center;
    }]; } if (uigesturerecognizerstatechanged = = longges.state) {Cgpoint NEWP = [Longges locationinview:currentb
        TN];
        CGFloat Movedx = newp.x-_startp.x;
        CGFloat movedy = newp.y-_startp.y;
        
        Currentbtn.center = Cgpointmake (currentbtn.center.x + movedx, currentbtn.center.y + movedy);
        Gets the index of the current button Nsinteger Fromindex = Currentbtn.tag;
        
        Gets the target move index nsinteger toindex = [self getmovedindexbycurrentbutton:currentbtn]; if (Toindex &Lt
        0) {return;
            else {currentbtn.tag = Toindex; button to move back if (Fromindex < Toindex) {for (Nsinteger i = fromindex; I < Toindex;
                    i++) {//Get Next button UIButton * nextbtn = self.buttons[i + 1];
                    Cgpoint tempp = Nextbtn.center;
                    [UIView animatewithduration:0.5 animations:^{nextbtn.center = _buttonp;
                    }];
                    _buttonp = TEMPP;
                Nextbtn.tag = i;
            } [self Sortarray]; else if (Fromindex > Toindex) {//Button moves forward for (nsinteger i = fromindex; i > Toinde X
                    i--) {UIButton * previousbtn = self.buttons[i-1];
                    Cgpoint tempp = Previousbtn.center;
        [UIView animatewithduration:0.5 animations:^{                Previousbtn.center = _buttonp;
                    }];
                    _buttonp = TEMPP;
                Previousbtn.tag = i;
            } [self Sortarray]; The processing if (uigesturerecognizerstateended = = longges.state) {[UIView anima
            tewithduration:0.2 animations:^{currentbtn.transform = cgaffinetransformidentity;
            Currentbtn.alpha = 1.0f;
        Currentbtn.center = _buttonp;
    }];  }-(void) Sortarray {//sorting an array of changed buttons [_buttons sortusingcomparator:^nscomparisonresult (ID _nonnull obj1, ID
        _nonnull obj2) {UIButton *TEMP1 = (UIButton *) obj1;
        UIButton *TEMP2 = (UIButton *) obj2;    return Temp1.tag > Temp2.tag;
    
Move the button with a large tag value to the back; //Get button Move Target index-(Nsinteger) Getmovedindexbycurrentbutton: (UIButton *) Currentbutton {for (Nsinteger i = 0; i<self . Buttons.count; i++) {UIButton * button =Self.buttons[i]; if (!currentbutton | | | button!= Currentbutton) {if (Cgrectcontainspoint (Button.frame, Currentbutton.center))
            {return i;
}} return-1;
 } @end


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.