Alignment UIImageView mit Aspect Fit

Wenn Sie mit Storyboards erreicht werden kann dies mit Einschränkungen...

Zuerst ein UIView mit der gewünschten endgültigen Rahmen - /Randbedingungen. Hinzufügen eines UIImageView der UIView. Legen Sie die contentMode Aspekt zu Füllen. Stellen Sie die UIImageView-frame werden die gleichen Verhältnis, wie das Bild (dies vermeidet das Storyboard Warnungen später). Stecken Sie die Seiten, um die UIView mit standard-Randbedingungen. Pin den oberen ODER unteren Rand (je nachdem, wo Sie es wünschen ausgerichtet), um die UIView mit standard-Randbedingungen. Schließlich fügen Sie ein Seitenverhältnis Einschränkung der UIImageView (sicherstellen, dass Verhältnis wie das Bild).

InformationsquelleAutor der Antwort Michael Platt

Das ist ein bisschen tricky, da es keine option, um eine weitere Angleichung der Regeln, wenn Sie bereits eine ausgewählte Inhalte-Modus (.scaleAspectFit).

Aber hier ist ein workaround zu diesem:

Müssen zuerst die Größe Ihrer Quelle Bild explizit von der Berechnung der Dimensionen (wenn es mal in einem UIImageView mit contentMode = .scaleAspectFit).

extension UIImage {

