iOS
UIImageView

Skapa en UIImageView

För att skapa en UIImageView programmatiskt, behöver du bara skapa en instans av UIImageView :

//Swift
let imageView = UIImageView()

//Objective-C
UIImageView *imageView = [[UIImageView alloc] init];

Du kan ställa in storleken och positionen för UIImageView med en CGRect :

//Swift
imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

//Objective-C
imageView.frame = CGRectMake(0,0,200,200);

Eller så kan du ställa in storleken under initieringen:

//Swift
UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

//Objective-C
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,200,200);

//Alternative way of defining frame for UIImageView
UIImageView *imageView = [[UIImageView alloc] init];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size.width = 200;
imageViewFrame.size.height = 200;
imageViewFrame.origin.x = 0;
imageViewFrame.origin.y = 0;
imageView.frame = imageViewFrame;

Obs! Du måste importera UIKit att använda en UIImageView .

Tilldela en bild till en UIImageView

Du kan tilldela en bild till en UIImageView under initieringen eller senare med image :

//Swift
UIImageView(image: UIImage(named: "image1"))

UIImageView(image: UIImage(named: "image1"), highlightedImage: UIImage(named: "image2"))

imageView.image = UIImage(named: "image1") 

//Objective-C
[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"];

[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"] highlightedImage:[UIImage imageNamed:@"image2"]];

imageView.image = [UIImage imageNamed:@"image1"];

Animera en UIImageView

Du kan animera en UIImageView genom att snabbt visa bilder på den i en sekvens med UIImageView animationsegenskaper:

imageView.animationImages = [UIImage(named: "image1")!,
                             UIImage(named: "image2")!,
                             UIImage(named: "image3")!,
                             UIImage(named: "image4")!,
                             UIImage(named: "image5")!,
                             UIImage(named: "image6")!,
                             UIImage(named: "image7")!,
                             UIImage(named: "image8")!] 
imageView.animationDuration = 0.3
imageView.animationRepeatCount = 1

Den animationImages Fastigheten är en Array av UIImages som drivs igenom från topp till botten när animeringen utlöses.

Egenskapen animationDuration är ett Double säger hur många sekunder animationen kommer att köras i.

Egenskapen animationRepeatCount är en Int som säger hur många gånger animationen kommer att köras.

För att starta och stoppa animeringen kan du ringa lämpliga metoder för att göra det:

imageView.startAnimating()
imageView.stopAnimating()

Det finns metoden isAnimating() som returnerar ett Boolean värde som indikerar om animationen körs i ett ögonblick eller inte.

Observera att detta inte är ett särskilt effektivt sätt att skapa animationer: det är ganska långsamt och resurskrävande. Överväg att använda lager eller Sprites för bättre resultat

Gör en bild till en cirkel eller rundad

Detta exempel visar hur man gör en UIView eller UIImageView , avrundad med någon radie som denna:

Objective-C

someImageView.layer.cornerRadius = CGRectGetHeight(someImageView.frame) / 2;
someImageView.clipsToBounds = YES;

Snabb

someImageView.layer.cornerRadius = someImageView.frame.height/2
// this should alleviate the performance hit that adding transparency may cause - see http://stackoverflow.com/a/6254531/189804
// Be sure to check scrolling performance with Instruments if you take this approach.
someImageView.layer.shouldRasterize = true
someImageView.clipsToBounds = true // All parts of the image that are outside its bounds (the frame) are cut out (makes the rounded corners visible)

Det föreslås att om du använder autolayout så lägger someImageView.layer.cornerRadius koden viewDidLayoutSubviews i viewDidLayoutSubviews . Detta gör att bildens cornerRadius kan uppdateras om bilden ändrar storlek.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    someImageView.layer.cornerRadius = someImageView.frame.size.width/2
    someImageView.layer.masksToBounds = true
}

UII-bild maskerad med etikett

Detta gör bilden maskerad till formen på bokstäverna på etiketten:

Objective-C

self.maskImage.layer.mask = self.maskLabel.layer;
self.maskImage.layer.masksToBounds = YES;

Snabb 3

maskImageView.mask = maskLabel
maskImageView.masksToBounds = true

Här är resultatet:

Ändra färg på en bild

//Swift
imageView.tintColor = UIColor.redColor()
imageView.image = imageView.image?.imageWithRenderingMode(.AlwaysTemplate)

//Swift 3
imageView.tintColor = UIColor.red
imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)

