08.04.2012
Xcode 4
Tutorial: Wie erstelle ich eine Custom View
In diesem Tutorial wird erklärt, wie man mit Xcode 4 und Cocoa eine Custom-View erstellt, die man beispielsweise verwenden kann, um darin mit NSBezierPath
zu zeichnen oder Text anzuzeigen. In diesem Beispiel wird einfach ein kurzer Text mit drawAtPoint:withAttributes:
in die NSView
gezeichnet.
Gestartet wird mit dem Anlegen einer Cocoa Application (⌘+⇧+N).
![](./images/STV_CreateProject1.jpg)
Als Projektname kann beispielsweise CustomViewExample verwendet werden. In der folgenden Abbildung ist das angelegte Projekt zu sehen.
![](./images/CustV_CreateProject2.jpg)
Im nächsten Dialog kann angegeben werden, in welchem Verzeichnis das Projekt abgelegt und ob zusätzlich ein lokales GIT-Repository angelegt werden soll.
![](./images/STV_CreateProject3.jpg)
Nachdem das Projekt mit Create erstellt wurde, sollte die Ansicht in Xcode folgendermaßen aussehen:
![](./images/CustV_Project.jpg)
Dann wird mit ⌘+N (New File) eine neue Datei angelegt.
![](./images/CustView_NewFile.jpg)
Als Subclass of wird NSView ausgewählt.
![](./images/CustView_NewFile2.jpg)
Für den Klassennamen verwenden wir CustomView.
![](./images/CustView_NewFile3.jpg)
Dann selektieren wir die Datei MainMenu.xib, wechseln auf Window, blenden die Utilities ein und suchen nach CustomView.
![](./images/CustView_MainMenu.jpg)
Aus der Object Library ziehen wir die Custom-View per Drag&Drop in das Fenster.
![](./images/CustView_CustomView1.jpg)
Dort passen wir die Größe der View an und stellen das Autosizing so ein, daß sich die View anpaßt, wenn später zur Laufzeit die Größe des Fensters verändert wird.
![](./images/CustView_CustomView2.jpg)
Im Identity inspector tragen wir als Klassennamen CustomView ein. Dies ist die NSView-Klasse, die wir eben angelegt haben.
![](./images/CustView_IdentityInspector.jpg)
Dann öffnen wir die Klasse CustomView.m und passen die Methode drawRect:(NSRect)
folgendermaßen an:
- (void)drawRect:(NSRect)dirtyRect { NSString *helloString = @"Hello World!"; NSPoint textPoint = NSMakePoint(NSMaxX(dirtyRect)/2-25, NSMaxY(dirtyRect)/2); [helloString drawAtPoint:textPoint withAttributes:nil]; }
Dieser Code-Schnipsel zeichnet die Schriftzug Hello World!
in die Mitte der Custom-View. Abschließend muß die Applikation nur noch mit ⇧+R compiliert und gestartet werden. Dann sollte folgendes zu sehen sein:
![](./images/CustView_Application.jpg)