    func aspectFitImage(inRect rect: CGRect) -> UIImage? {
        let width = self.size.width
        let height = self.size.height
        let scaleFactor = width > height ? rect.size.height / height : rect.size.width / width

        UIGraphicsBeginImageContextWithOptions(CGSize(width: width * scaleFactor, height: height * scaleFactor), false, 0.0)
        self.draw(in: CGRect(x: 0.0, y: 0.0, width: width * scaleFactor, height: height * scaleFactor))

        defer {
            UIGraphicsEndImageContext()
        }

        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

Dann müssen Sie einfach rufen Sie diese Funktion auf Ihrem ursprünglichen Bild aus, indem Sie Ihre Bildansicht frame, und ordnen Sie das Ergebnis Ihrer UIImageView.image Eigenschaft. Auch stellen Sie sicher, dass Sie Ihre Bildansicht die gewünschte contentMode hier (oder sogar im Interface Builder)!

let image = UIImage(named: "MySourceImage")
imageView.image = image?.aspectFitImage(inRect: imageView.frame)
imageView.contentMode = .left

InformationsquelleAutor der Antwort choofie

Ich weiß, dies ist ein Alter thread, aber ich dachte, ich würde teilen, was ich Tat, um ganz einfach die region abgeschnitten von der Oberseite zu der Unterseite des Bildes view im Interface Builder, falls jemand das gleiche problem hatte ich auch Tat. Ich hatte eine UIImageView, gefüllt von meiner ViewController, und versuchte der Spitze bleiben die gleichen, unabhängig von der Größe des Geräts Bildschirm.

1. Habe ich das retina 4 Formfaktor (Editor->Anwenden der Retina-4-Form-Factor).

2. Ich steckte die Höhe und Breite.

Nun, wenn der Bildschirm ändert seine Größe, die UIImageView ist eigentlich die gleiche Größe haben, und die view-controller nur clips was ist aus dem Bildschirm. Die Rahmen Ursprung bleibt bei 0,0, also unten und rechts vom Bild abgeschnitten werden, nicht die oberen.

Hoffe, das hilft.

InformationsquelleAutor der Antwort GLee

Ich dies Problem gelöst, indem bilden von Unterklassen UIImageView und überschreiben der setImage: Methode. Die Unterklasse würde zuerst speichern Sie die ursprünglichen Werte für Herkunft und Größe, also könnte es das original-set-Größe als bounding box.

Ich den Inhalt im Modus UIViewContentModeAspectFit. Innerhalb von setImage: ich schnappte mir die Bild-Breite zu Höhe-Verhältnis und dann verkleinert das Bild anzuzeigen, passen die gleichen Verhältnis wie das Bild. Nach dem ändern der Größe, habe ich meinen frame-Eigenschaften, um die Ansicht auf der gleichen Stelle es vorher war, und dann rief ich die super setImage:.

Diese Ergebnisse in einem Bild anzeigen, der Rahmen ist passend für das Bild genau, so dass der Aspekt passt, funktioniert und das Bild anzeigen von frame-Eigenschaften tun, die schweres heben, indem Sie die Bild-Ansicht, wo es sein sollte, um den gleichen Effekt zu erzielen.

Hier finden Sie den code, den ich verwendet:

Erste, und ich finde es Recht nützlich im Allgemeinen, ist eine Kategorie UIView, die macht es einfach, legen Sie die frame-Eigenschaften auf einen Blick über die Eigenschaften wie Links, rechts, oben, unten, Breite, Höhe, usw.

UIImageView+FrameAdditions

@interface UIView (FrameAdditions)

@property CGFloat left, right, top, bottom, width, height;
@property CGPoint origin;

@end

@implementation UIView (FrameAdditions)

- (CGFloat)left {
    return self.frame.origin.x;
}

- (void)setLeft:(CGFloat)left {
    self.frame = CGRectMake(left, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
}

- (CGFloat)right {
    return self.frame.origin.x + self.frame.size.width;
}

- (void)setRight:(CGFloat)right {
    self.frame = CGRectMake(right - self.frame.size.width, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
}

- (CGFloat)top {
    return self.frame.origin.y;
}

- (void)setTop:(CGFloat)top {
    self.frame = CGRectMake(self.frame.origin.x, top, self.frame.size.width, self.frame.size.height);
}

- (CGFloat)bottom {
    return self.frame.origin.y + self.frame.size.height;
}

- (void)setBottom:(CGFloat)bottom {
    self.frame = CGRectMake(self.frame.origin.x, bottom - self.frame.size.height, self.frame.size.width, self.frame.size.height);
}

- (CGFloat)width {
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)width {
    self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, width, self.frame.size.height);
}

- (CGFloat)height {
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)height {
    self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, height);
}

- (CGPoint)origin {
    return self.frame.origin;
}

- (void)setOrigin:(CGPoint)origin {
    self.frame = CGRectMake(origin.x, origin.y, self.frame.size.width, self.frame.size.height);
}

@end

Dies ist die Unterklasse von UIImageView. Es ist nicht vollständig getestet, aber es sollte auf die Idee kommen über. Dies könnte erweitert werden, um Ihren eigenen neuen Modi für die Ausrichtung.

BottomCenteredImageView

@interface BottomCenteredImageView : UIImageView

@end


@interface BottomCenteredImageView() {
    CGFloat originalLeft;
    CGFloat originalBottom;
    CGFloat originalHeight;
    CGFloat originalWidth;
}

@end

@implementation BottomCenteredImageView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        [self initialize];
    }
    return self;
}

- (void)awakeFromNib {
    [self initialize];
}

- (void)initialize {
    originalLeft = self.frame.origin.x;
    originalHeight = CGRectGetHeight(self.frame);
    originalWidth = CGRectGetWidth(self.frame);
    originalBottom = self.frame.origin.y + originalHeight;
}

- (void)setImage:(UIImage *)image {
    if(image) {
        self.width = originalWidth;
        self.height = originalHeight;
        self.left = originalLeft;
        self.bottom = originalBottom;

        float myWidthToHeightRatio = originalWidth/originalHeight;
        float imageWidthToHeightRatio = image.size.width/image.size.height;
        if(myWidthToHeightRatio >= imageWidthToHeightRatio) {
            //Calculate my new width
            CGFloat newWidth = self.height * imageWidthToHeightRatio;
            self.width = newWidth;
            self.left = originalLeft + (originalWidth - self.width)/2;
            self.bottom = originalBottom;
        } else {
            //Calculate my new height
            CGFloat newHeight = self.width / imageWidthToHeightRatio;
            self.height = newHeight;
            self.bottom = originalBottom;
        }
        self.contentMode = UIViewContentModeScaleAspectFit;
        [super setImage:image];
    } else {
        [super setImage:image];
    }
}

@end

InformationsquelleAutor der Antwort slemke