//Objective-C
imageView.tintColor = [UIColor redColor];
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]

Hur egenskaperna Läge påverkar en bild

Egenskaper för innehållsläget i en vy berättar hur dess innehåll ska läggas ut. I Interface Builder kan de olika lägena väljas i Attribute Inspector.

Låt oss använda två bildvyer för att se hur de olika lägena fungerar.

Skala för att fylla

Bildhöjderna och -bredderna sträcks för att matcha storleken på UIImageView .

Aspect Fit

Bildens längsta sida (antingen höjd eller bredd) är sträckt för att matcha vyn. Detta gör bilden så stor som möjligt medan du fortfarande visar hela bilden och inte snedvrider höjden eller bredden. (Jag ställde in UIImageView bakgrunden till blå så att storleken är klar.)

Aspektfyllning

Bildens kortaste sida (antingen höjd eller bredd) är sträckt för att matcha vyn. Liksom "Aspect Fit" förvrängs inte bildens proportioner från deras ursprungliga bildförhållande.

Rita om

Redraw är endast för anpassade vyer som behöver göra sin egen skalning och ändra storlek. Vi använder inte en anpassad vy, så vi bör inte använda Redraw. Observera att här UIImageView bara ger oss samma resultat som Scale to Fill, men det gör mer arbete bakom kulisserna.

Om Redraw säger Apple-dokumentationen :

Innehållslägen är bra för att återvinna innehållet i din vy, men du kan också ställa in innehållsläget till UIViewContentModeRedraw värdet när du specifikt vill att dina anpassade vyer ska rita om sig själva under skalning och storleksändring. Att ställa in visningens innehållsläge till detta värde tvingar systemet att ringa din vy's drawRect: -metod som svar på geometriförändringar. I allmänhet bör du undvika att använda detta värde när det är möjligt, och du bör verkligen inte använda det med vanliga systemvyer.

Centrum

Bilden är centrerad i vyn, men bildens längd och bredd är inte sträckt.

Topp

Bildens övre kant är centrerad horisontellt längst upp i vyn, och bildens längd och bredd är inte sträckt.

Botten

Bildens nedre kant är centrerad horisontellt längst ned i vyn och bildens längd och bredd är inte sträckt.

Vänster

Bildens vänstra kant är centrerad vertikalt till vänster om vyn, och bildens längd och bredd är inte sträckt.

Rätt

Bildens högra kant är vertikalt centrerad till höger om vyn, och bildens längd och bredd är inte sträckt.

Övre vänstra

Det övre vänstra hörnet av bilden placeras i det övre vänstra hörnet av vyn. Bildens längd och bredd är inte sträckt.

Överst till höger

Det övre högra hörnet av bilden placeras i det övre högra hörnet av vyn. Bildens längd och bredd är inte sträckt.

Nedre vänstra

Det nedre vänstra hörnet av bilden placeras i det nedre vänstra hörnet av vyn. Bildens längd och bredd är inte sträckt.

Nere till höger

Det nedre högra hörnet av bilden placeras i det nedre högra hörnet av vyn. Bildens längd och bredd är inte sträckt.

anteckningar

• Detta exempel kommer ursprungligen härifrån .

• Om innehållet (i vårt fall bilden) har samma storlek som vyn (i vårt fall UIImageView ), kommer inte att ändra innehållsläget någon märkbar skillnad.

• Se denna och denna fråga för en diskussion om innehållslägen för andra vyer än UIImageView .

• För att ställa in inställning av innehållsläget programmatiskt gör du följande:

    imageView.contentMode = UIViewContentMode.scaleToFill
    imageView.contentMode = UIViewContentMode.scaleAspectFit
    imageView.contentMode = UIViewContentMode.scaleAspectFill
    imageView.contentMode = UIViewContentMode.redraw
    imageView.contentMode = UIViewContentMode.center
    imageView.contentMode = UIViewContentMode.top
    imageView.contentMode = UIViewContentMode.bottom
    imageView.contentMode = UIViewContentMode.left
    imageView.contentMode = UIViewContentMode.right
    imageView.contentMode = UIViewContentMode.topLeft
    imageView.contentMode = UIViewContentMode.topRight
    imageView.contentMode = UIViewContentMode.bottomLeft
    imageView.contentMode = UIViewContentMode.bottomRight