Expression Panel Implementation _ Facial panel

Amuse oneself, record growth footstep, the big God passes please go straight, also welcome criticize correction ~ Effect Chart

1, Packaging expression View ideas:

(1) First of all, processing data: In initialization method initviewframe processing data, plist expression data should be processed into a two-dimensional array, so you need to define an array type of instance variables, is a large array that holds an array of arrays, each decimal group is stored in each page 4 * 7 = 28 Expressions of dictionary data. Parse the plist file, iterate through the dictionary, and when the decimal group is empty or the array element equals 28 o'clock, initialize the array, then add it to the large array and load the traversed dictionary into the decimal group. Completes the processing of the data.

Note: note: After processing the data, you can get the width of the expression view, because the initialization is not given to determine the width of the height, so here, and then given the width of the height

    Remove file
    nsstring *filepath = [[NSBundle mainbundle] pathforresource:@ "emoticons" oftype:@ "plist"];
    Nsarray *emoticons = [Nsarray Arraywithcontentsoffile:filepath];

    _dataarray = [Nsmutablearray array];

    Fractional Group
    Nsmutablearray *arr2d = nil;

    Traversal emoticons for
    (int i = 0; i < Emoticons.count i + +) {

        if (arr2d = = Nil | | arr2d.count =) {
            arr2d = [Nsmutablearray array];
            [_dataarray addobject:arr2d];
        }

        Nsdictionary *item = emoticons[i];
        [Arr2d Addobject:item];
    }
    Sets the width and height of the current view
    self.width = _dataarray.count * kscreenwidth;
    Self.height = Kface_height * 4;

    Initviews
    [self initviews];

(2) Then, in the view above the expression: in the-(void) DrawRect: (CGRect) Rect method, through the row and column two for the loop to iterate through each expression of the dictionary data, take the picture, calculate the coordinates, through the Drawinrect method to draw up
Note: The coordinate variable can be set to the macro definition.

