iOS
UIImageView

Utwórz UIImageView

Aby programowo utworzyć UIImageView , wystarczy utworzyć instancję UIImageView :

//Swift
let imageView = UIImageView()

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

Możesz ustawić rozmiar i pozycję UIImageView za pomocą CGRect :

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

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

Lub możesz ustawić rozmiar podczas inicjalizacji:

//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;

Uwaga: Musisz zaimportować UIKit aby korzystać z UIImageView .

Przypisywanie obrazu do UIImageView

Możesz przypisać obraz do UIImageView podczas inicjalizacji lub później, używając właściwości 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"];

Animowanie UIImageView

Możesz animować UIImageView , szybko wyświetlając obrazy w sekwencji za pomocą właściwości animacji UIImageView :

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

Właściwość animationImages to Array UIImages która jest uruchamiana od góry do dołu po uruchomieniu animacji.

Właściwość animationDuration to wartość Double , która określa, przez ile sekund będzie działać animacja.

Właściwość animationRepeatCount to liczba Int która określa liczbę uruchomień animacji.

Aby uruchomić i zatrzymać animację, możesz wywołać odpowiednie metody:

imageView.startAnimating()
imageView.stopAnimating()

Istnieje metoda isAnimating() która zwraca wartość Boolean wskazującą, czy animacja jest uruchomiona w danym momencie, czy nie.

Pamiętaj, że nie jest to bardzo wydajny sposób tworzenia animacji: jest dość powolny i pochłania zasoby. Rozważ użycie warstw lub duszków, aby uzyskać lepsze wyniki

Tworzenie obrazu w okrąg lub zaokrąglenie

Ten przykład pokazuje, jak utworzyć UIView lub UIImageView , w zaokrągleniu z pewnym promieniem:

Cel C

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

Szybki

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)

Sugeruje się, że jeśli używasz autolayout że można umieścić someImageView.layer.cornerRadius kod w viewDidLayoutSubviews . Umożliwi to aktualizację cornerRadius jeśli obraz zmieni rozmiar.

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

UIImage zamaskowany przez Label

To powoduje, że obraz jest maskowany do kształtu liter etykiety:

Cel C

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

Szybki 3

maskImageView.mask = maskLabel
maskImageView.masksToBounds = true

Oto wynik:

Zmień kolor obrazu

//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]

Jak właściwość Tryb wpływa na obraz

Właściwość trybu zawartości widoku informuje, w jaki sposób należy ułożyć jego treść. W Konstruktorze interfejsów różne tryby można wybierać w Inspektorze atrybutów.

Użyjmy dwóch widoków obrazu, aby zobaczyć, jak działają różne tryby.

Skaluj, aby wypełnić

Wysokości i szerokości obrazu są rozciągane w celu dopasowania do rozmiaru UIImageView .

Dopasowanie kształtu

Najdłuższy bok (wysokość lub szerokość) obrazu jest rozciągnięty w celu dopasowania do widoku. To sprawia, że obraz jest tak duży, jak to możliwe, jednocześnie wyświetlając cały obraz i nie zniekształcając wysokości ani szerokości. (Ustawiam tło UIImageView na niebieskie, aby jego rozmiar był wyraźny).

Wypełnienie aspektu

Najkrótsza strona (wysokość lub szerokość) obrazu jest rozciągnięta w celu dopasowania do widoku. Podobnie jak „Dopasowanie proporcji” proporcje obrazu nie są zniekształcone w stosunku do oryginalnych proporcji.

Przerysować

Przerysuj jest tylko dla widoków niestandardowych, które muszą samodzielnie skalować i zmieniać rozmiar. Nie używamy widoku niestandardowego, więc nie powinniśmy używać opcji Przerysuj. Zauważ, że tutaj UIImageView daje nam tylko ten sam wynik co Skalowanie do wypełnienia, ale robi więcej pracy za kulisami.

Dokumentacja Apple mówi o Redraw:

Tryby zawartości są przydatne do recyklingu zawartości twojego widoku, ale możesz także ustawić tryb zawartości na wartość UIViewContentModeRedraw gdy chcesz, aby widoki niestandardowe przerysowały się podczas operacji skalowania i zmiany rozmiaru. Ustawienie trybu zawartości widoku na tę wartość zmusza system do wywołania metody drawRect: w odpowiedzi na zmiany geometrii. Zasadniczo należy unikać korzystania z tej wartości, gdy tylko jest to możliwe, a na pewno nie należy jej używać ze standardowymi widokami systemu.

Centrum

Obraz jest wyśrodkowany w widoku, ale długość i szerokość obrazu nie są rozciągnięte.

Top

Górna krawędź obrazu jest wyśrodkowana poziomo u góry widoku, a długość i szerokość obrazu nie są rozciągnięte.

Dolny

Dolna krawędź obrazu jest wyśrodkowana poziomo u dołu widoku, a długość i szerokość obrazu nie są rozciągnięte.

Lewo

Lewa krawędź obrazu jest wyśrodkowana pionowo po lewej stronie widoku, a długość i szerokość obrazu nie są rozciągnięte.

Dobrze

Prawa krawędź obrazu jest wyśrodkowana pionowo po prawej stronie widoku, a długość i szerokość obrazu nie są rozciągnięte.

Lewy górny

Lewy górny róg obrazu jest umieszczony w lewym górnym rogu widoku. Długość i szerokość obrazu nie są rozciągane.

W prawym górnym rogu

Prawy górny róg obrazu jest umieszczony w prawym górnym rogu widoku. Długość i szerokość obrazu nie są rozciągane.

Na dole po lewej

Lewy dolny róg obrazu jest umieszczony w lewym dolnym rogu widoku. Długość i szerokość obrazu nie są rozciągane.

Prawy dolny

Prawy dolny róg obrazu jest umieszczony w prawym dolnym rogu widoku. Długość i szerokość obrazu nie są rozciągane.

Notatki

• Ten przykład pochodzi oryginalnie stąd .

• Jeśli treść (w naszym przypadku obraz) ma taki sam rozmiar jak widok (w naszym przypadku UIImageView ), to zmiana trybu zawartości nie spowoduje zauważalnej różnicy.

• Zobacz to i to pytanie, aby omówić tryby zawartości dla widoków innych niż UIImageView .

• W Swift, aby ustawić programowe ustawianie trybu zawartości, wykonaj następujące czynności:

    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