iOS
UIView

Składnia

1. // Cel C

2. [UIView nowość] // Uzyskaj obiekt widoku przydzielony i zainicjowany

3. [[Przydzielanie UIView] initWithFrame: (Pass CGRect)] // Uzyskaj widok przydzielony i zainicjowany ramką

4. [[Przydzielanie UIView] init] // Uzyskaj obiekt widoku przydzielony i zainicjowany

5. // Szybki

6. UIView () // Tworzy instancję UIView z ramką CGRect.zero

7. UIView (frame: CGRect) // Tworzy instancję UIView określającą ramkę

8. UIView.addSubview (UIView) // dodaj kolejną instancję UIView jako widok podrzędny

9. UIView.hidden // Uzyskaj lub ustaw widoczność widoku

10. UIView.alpha // Uzyskaj lub ustaw krycie widoku

11. UIView.setNeedsLayout () // Wymusza widok, aby zaktualizować jego układ

Uwagi

Utwórz UIView

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

Szybki

let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)

Zaokrągl widok

Aby utworzyć zaokrąglony widok UIView , określ cornerRadius dla layer widoku.

Dotyczy to również każdej klasy, która dziedziczy z UIView , takiej jak UIImageView .

Programowo

Kod SWIFT

someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10

Kod celu C

[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;

Przykład

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

Oto wynik pokazujący zaokrąglony efekt widoku przy użyciu określonego promienia narożnika:

Uwaga

Aby to zrobić, musisz dołączyć platformę QuartzCore.

 #import <QuartzCore/QuartzCore.h>

Konfiguracja scenorysu

Zaokrąglony efekt widoku można również uzyskać non-programmatically , ustawiając odpowiednie właściwości w Storyboard .

Ponieważ właściwości layer nie są widoczne w Storyboard, musisz zmodyfikować atrybut cornerRadius za pomocą sekcji Atrybuty środowiska wykonawczego zdefiniowanej przez użytkownika.

Szybkie rozszerzenie

Możesz użyć tego poręcznego rozszerzenia, aby zastosować zaokrąglony widok, o ile ma taką samą szerokość i wysokość.

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
    }
}

Aby go użyć:

yourView.setAsCircle()

Robienie zdjęcia

Możesz zrobić migawkę z UIView następujący sposób:

Szybki

let snapshot = view.snapshotView(afterScreenUpdates: true)

Cel C

UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];

Korzystanie z IBInspectable i IBDesignable

Jeden (lub dwa) z najfajniejszych nowych funkcji w ostatnich wydaniach Xcode są IBInspectable właściwości i IBDesignable UIView s. Nie mają one nic wspólnego z funkcjonalnością twojej aplikacji, ale wpływają na doświadczenie programisty w Xcode. Celem jest możliwość wizualnego sprawdzenia niestandardowych widoków w aplikacji na iOS bez uruchamiania go. Załóżmy, że masz widok niestandardowy o nazwie CustomView który dziedziczy z UIView . W tym widoku niestandardowym wyświetli ciąg tekstu o wyznaczonym kolorze. Możesz także nie wyświetlać żadnego tekstu. Potrzebujemy trzech właściwości:

var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true

Następnie możemy zastąpić funkcję drawRect w klasie:

if showText {
    if let text = text {
        let s = NSString(string: text)
        s.drawInRect(rect,
            withAttributes: [
                NSForegroundColorAttributeName: textColor,
                NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
            ])
    }
}

Zakładając, że właściwość text jest ustawiona, spowoduje to narysowanie ciągu w lewym górnym rogu widoku, gdy aplikacja zostanie uruchomiona. Problem polega na tym, że nie będziemy wiedzieć, jak to wygląda bez uruchamiania aplikacji. W tym miejscu IBInspectable i IBDesignable . IBInspectable pozwala nam wizualnie ustawiać wartości właściwości widoku w Xcode, podobnie jak w przypadku wbudowanych kontrolek. IBDesignable pokaże nam wizualny podgląd w serii ujęć. Oto jak powinna wyglądać klasa:

@IBDesignable
class CustomView: UIView {
    @IBInspectable var textColor: UIColor = UIColor.blackColor()
    @IBInspectable var text: String?
    @IBInspectable var showText: Bool = true

    override func drawRect(rect: CGRect) {
        // ...
    }
}

Lub w celu 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

Następne zrzuty ekranu pokazują, co dzieje się w Xcode. Pierwszy z nich ma miejsce po dodaniu poprawionej klasy. Zauważ, że istnieją trzy nowe elementy interfejsu użytkownika dla trzech właściwości. Kolor tekstu wyświetli próbnik kolorów, Tekst to tylko pole wprowadzania, a Pokaż tekst da nam opcje Off i On które są odpowiednio false i true .

