Wie UItextview oder UItextfeld mit umrandeten Text mit Löschoption zu erreichen?

Question

Ich arbeite an einem Projekt, wo ich Web wie Feature für UITextView oder UITextField mit getrennten Hintergrund auf Text mit Löschoption erreichen muss. Es sollte genau in dem Bild aussehen, das ich angehängt habe. Bitte helfen Sie dies zu erreichen.

Hier ist, was ich bisher versucht habe:

NSMutableAttributedString * string = [[NSMutableAttributedString alloc]initWithString:txtString]; 
      NSArray *words=[txtString componentsSeparatedByString:@","]; 
    for (NSString *word in words) { 
      [txtString stringByReplacingOccurrencesOfString:@"," withString:@" "]; //if ([word hasSuffix:@","]) { 
      self.m_interestsTxtView.font = [UIFont boldSystemFontOfSize:17]; 
      self.m_interestsTxtView.textColor = [UIColor whiteColor]; 
      NSRange range=[txtString rangeOfString:word]; 
      [string addAttribute:NSBackgroundColorAttributeName value:[UIColor blackColor] range:range]; 
      [string addAttribute:NSForegroundColorAttributeName value: [UIColor whiteColor] range:range]; 
      [self.m_interestsTxtView setAttributedText:string]; 
    } 

Answer 1

einfachste Weg, eine UIView mit einem Knopf und ein Etikett mit xib würde zu schaffen. Eine andere Möglichkeit besteht darin, eine benutzerdefinierte Ansicht zu erstellen, die als Vorlage für Ihre Anforderung fungiert und der Vorlage ein UILabel hinzufügt. Ich habe das für das Lernen gemacht. Ich hoffe, dass Sie dieses gemäß Ihrer Anforderung anpassen können.

Gewohnheit UIView Klasse:

- (void)drawRect:(CGRect)frame { 

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    UIColor* color = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; 

    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), 82, 36) cornerRadius: 11]; 
    [color setFill]; 
    [rectanglePath fill]; 
    [UIColor.darkGrayColor setStroke]; 
    rectanglePath.lineWidth = 1; 
    [rectanglePath stroke]; 


    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame) + 67, CGRectGetMinY(frame) + 3, 11, 11)]; 
    [UIColor.redColor setFill]; 
    [ovalPath fill]; 

    CGContextSaveGState(context); 
    CGContextTranslateCTM(context, CGRectGetMinX(frame) + 71.5, CGRectGetMinY(frame) + 8.5); 

    UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
    [bezierPath moveToPoint: CGPointMake(-4, 0)]; 
    [bezierPath addCurveToPoint: CGPointMake(5, 0) controlPoint1: CGPointMake(5, 0) controlPoint2: CGPointMake(5, 0)]; 
    [UIColor.whiteColor setStroke]; 
    bezierPath.lineWidth = 1; 
    [bezierPath stroke]; 

    CGContextRestoreGState(context); 
} 

ich ein UILabel 'Egg' zu der benutzerdefinierten Ansicht hinzugefügt haben.

Dies würde Ihnen:

diese Custom hinzufügen (ich sie als buttonLabel nennen) zu einem Array buttonLabelsArray

Wenn Sie die UIButton zur Darstellung der X-Markierung verwenden möchten, können Sie Sie müssen die Berührungen nicht verwalten, aber wenn Sie UIButton nicht verwenden möchten, sollten Sie die Berührungen genau festlegen.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 

    for (UIView *but in buttonLabelsArray) { 
     CGPoint locationPoint = [[touches anyObject] locationInView:but]; 
     if (CGRectContainsPoint(but.bounds, [touches.anyObject locationInView:but])==YES){ 
      if ((locationPoint.x>=64 && locationPoint.x<=80) 
       && (locationPoint.y>=3 && locationPoint.y<=12)) { 

       NSLog(@"pressed close button"); 
       [but removeFromSuperview]; 

        //Do something else 
      } 
     } 
    } 

} 

Sie müssen vielleicht die, wenn

((locationPoint.x>=64 && locationPoint.x<=80) 
        && (locationPoint.y>=3 && locationPoint.y<=12)) 

Zustand auf Ihrer benutzerdefinierten Ansicht Rahmen basierend ändern.