Suche…
Syntax
// Ziel c
[UIView neu] // Ein Ansichtsobjekt zugewiesen bekommen und initialisiert
[[UIView-Zuordnung] initWithFrame: (Pass CGRect)] // Die Ansicht zugewiesen und mit einem Frame initialisiert
[[UIView-Zuordnung] init] // Ein Ansichtsobjekt zugewiesen und initialisiert erhalten
// schnell
UIView () // Erstellt eine UIView-Instanz mit CGRect.zero-Frame
UIView (frame: CGRect) // Erstellt eine UIView-Instanz, die den Frame angibt
UIView.addSubview (UIView) // Eine weitere UIView-Instanz als Untersicht hinzufügen
UIView.hidden // Ermitteln Sie die Sichtbarkeit der Ansicht
UIView.alpha // Ermittelt oder setzt die Deckkraft der Ansicht
UIView.setNeedsLayout () // Erzwingt, dass die Ansicht ihr Layout aktualisiert
Bemerkungen
Die UIView- Klasse definiert einen rechteckigen Bereich auf dem Bildschirm und die Schnittstellen zum Verwalten des Inhalts in diesem Bereich. Zur Laufzeit übernimmt ein Ansichtsobjekt das Rendern von Inhalten in seinem Bereich sowie alle Interaktionen mit diesem Inhalt.
Erstellen Sie eine UIView
Ziel c
CGRect myFrame = CGRectMake(0, 0, 320, 35)
UIView *view = [[UIView alloc] initWithFrame:myFrame];
//Alternative way of defining the frame
UIView *view = [[UIView alloc] init];
CGRect myFrame = view.frame;
myFrame.size.width = 320;
myFrame.size.height = 35;
myFrame.origin.x = 0;
myFrame.origin.y = 0;
view.frame = myFrame;
Schnell
let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)
Machen Sie die Ansicht gerundet
Um eine abgerundete UIView , geben cornerRadius für den layer der Ansicht einen cornerRadius an.
Dies gilt auch für jede Klasse, die von UIView erbt, z. B. UIImageView .
Programmatisch
SWIFT-Code
someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10
Ziel-C-Code
[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;
Beispiel
//Swift code
topImageView.layoutIfNeeded()
bottomImageView.layoutIfNeeded()
topImageView.clipsToBounds = true
topImageView.layer.cornerRadius = 10
bottomImageView.clipsToBounds = true
bottomImageView.layer.cornerRadius = bottomImageView.frame.width / 2
//Objective-C code
[topImageView layoutIfNeeded]
[bottomImageView layoutIfNeeded];
topImageView.clipsToBounds = YES;
topImageView.layer.cornerRadius = 10;
bottomImageView.clipsToBounds = YES;
bottomImageView.cornerRadius = CGRectGetWidth(bottomImageView.frame) / 2;
Das Ergebnis zeigt den abgerundeten Ansichtseffekt mit dem angegebenen Eckenradius:
Hinweis
Dazu müssen Sie das QuartzCore-Framework einbeziehen.
#import <QuartzCore/QuartzCore.h>
Storyboard-Konfiguration
Ein abgerundeter Ansichtseffekt kann auch non-programmatically erzielt werden, indem die entsprechenden Eigenschaften im Storyboard festgelegt werden .
Da layer Eigenschaften im Storyboard nicht cornerRadius werden, müssen Sie das cornerRadius Attribut im Abschnitt Benutzerdefinierte Laufzeitattribute ändern.
Schnelle Erweiterung
Sie können diese praktische Erweiterung verwenden, um eine abgerundete Ansicht anzuwenden, solange sie die gleiche Breite und Höhe hat.
extension UIView {
@discardableResult
public func setAsCircle() -> Self {
self.clipsToBounds = true
let frameSize = self.frame.size
self.layer.cornerRadius = min(frameSize.width, frameSize.height) / 2.0
return self
}
}
Um es zu benutzen:
yourView.setAsCircle()
Momentaufnahme machen
Sie können eine Momentaufnahme aus einer UIView wie UIView :
Schnell
let snapshot = view.snapshotView(afterScreenUpdates: true)
Ziel c
UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];
Verwendung von IBInspectable und IBDesignable
Ein (oder zwei) der coolsten neuen Features in den letzten Xcode - Versionen sind die IBInspectable Eigenschaften und IBDesignable UIView s. Diese haben nichts mit der Funktionalität Ihrer Anwendung zu tun, sondern beeinflussen die Entwicklererfahrung in Xcode. Ziel ist es, benutzerdefinierte Ansichten in Ihrer iOS-Anwendung visuell zu prüfen, ohne sie auszuführen. CustomView Sie also an, Sie haben eine benutzerdefinierte Ansicht namens CustomView , die von UIView erbt. In dieser benutzerdefinierten Ansicht wird eine Textzeichenfolge mit einer bestimmten Farbe angezeigt. Sie können auch festlegen, dass kein Text angezeigt wird. Wir brauchen drei Eigenschaften:
var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true
Wir können dann die drawRect Funktion in der Klasse überschreiben:
if showText {
if let text = text {
let s = NSString(string: text)
s.drawInRect(rect,
withAttributes: [
NSForegroundColorAttributeName: textColor,
NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
])
}
}
Unter der Annahme, dass die text ist, wird beim Ausführen der Anwendung eine Zeichenfolge in der oberen linken Ecke der Ansicht gezeichnet. Das Problem ist, dass wir nicht wissen, wie es aussieht, ohne die Anwendung auszuführen. Hier setzen IBInspectable und IBDesignable an. Mit IBInspectable können Sie Eigenschaftswerte der Ansicht in Xcode visuell festlegen, genau wie bei den integrierten Steuerelementen. IBDesignable zeigt uns eine visuelle Vorschau im Storyboard. So sollte die Klasse aussehen:
@IBDesignable
class CustomView: UIView {
@IBInspectable var textColor: UIColor = UIColor.blackColor()
@IBInspectable var text: String?
@IBInspectable var showText: Bool = true
override func drawRect(rect: CGRect) {
// ...
}
}
Oder in Ziel C:
IB_DESIGNABLE
@interface CustomView: UIView
@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;
@end
@implementation CustomView
- (instancetype)init {
if(self = [super init]) {
self.textColor = [UIColor blackColor];
self.showText = YES;
}
return self;
}
- (void)drawRect:(CGRect)rect {
//...
}
@end
Die nächsten Screenshots zeigen, was in Xcode passiert. Der erste ist, was passiert, nachdem die überarbeitete Klasse hinzugefügt wurde. Beachten Sie, dass es drei neue Oberflächenelemente für die drei Eigenschaften gibt. Die Textfarbe zeigt eine Farbauswahl an, Text ist nur ein Eingabefeld und Text anzeigen gibt uns die Optionen für Off und On die jeweils false und true sind.
Das nächste ist, nachdem Sie die Textfarbe mit der Farbauswahl in Rot geändert haben. Außerdem wurde etwas Text bereitgestellt, damit die drawRect Funktion ihn anzeigen kann. Beachten Sie, dass auch die Ansicht im Interface Builder aktualisiert wurde.
Wenn Off im Eigenschafteninspektor die Option „Text anzeigen“ auf „ Off wird die Textanzeige im Interface Builder ausgeblendet.
Wir kommen jedoch alle zu einer Situation, in der wir abgerundete UIView in mehreren Ansichten in Ihrem Storyboard erstellen müssen. Statt IBDesignable für jede Ansicht von Storyboard deklarieren, ist es besser, eine Extension von UIView zu erstellen und eine Benutzeroberfläche zu erstellen, die nur für jede UIView Erstellen Sie eine abgerundete Ansicht, indem Sie den Eckenradius festlegen. Ein konfigurierbarer Randradius auf einer beliebigen UIView, die Sie im Storyboard erstellen.
extension UIView {
@IBInspectable var cornerRadius:CGFloat {
set {
layer.cornerRadius = newValue
clipsToBounds = newValue > 0
}
get {
return layer.cornerRadius
}
}
}
UIView animieren
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.orange
self.view.addSubview(view)
UIView.animate(withDuration: 0.75, delay: 0.5, options: .curveEaseIn, animations: {
//This will cause view to go from (0,0) to
// (self.view.frame.origin.x,self.view.frame.origin.y)
view.frame.origin.x = self.view.frame.origin.x
view.frame.origin.y = self.view.frame.origin.y
}) { (finished) in
view.backgroundColor = UIColor.blueColor()
}
UIView-Erweiterung für Größen- und Rahmenattribute
Wenn wir die x-Koordinate des Ursprungs der Ansicht erhalten möchten, müssen wir wie folgt schreiben:
view.frame.origin.x
Für die Breite müssen wir schreiben:
view.frame.size.width
Wenn wir jedoch eine einfache Erweiterung zu einem UIView , können wir alle Attribute ganz einfach UIView , z.
view.x
view.y
view.width
view.height
Es wird auch dabei helfen, diese Attribute festzulegen:
view.x = 10
view.y = 10
view.width = 100
view.height = 200
Und die einfache Erweiterung wäre:
extension UIView {
var x: CGFloat {
get {
return self.frame.origin.x
}
set {
self.frame = CGRect(x: newValue, y: self.frame.origin.y, width: self.frame.size.width, height: self.frame.size.height)
}
}
var y: CGFloat {
get {
return self.frame.origin.y
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: newValue, width: self.frame.size.width, height: self.frame.size.height)
}
}
var width: CGFloat {
get {
return self.frame.size.width
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: newValue, height: self.frame.size.height)
}
}
var height: CGFloat {
get {
return self.frame.height
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: newValue)
}
}
}
Wir müssen diese Klassendatei in ein Projekt einfügen und sie kann im gesamten Projekt verwendet werden!
Programmgesteuertes Verwalten des Einfügens und Löschens von UIView in und aus einem anderen UIView
Angenommen , Sie haben einen parentView in dem Sie eine neue einfügen möchten subView programmatisch (z. B. wenn Sie einen einfügen möchten UIImageView in eine UIViewController ‚s Ansicht), als Sie es wie unten tun können.
Ziel c
[parentView addSubview:subView];
Schnell
parentView.addSubview(subView)
Sie können die Unteransicht auch unter einer anderen subView2 , die bereits eine Unteransicht von parentView ist, indem Sie folgenden Code verwenden:
Ziel c
[parentView insertSubview:subView belowSubview:subView2];
Schnell
parentView.insertSubview(subView, belowSubview: subView2)
Wenn Sie es oberhalb von subView2 einfügen subView2 , können Sie dies folgendermaßen tun:
Ziel c
[parentView insertSubview:subView aboveSubview:subView2];
Schnell
parentView.insertSubview(subView, aboveSubview: subView2)
Wenn Sie irgendwo in Ihrem Code ein bestimmtes subView nach vorne bringen müssen, so können Sie vor allem die anderen parentView des parentView so machen:
Ziel c
[parentView bringSubviewToFront:subView];
Schnell
parentView.bringSubviewToFront(subView)
Wenn Sie subView aus parentView entfernen parentView , können Sie Folgendes tun:
Ziel c
[subView removeFromSuperview];
Schnell
subView.removeFromSuperview()
Erstellen Sie UIView mit Autolayout
UIView *view = [[UIView alloc] init];
[self.view addSubview:view];
//Use the function if you want to use height as constraint
[self addView:view onParentView:self.view withHeight:200.f];
//Use this function if you want to add view with respect to parent and should resize with it
[self addFullResizeConstraintForSubview:view addedOnParentView:self.view];
Funktionen
Funktion zum Hinzufügen einer Ansicht mit fester Höhe unter Verwendung von Autolayout-Einschränkungen
-(void)addView:(UIView*)subView onParentView:(UIView*)parentView withHeight:(CGFloat)height{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
NSLayoutConstraint *heightConstraint =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:0.0
constant:height];
[subView addConstraint:heightConstraint];
}
Funktion fügt eine Einschränkung für die Größenänderung für die erstellte UIView hinzu.
-(void)addFullResizeConstraintForSubview:(UIView*)subView addedOnParentView:(UIView*)parentView{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
NSLayoutConstraint *bottom =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
[parent addConstraint:bottom];
}
Intrinsische Inhaltsgröße verwenden
Wenn Sie eine UIView-Unterklasse erstellen, hilft die Größe des intrinsischen Inhalts, das Festlegen von hartcodierten Höhen- und Breitenbeschränkungen zu vermeiden
ein grundlegender Einblick, wie eine Klasse dies nutzen kann
class ImageView: UIView {
var image: UIImage {
didSet {
invalidateIntrinsicContentSize()
}
}
// omitting initializers
// convenience init(image: UIImage)
override func intrinsicContentSize() -> CGSize {
return CGSize(width: image.size.width, height: image.size.height)
}
}
Wenn Sie nur eine einzige Größe UIViewNoIntrinsicMetric möchten, können Sie den Wert UIViewNoIntrinsicMetric für den Wert UIViewNoIntrinsicMetric , den Sie ignorieren möchten.
override func intrinsicContentSize() -> CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)
}
Vorteile bei Verwendung von AutoLayout und Interface Builder
Man könnte diese ImageView (oder UIImageView) nehmen und die horizontale Ausrichtung auf das Übersichtszentrum X und die vertikale Ausrichtung auf das Übersichtszentrum Y einstellen.
Der Interface Builder wird sich an dieser Stelle bei Ihnen beschweren und die folgende Warnung anzeigen:
An dieser Stelle setzt Placeholder Intrinsic Size an.
Im Größeninspektorfenster und in der Dropdown-Liste Intrinsic Size (Intrinsic Size) können Sie diesen Wert von Default auf Placeholder umstellen.
Jetzt entfernt der Interface Builder die vorherigen Warnungen und Sie können diese Größe verwenden, um Ansichten mit dynamischer Größe im Interface Builder zu erstellen.
Schüttle einen Blick
extension UIView {
func shake() {
let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
animation.duration = 0.6
animation.values = [-10.0, 10.0, -7.0, 7.0, -5.0, 5.0, 0.0 ]
layer.add(animation, forKey: "shake")
}
}
Diese Funktion kann verwendet werden, um durch Schütteln die Aufmerksamkeit auf eine bestimmte Ansicht zu lenken.