Następny jest po zmianie koloru tekstu na czerwony za pomocą próbnika kolorów. Ponadto udostępniono trochę tekstu, aby funkcja drawRect go wyświetlała. Zauważ, że widok w Konstruktorze interfejsów również został zaktualizowany.

Na koniec ustawienie Pokaż tekst na Off w Inspektorze właściwości powoduje, że tekst wyświetlany w Konstruktorze interfejsów zniknie.

Wszyscy jednak wychodzimy z sytuacji, gdy musimy utworzyć zaokrąglone UIView na wielu widokach w Storyboard Zamiast deklarować IBDesignable dla każdego widoku Storyboard , lepiej jest stworzyć Extension UIView i uzyskać interfejs użytkownika zbudowany tylko dla każdego UIView w całym projekcie, aby utworzyć zaokrąglony widok, ustawiając promień narożnika. Konfigurowalny promień krawędzi na dowolnym UIView utworzonym w serii ujęć.

extension UIView {
    
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
    
}

Animowanie UIView

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()
}

Rozszerzenie UIView dla atrybutów rozmiaru i ramki

Jeśli chcemy uzyskać x-cordinate pochodzenia widoku, musimy napisać:

view.frame.origin.x

Dla szerokości musimy napisać:

view.frame.size.width

Ale jeśli dodamy proste rozszerzenie do UIView , możemy bardzo łatwo uzyskać wszystkie atrybuty, takie jak:

view.x
view.y
view.width
view.height

Pomoże to również ustawić następujące atrybuty:

view.x = 10
view.y = 10
view.width = 100
view.height = 200

A prostym rozszerzeniem byłoby:

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)
        }
    }
}

Musimy dodać ten plik klasy do projektu i będzie on dostępny do użycia w całym projekcie!

Programowo zarządzaj wstawianiem i usuwaniem UIView do i z innego UIView

Załóżmy, że masz obiekt parentView do którego chcesz programowo wstawić nowy subView (np. Gdy chcesz wstawić UIImageView do UIViewController ), niż możesz to zrobić w następujący sposób.

Cel C

[parentView addSubview:subView];

Szybki

parentView.addSubview(subView)

Możesz również dodać widok podrzędny poniżej innego subView2 , który jest już widokiem podrzędnym ParentView, używając następującego kodu:

Cel C

[parentView insertSubview:subView belowSubview:subView2];

Szybki

parentView.insertSubview(subView, belowSubview: subView2)

Jeśli chcesz wstawić go powyżej subView2 , możesz to zrobić w ten sposób:

Cel C

[parentView insertSubview:subView aboveSubview:subView2];

Szybki

parentView.insertSubview(subView, aboveSubview: subView2)

Jeśli gdzieś w twoim kodzie musisz subView na subView pewien subView , więc ponad wszystkimi parentView podrzędnymi ParentView, możesz to zrobić w następujący sposób:

Cel C

[parentView bringSubviewToFront:subView];

Szybki

parentView.bringSubviewToFront(subView)

Wreszcie, jeśli chcesz usunąć subView z parentView , możesz wykonać następujące czynności:

Cel C

[subView removeFromSuperview];

Szybki

subView.removeFromSuperview()

Utwórz UIView za pomocą 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];

Funkcje

Funkcja dodawania widoku o stałej wysokości za pomocą ograniczeń autolayout

-(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];

}

Funkcja dodaje ograniczenie pełnego rozmiaru dla utworzonego 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];
}

Wykorzystanie wewnętrznego rozmiaru treści

Podczas tworzenia podklasy UIView rzeczywisty rozmiar treści pomaga uniknąć ustawienia sztywnych ograniczeń wysokości i szerokości

podstawowe spojrzenie na to, jak klasa może to wykorzystać

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)
    }
}

Jeśli chcesz tylko wewnętrznie podać jeden rozmiar, możesz podać wartość UIViewNoIntrinsicMetric dla wartości, którą chcesz zignorować.

 override func intrinsicContentSize() -> CGSize {
     return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)   
 }

Korzyści przy korzystaniu z AutoLayout i Konstruktora interfejsów

Można wziąć ten ImageView (lub UIImageView) i ustawić wyrównanie w poziomie do centrum podglądu X i wyrównanie w pionie do centrum podglądu Y.

W tym momencie narzędzie do tworzenia interfejsów złoży skargę, podając następujące ostrzeżenie:

W tym miejscu pojawia się Placeholder Intrinsic Size .

Przechodząc do panelu Inspektor rozmiaru i do menu rozwijanego Rozmiar wewnętrzny, możesz zmienić tę wartość z domyślnej na zastępczą.

a teraz Konstruktor interfejsów usunie poprzednie ostrzeżenia i można użyć tego rozmiaru, aby dynamicznie skalować widoki ułożone w Konstruktorze interfejsów.

Shake a View

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")
    }
}

Tej funkcji można użyć, aby zwrócić uwagę na określony widok, potrząsając nim nieco.