Transparentes Rechteck im Ansichtscontroller

Question

Ich möchte einen Effekt erreichen, der einem runden HTML-Formular mit einem transparenten Hintergrund ähnelt, ähnlich dem Bild unten (nicht der Mouseover-Text, nur das Rechteck im Hintergrund, und es soll eine Deckkraft haben).

Ich weiß nicht, wie ich das machen soll und habe mit CGRect herumgespielt, aber ich kann sie nicht einmal anzeigen lassen. Ich verwende die Tab-Navigationsvorlage für das iPad.

Könnten Sie mir bitte auf einige Ressourcen verweisen, die mir den Einstieg mit CGRect erleichtern könnten?

Answer 1

Hinweis Ich werde annehmen, dass Sie das graue Hintergrundrechteck hinter den beiden Formularfeldern meinen. Nicht den blauen Rand um das E-Mail-Feld. Ich gehe davon aus, dass Sie etwas Ähnliches wie dies erreichen möchten:

Sie müssen eine benutzerdefinierte UIView-Subklasse erstellen, die entweder Ihre Formularfelder und Schaltflächen enthält oder sich direkt dahinter befindet. Abhängig von der Komplexität Ihres Verlaufs und des Eckradius können Sie auf zwei Arten ein ähnliches Ergebnis erzielen.

1. Verwendung von CALayer's cornerRadius, borderColor und borderWidth

Eine einfache Implementierung dieser Ansicht könnte sein:

#import "RoundedView.h"
#import 

@implementation RoundedView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor grayColor];
    self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
    self.layer.cornerRadius = 10;
  }
  return self;
}

@end

2. Überschreiben von drawRect: um abgerundete Ecken zu zeichnen

Sie werden UIBezierPath verwenden, um ein Rechteck mit abgerundeten Ecken zu zeichnen, es auszufüllen und zu umreißen.

@implementation DrawnBackgroundView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor clearColor];
  }
  return self;
}

- (void)drawRect:(CGRect)rect
{
  CGFloat lineWidth = 2;
  CGFloat selfWidth = self.bounds.size.width - (lineWidth * 2);
  CGFloat selfHeight = self.bounds.size.height - (lineWidth * 2);

  UIColor* lightGray = [UIColor colorWithRed: 0.84 green: 0.84 blue: 0.84 alpha: 1];

  UIBezierPath* roundedRectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(lineWidth, lineWidth, selfWidth, selfHeight) cornerRadius: 10];
  [lightGray setFill];
  [roundedRectanglePath fill];

  [lightGray setStroke];
  roundedRectanglePath.lineWidth = lineWidth;
  [roundedRectanglePath stroke];
}

@end

Das obige Bildschirmfoto stammt aus einem schnellen Demoprojekt, das auf GitHub verfügbar ist.

Answer 2

Beginnen Sie mit einer auf der Ansicht basierenden Vorlage und erstellen Sie ein Projekt mit dem Namen Schublade. Fügen Sie Ihrem Projekt eine UIView-Klasse hinzu. Benennen Sie sie SquareView (.h und .m).

Doppelklicken Sie auf DrawerViewController.xib, um es in Interface Builder zu öffnen. Ändern Sie die generische Ansicht dort im Identity Inspector (Befehl-4) über das Klassen-Popup-Menü in SquareView. Speichern Sie und gehen Sie zurück zu Xcode.

Fügen Sie diesen Code in die drawRect: Methode Ihrer SquareView.m-Datei ein, um ein großes, krummes, leeres gelbes Rechteck und ein kleines, grünes, transparentes Quadrat zu zeichnen:

- (void)drawRect:(CGRect)rect;
{   
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 1.0); // gelbe Linie

    CGContextBeginPath(context);

    CGContextMoveToPoint(context, 50.0, 50.0); // Startpunkt
    CGContextAddLineToPoint(context, 250.0, 100.0);
    CGContextAddLineToPoint(context, 250.0, 350.0);
    CGContextAddLineToPoint(context, 50.0, 350.0); // Endpfad

    CGContextClosePath(context); // Pfad schließen

    CGContextSetLineWidth(context, 8.0); // dies ist von nun an festgelegt, bis Sie es explizit ändern

    CGContextStrokePath(context); // tatsächliches Zeichnen

CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 0.5); // grüne Farbe, halbtransparent
CGContextFillRect(context, CGRectMake(20.0, 250.0, 128.0, 128.0)); // ein Quadrat in der unteren linken Ecke
}

Sie müssen diese Methode nicht aufrufen, damit die Zeichnung erfolgt. Ihr Ansichtscontroller wird die Ansicht mindestens einmal auffordern, sich selbst zu zeichnen, wenn das Programm gestartet wird und die NIB-Dateien aktiviert sind.