Zoeken…
Syntaxis
// Doelstelling C
[UIView nieuw] // Krijg een weergaveobject toegewezen en geïnitialiseerd
[[UIView alloc] initWithFrame: (Pass CGRect)] // Krijg de weergave toegewezen en geïnitialiseerd met een frame
[[UIView alloc] init] // Krijg een viewobject toegewezen en geïnitialiseerd
// Snel
UIView () // Maakt een UIView-instantie met een frame CGRect.zero
UIView (frame: CGRect) // Maakt een UIView-instantie die het frame opgeeft
UIView.addSubview (UIView) // voeg nog een UIView-instantie toe als subview
UIView.hidden // De zichtbaarheid van de weergave ophalen of instellen
UIView.alpha // De dekking van de weergave ophalen of instellen
UIView.setNeedsLayout () // Forceert de weergave om de lay-out bij te werken
Opmerkingen
De klasse UIView definieert een rechthoekig gebied op het scherm en de interfaces voor het beheer van de inhoud in dat gebied. Tijdens runtime verwerkt een weergaveobject de weergave van alle inhoud in het gebied en verwerkt ook eventuele interacties met die inhoud.
Maak een UIView
Doelstelling 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;
Snel
let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)
Maak het uitzicht afgerond
Als u een afgeronde UIView
wilt maken, geeft u een cornerRadius
voor de layer
van de weergave.
Dit geldt ook voor elke klasse die van UIView
erft, zoals UIImageView
.
programmatisch
Swift code
someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10
Doelstelling-C-code
[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;
Voorbeeld
//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;
Hier is het resultaat, dat het afgeronde weergave-effect toont met de opgegeven hoekradius:
Notitie
Om dit te doen, moet u het QuartzCore-framework opnemen.
#import <QuartzCore/QuartzCore.h>
Storyboard-configuratie
Een afgerond weergave-effect kan ook non-programmatically
worden bereikt door de bijbehorende eigenschappen in Storyboard in te stellen .
Aangezien layer
eigenschappen niet in Storyboard worden blootgesteld, moet u het wijzigen cornerRadius
attribuut via de User Defined Runtime Attributen sectie.
Swift Extension
U kunt deze handige uitbreiding gebruiken om een afgeronde weergave toe te passen zolang deze dezelfde breedte en hoogte heeft.
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
}
}
Om het te gebruiken:
yourView.setAsCircle()
Een momentopname maken
U kunt een momentopname van een UIView
als volgt maken:
Snel
let snapshot = view.snapshotView(afterScreenUpdates: true)
Doelstelling C
UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];
IBInspectable en IBDesignable gebruiken
Een (of twee) van de coolste nieuwe functies in recente Xcode-releases zijn de IBInspectable
eigenschappen en IBDesignable
UIView
's. Deze hebben niets te maken met de functionaliteit van uw applicatie, maar hebben in plaats daarvan invloed op de ontwikkelaarservaring in Xcode. Het doel is om aangepaste weergaven in uw iOS-toepassing visueel te kunnen inspecteren zonder deze uit te voeren. CustomView
er dus van uit dat u een aangepaste weergave hebt met de naam CustomView
die erft van UIView
. In deze aangepaste weergave wordt een reeks tekst met een bepaalde kleur weergegeven. U kunt er ook voor kiezen geen tekst weer te geven. We hebben drie eigenschappen nodig:
var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true
We kunnen dan de drawRect
functie in de klasse overschrijven:
if showText {
if let text = text {
let s = NSString(string: text)
s.drawInRect(rect,
withAttributes: [
NSForegroundColorAttributeName: textColor,
NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
])
}
}
Ervan uitgaande dat de text
is ingesteld, tekent dit een tekenreeks in de linkerbovenhoek van de weergave wanneer de toepassing wordt uitgevoerd. Het probleem is dat we niet weten hoe het eruit ziet zonder de toepassing uit te voeren. Hier komen IBInspectable
en IBDesignable
binnen. IBInspectable
stelt ons in staat om de waarden van de weergave in Xcode visueel in te stellen, net als met de ingebouwde bedieningselementen. IBDesignable
toont ons een visueel voorbeeld in het storyboard. Dit is hoe de klas eruit zou moeten zien:
@IBDesignable
class CustomView: UIView {
@IBInspectable var textColor: UIColor = UIColor.blackColor()
@IBInspectable var text: String?
@IBInspectable var showText: Bool = true
override func drawRect(rect: CGRect) {
// ...
}
}
Of in doelstelling 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
De volgende screenshots laten zien wat er gebeurt in Xcode. De eerste is wat er gebeurt na het toevoegen van de herziene klasse. Merk op dat er drie nieuwe UI-elementen zijn voor de drie eigenschappen. De tekst kleur zal een kleurkiezer weer te geven, tekst is slechts een invoerveld en Toon tekst zal ons de opties voor het geven Off
en On
, die zijn false
en true
respectievelijk.
De volgende is na het wijzigen van de tekstkleur in rood met de Kleurkiezer. Er is ook wat tekst voorzien om de functie drawRect
deze weer te geven. Merk op dat de weergave in Interface Builder ook is bijgewerkt.
Als u ten slotte Tekst tonen op Off
zet in de eigenschappencontrole, verdwijnt de tekstweergave in Interface Builder.
We doen ons echter allemaal een situatie voor wanneer we afgeronde UIView
op meerdere weergaven in uw Storyboard
moeten maken. In plaats van IBDesignable
voor alle weergaven van Storyboard
verklaren, is het beter om een Extension
van UIView
en een gebruikersinterface te laten bouwen die speciaal voor uw elke UIView
door het project heen om een afgeronde weergave te maken door hoekradius in te stellen. Een configureerbare randradius op elke UIView die u in het storyboard maakt.
extension UIView {
@IBInspectable var cornerRadius:CGFloat {
set {
layer.cornerRadius = newValue
clipsToBounds = newValue > 0
}
get {
return layer.cornerRadius
}
}
}
Een UIView animeren
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-extensie voor grootte- en framekenmerken
Als we het x-cordinaat van oorsprong van de weergave willen krijgen, moeten we schrijven als:
view.frame.origin.x
Voor de breedte moeten we schrijven:
view.frame.size.width
Maar als we een eenvoudige extensie aan een UIView
, kunnen we alle attributen heel eenvoudig krijgen, zoals:
view.x
view.y
view.width
view.height
Het helpt ook bij het instellen van deze attributen zoals:
view.x = 10
view.y = 10
view.width = 100
view.height = 200
En de eenvoudige extensie zou zijn:
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)
}
}
}
We moeten dit klassenbestand toevoegen aan een project en het is beschikbaar voor gebruik gedurende het project!
Beheer UIView-invoeging en verwijdering programmatisch in en uit een andere UIView
Stel dat u een parentView
waarin u een nieuwe subView
programmatisch wilt invoegen (bijv. Wanneer u een UIImageView
in een view van UIViewController
wilt invoegen), dan kunt u dit doen zoals hieronder.
Doelstelling C
[parentView addSubview:subView];
Snel
parentView.addSubview(subView)
U kunt de subView ook toevoegen onder een andere subView2
, die al een subview van parentView is met behulp van de volgende code:
Doelstelling C
[parentView insertSubview:subView belowSubview:subView2];
Snel
parentView.insertSubview(subView, belowSubview: subView2)
Als u het boven subView2
wilt invoegen, kunt u dit op deze manier doen:
Doelstelling C
[parentView insertSubview:subView aboveSubview:subView2];
Snel
parentView.insertSubview(subView, aboveSubview: subView2)
Als u ergens in uw code een bepaalde subView
naar voren moet brengen, dus boven alle parentView
de andere parentView
, kunt u dit als volgt doen:
Doelstelling C
[parentView bringSubviewToFront:subView];
Snel
parentView.bringSubviewToFront(subView)
Als u ten slotte subView
uit parentView
wilt verwijderen, kunt u het volgende doen:
Doelstelling C
[subView removeFromSuperview];
Snel
subView.removeFromSuperview()
Maak UIView met 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];
functies
Functie om weergave met vaste hoogte toe te voegen met behulp van autolayout-beperkingen
-(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];
}
Functie voeg beperking voor formaat wijzigen toe voor aangemaakte UIView.
-(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];
}
Gebruik van intrinsieke inhoudsgrootte
Bij het maken van een UIView-subklasse helpt intrinsieke inhoudgrootte om te voorkomen dat hardcoderende hoogte- en breedtebeperkingen worden ingesteld
een basisoverzicht van hoe een klas dit kan gebruiken
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)
}
}
Als u alleen intrinsiek één grootte wilt UIViewNoIntrinsicMetric
, kunt u de waarde UIViewNoIntrinsicMetric
voor de waarde die u wilt negeren.
override func intrinsicContentSize() -> CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)
}
Voordelen bij gebruik met AutoLayout en Interface Builder
Men zou deze ImageView (of UIImageView) kunnen nemen en de horizontale uitlijning instellen op superview center X en de verticale uitlijning op superview center Y.
Interfacebuilder zal op dit moment een klacht bij u indienen met de volgende waarschuwing:
Dit is waar de Placeholder Intrinsic Size
komt.
Als u naar het deelvenster Grootte en naar de vervolgkeuzelijst Intrinsieke grootte gaat, kunt u deze waarde wijzigen van Standaard naar Plaatshouder.
en nu verwijdert interfacebuilder de vorige waarschuwingen en u kunt deze grootte gebruiken om weergaven met dynamische afmetingen in interfacebuilder op te stellen.
Schud een beeld
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")
}
}
Deze functie kan worden gebruikt om de aandacht op een specifiek beeld te vestigen door het een beetje te schudden.