/* Macro definition//area of each cell width and height #define Kface_height (kscreenwidth/7.0) #define KFACE_WIDTH (kscreenwidth/7.0)///facial image width and height #define KITEM_WIDTH 30.0 #define KITEM_HEIGHT 30.0 * * for (int i = 0; i < _dataarray.count; i + +) {Nsarra

        Y *arr2d = _dataarray[i];

            for (int j = 0; J < Arr2d.count J + +) {//access to item information nsdictionary *item = arr2d[j];
            Take the picture nsstring *imgname = item[@ "png"];

            UIImage *image = [UIImage imagenamed:imgname];
            COMPUTE coordinates CGFloat x = i * kscreenwidth + colum *kface_width + (kface_width-kitem_width)/2;

            CGFloat y = row * kface_height + (kface_height-kitem_height)/2;

            [Image Drawinrect:cgrectmake (x, Y, Kitem_width, kitem_height)];
            Colum + +;
                if (Colum = = 7) {row + +;
            Colum = 0;
            } if (row = = 4) {row = 0; }
        }
    }

(3) Next, create a magnifying glass view: Start position first set to (0,0), set the background image, create a magnifying glass on the expression view, calculate the coordinates of the expression view.

Create Magnifier view
    _imgview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, 0,,)];
    _imgview.image = [UIImage imagenamed:@ "Emoticon_keyboard_magnifier.png"];
    _imgview.backgroundcolor = [Uicolor clearcolor];

    First Hide magnifier
    _imgview.hidden = YES;

    [Self addsubview:_imgview];

    Create an expression on a magnifying glass
    uiimageview *faceview = [[Uiimageview alloc] Initwithframe:cgrectmake ((_imgview.width-kitem_width )/2, Kitem_width, Kitem_height)];
    Faceview.backgroundcolor = [Uicolor clearcolor];
    Faceview.tag = 123;
    [_imgview Addsubview:faceview];

(4) Then, realize the magnifying glass movement: in touches start and end of the method, show and hide the magnifying glass view respectively, in the starting and moving method, can get touch object, get to the coordinates of the contact, and then customize a function of coordinates as parameters to calculate the coordinates of the magnifying glass, Calculate the start and move of the touch, the position of the magnifying glass, and the touch of the first few pages of the expression;

Note: When in the sliding expression, the scrollview is also sliding, with each other, so, to the beginning of the touch to prevent scroolview sliding, at the end, open sliding.

method to invoke when starting contact
-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
    _imgview.hidden = NO;

    Prohibit sliding
    if ([Self.subviews Iskindofclass:[uiscrollview class]]) {
        Uiscrollview *scrollview = (Uiscrollview *) Self.subviews;
        scrollview.scrollenabled = YES;
    }
    Get the coordinates of the touch
    uitouch *touch = [touches anyobject];
    Cgpoint point = [Touch locationinview:self];

    [Self touchpoint:point];
}

Next, pass the value: constructs the expression view, the click Expression finally is wants to appear to send the micro-blog The text box to go, so to get the expression of the corresponding string name, and then build a magnifying glass expression when you can get the expression of the expression name such as: [crying], you should define an instance variable, here to receive the name; Defines a block that is the expression name in the previous sentence, and then, in the method that ends the touch event, recalls the block, passing the value;
Note: The last page of the expression may be less than 28, when the trigger position is a blank position, you should pass the parameter expression name to empty, and then the magnifying glass hidden.

//End Touch Invocation Method-(void) touchesended: (Nsset *) touches withevent: (Uievent *) event {//Hide Magnifier _imgview.hidden = YES; Open sliding if ([Self.subviews Iskindofclass:[uiscrollview class]]) {Uiscrollview *scrollview = (uiscrollvie
        W *) Self.subviews;
    scrollview.scrollenabled = NO;
    }//Callback block//Security judgment if (Self.block) {self.block (_selectedfacename); }

}

Computes the coordinate-(void) touchpoint: (cgpoint) point {_imgview.hidden = NO;

    Page Nsinteger page = point.x/kscreenwidth;
        Security Judgment if (Page > _dataarray.count) {_imgview.hidden = YES;
    Return The rows and columns are computed according to coordinates in the current interface Nsinteger row = point.y/kface_height;//row number Nsinteger Colum = (Point.x-page * KSCREENWI
    DTH)/kface_width;//number of columns//limit row and colum range row = MAX (0, row);

    row = MIN (row, 3);
    Colum = MAX (0, Colum);

    Colum = MIN (Colum, 6);

    Calculates the first few elements in the current page Nsinteger index = row * 7 + colum;

    Remove the decimal group from the page Nsarray *arr2d = _dataarray[page];
        Security Judgment (last page only a few elements) if (index >= arr2d.count) {_imgview.hidden = YES;
        _selectedfacename = nil;
    Return
    ///Take out the picture name nsdictionary *faceitem = Arr2d[index];
    NSString *imgname = [Faceitem objectforkey:@ "PNG"];

    NSString *facename = [Faceitem objectforkey:@ "CHS"]; The name of the expression if (![ Facename Isequaltostring:_selectedfacename]){///Remove view Uiimageview *imageview = (Uiimageview *) [_imgview viewwithtag:123];

        Imageview.image = [UIImage imagenamed:imgname]; Set the coordinates of the Magnifier//Set the horizontal axis of the center point is the same as the horizontal coordinate of the center point of the expression cgfloat x = page * kscreenwidth + colum * kface_width + 0.5 * kface_wi
        Dth

        _imgview.center = Cgpointmake (x, 0);
        Set the bottom coordinates to the top coordinates of the expression coordinates cgfloat y = row * kface_height + 0.5 *kface_height;

        _imgview.bottom = y;
    _selectedfacename = Facename;
 }
}

2, packaging expression Panel ideas 1, the properties and methods in the. h file: The expression panel is on the UIView, so the encapsulated class inherits from UIView; the expression panel can slide, so there is a Uiscrollview ; There is a Uipagecontrol page controller below the face panel; Most importantly, there is a custom expression view; Then define an initialization method with block:

@interface emotionview:uiview<uiscrollviewdelegate>
{
    faceview *_faceview;//expression View
    Uiscrollview * _scrollview;//sliding View
    Uipagecontrol *_pagectrl;//page Controller

}
-(Instancetype) Initwithblock: (Selectedblock) Block

2. Initialize: Call block in Initwithblock initialization method, notice, call Self's initWithFrame method, initialize views, note that in addition to some controls with fixed coordinates and wide height, It is best to cgrectzero at initialization time, and then assign a value frame where needed, so it is more convenient if there is a hidden demand.

-(Instancetype) initWithFrame: (CGRect) frame
{
    self = [super Initwithframe:frame];
    if (self) {
        //Initialize view
        [self initviews];
    }
    return self;
}

-(Instancetype) Initwithblock: (selectedblock) block
{
    self = [self Initwithframe:cgrectzero];
    if (self) {
        //call Blcok
        _faceview.block = block;
    }
    return self;
}

-(void) initviews {self.width = kscreenwidth;
    Initialize expression view _faceview = [[Faceview alloc] Initwithframe:cgrectzero];

    _faceview.backgroundcolor = [Uicolor Clearcolor];
    Initialize slide View _scrollview = [[Uiscrollview alloc] Initwithframe:cgrectmake (0, 0, Kscreenwidth, _faceview.height)];

    _scrollview.backgroundcolor = [Uicolor Clearcolor];

    Create proxy _scrollview.delegate = self;
    Hide Slide Bar _scrollview.showshorizontalscrollindicator = NO;

    _scrollview.showsverticalscrollindicator = NO;
    Paging _scrollview.pagingenabled = YES;

    _scrollview.bounces = NO;

    Set content View _scrollview.contentsize = Cgsizemake (_faceview.width, 0);

    No shear _scrollview.clipstobounds = no;
    [_scrollview Addsubview:_faceview];

    [Self addsubview:_scrollview];
    Initialize PageCtrl _pagectrl = [[Uipagecontrol alloc] Initwithframe:cgrectmake (0, _scrollview.bottom, Kscreenwidth, 20)];

    _pagectrl.backgroundcolor = [Uicolor Clearcolor]; _pagectrl.numberofpaGES = _faceview.width/kscreenwidth;
    Add Click event [_pagectrl addtarget:self Action: @selector (pagectrlaction:) forcontrolevents:uicontroleventvaluechanged];

    [Self Addsubview:_pagectrl];
Self.height = _scrollview.height + _pagectrl.height; }

3, the combination of Pagecontrol and Faceview: Click on the page controller, through the currentpage can calculate the expression of the offset of the view, the same can be, and then slide the expression view, triggering the protocol method Scrollviewdidscroll, Let the page controller's currentpage equal to the offset X coordinate/screen width

-(void) Pagectrlaction: (Uipagecontrol *) PageCtrl
{
    Nsinteger index = pagectrl.currentpage;    [_scrollview setcontentoffset:cgpointmake (Index * kscreenwidth, 0) Animated:yes];
    _scrollview.contentoffset = Cgpointmake (Index * kscreenwidth, 0);                               
}

View Sliding
-(void) Scrollviewdidscroll: (Uiscrollview *) ScrollView
{
    _pagectrl.currentpage = _ Scrollview.contentoffset.x/kscreenwidth;
}

3, the expression panel embedded in the input method of the keyboard thinking click on the button of the expression panel, judge the selected state of the button, according to the selected state, set the TextView Inputview property is encapsulated a good expression view. You can insert the selected expression directly inserttext in the block blocks of your own encapsulation.

Attention:
1, the following conditions, if the call to the expression view, but give up the microblogging, and directly exit the modal view, it will cause circular references.
Solution: Create a controller for the __weak property, switch to the strong type in the block, and then let the controller point to the input box InsertText resolved.
2, remember Reloadinputview AH. The beginning of the beginning, there is borrowed and that. ~_~

//Create expression Panel//here will cause circular references,//self--> _writetv//self--> _emotionview Block--> _

            Writetv if (_emotionview = = nil) {__weak Writeweiboviewcontroller *weakwritevc = self;
                _emotionview = [[Emotionview alloc] initwithblock:^ (nsstring *facename) {//Convert to strong, omit strong
Writeweiboviewcontroller *WRITEVC = WEAKWRITEVC;
                NSLog (@ "%@", facename);
                if (facename.length!= 0) {[Writevc->_writetv inserttext:facename];

        }

            }];
        } btn.selected =!btn.selected;
        if (btn.selected) {_writetv.inputview = _emotionview;
        }else {_writetv.inputview = nil; } [_writetv reloadinputviews];