Подтвердить что ты не робот

Выравнивание UIImageView с помощью Aspect Fit

для моего UIImageView я выбираю Aspect Fit (InterfaceBuilder), но как изменить вертикальное выравнивание?

4b9b3361

Ответ 1

[EDIT - этот код немного заплесневелый, начиная с 2011 года, и все, кроме встроенных модов @ArtOfWarefare]

Вы не можете сделать это с UIImageView. Я создал простой подкласс UIView MyImageView, содержащий UIImageView. Код ниже.

// MyImageView.h
#import <UIKit/UIKit.h>

@interface MyImageView : UIView {
    UIImageView *_imageView;
}

@property (nonatomic, assign) UIImage *image;

@end

и

// MyImageView.m

#import "MyImageView.h"

@implementation MyImageView

@dynamic image;

- (id)initWithCoder:(NSCoder*)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        self.clipsToBounds = YES;
        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
        [self addSubview:_imageView];
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.clipsToBounds = YES;
        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
        [self addSubview:_imageView];
    }
    return self;
}

- (id)initWithImage:(UIImage *)anImage
{
    self = [self initWithFrame:CGRectZero];
    if (self) {
        _imageView.image = anImage;
        [_imageView sizeToFit];

        // initialize frame to be same size as imageView
        self.frame = _imageView.bounds;        
    }
    return self;
}

// Delete this function if you're using ARC
- (void)dealloc
{
    [_imageView release];
    [super dealloc];
}

- (UIImage *)image
{
    return _imageView.image;
}

- (void)setImage:(UIImage *)anImage
{
    _imageView.image = anImage;
    [self setNeedsLayout];
}

- (void)layoutSubviews
{
    if (!self.image) return;

    // compute scale factor for imageView
    CGFloat widthScaleFactor = CGRectGetWidth(self.bounds) / self.image.size.width;
    CGFloat heightScaleFactor = CGRectGetHeight(self.bounds) / self.image.size.height;

    CGFloat imageViewXOrigin = 0;
    CGFloat imageViewYOrigin = 0;
    CGFloat imageViewWidth;
    CGFloat imageViewHeight;


    // if image is narrow and tall, scale to width and align vertically to the top
    if (widthScaleFactor > heightScaleFactor) {
        imageViewWidth = self.image.size.width * widthScaleFactor;
        imageViewHeight = self.image.size.height * widthScaleFactor;
    }

    // else if image is wide and short, scale to height and align horizontally centered
    else {
        imageViewWidth = self.image.size.width * heightScaleFactor;
        imageViewHeight = self.image.size.height * heightScaleFactor;
        imageViewXOrigin = - (imageViewWidth - CGRectGetWidth(self.bounds))/2;
    }

    _imageView.frame = CGRectMake(imageViewXOrigin,
                                  imageViewYOrigin,
                                  imageViewWidth,
                                  imageViewHeight);
}

- (void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    [self setNeedsLayout];
}

@end

Ответ 2

При использовании раскадровки это может быть достигнуто с помощью ограничений...

Во-первых, UIView с требуемым окончательным кадром/ограничениями. Добавьте UIImageView в UIView. Установите для параметра contentMode значение Aspect Fill. Сделайте рамку UIImageView равным соотношению с изображением (это позволяет избежать любых предупреждений о раскадровке позже). Соедините стороны с UIView, используя стандартные ограничения. Прикрепите верхний ИЛИ нижний (в зависимости от того, где вы хотите его выровнять) с UIView, используя стандартные ограничения. Наконец добавьте ограничение соотношения сторон к UIImageView (соотношение уверенности в качестве изображения).

Ответ 3

Это немного сложнее, поскольку нет возможности установить дополнительные правила выравнивания, если вы уже выбрали режим содержимого (.scaleAspectFit).

Но вот обходной путь к этому:

Сначала необходимо явно изменить размер исходного изображения, рассчитав размеры (если бы он был в UIImageView с contentMode =.scaleAspectFit).

extension UIImage {

    func aspectFitImage(inRect rect: CGRect) -> UIImage? {
        let width = self.size.width
        let height = self.size.height
        let aspectWidth = rect.width / width
        let aspectHeight = rect.height / height
        let scaleFactor = aspectWidth > aspectHeight ? 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()
    }
}

Затем вам просто нужно вызвать эту функцию на исходном изображении, передав фрейм imageView и UIImageView.image свойству UIImageView.image. Также убедитесь, что вы установили свой imageView желаемый contentMode здесь (или даже в Интерфейсном contentMode)!

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

Ответ 4

Попробуйте установить:

imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.clipsToBounds = YES;

Это сработало для меня.

Ответ 5

Я использовал UIImageViewAligned для изменения выравнивания изображения благодаря разработчику

UIImageViewAligned

Ответ 6

Я знаю, что это старый поток, но я думал, что поделился бы тем, что я сделал, чтобы легко изменить обрезанный регион сверху вниз в представлении изображения в Interface Builder, если у кого-то была такая же проблема, как я, У меня был UIImageView, который заполнил представление моего ViewController и пытался сделать верхний упор таким же, независимо от размера экрана устройства.

  • Я применил форм-фактор сетчатки 4 (Editor- > Apply Retina 4 Form Factor).

  • Я приколол высоту и ширину.

Теперь, когда экран изменяет размер, UIImageView на самом деле того же размера, и контроллер вида просто зажимает то, что отключено от экрана. Начало кадра остается равным 0,0, поэтому снизу и справа от изображения обрезаются, а не сверху.

Надеюсь, что это поможет.

Ответ 7

Вы можете сделать это, сначала масштабируя, а затем изменяя размер. Дело в том, что я был обусловлен ростом. Я имею в виду, я должен был иметь изображение высотой 34 пикселей и независимо от ширины.

Итак, получите соотношение между фактической высотой контента и высотой представления (34 px), а затем масштабируйте также ширину.

Вот как я это сделал:

CGSize size = [imageView sizeThatFits:imageView.frame.size];

CGSize actualSize;
actualSize.height = imageView.frame.size.height;
actualSize.width = size.width / (1.0 * (size.height / imageView.frame.size.height));

CGRect frame = imageView.frame;
frame.size = actualSize;
[imageView setFrame:frame];

Надеюсь, что это поможет.

Ответ 8

Я пришел к следующему решению:

  1. Установите UIImageView содержимого UIImageView top: imageView.contentMode =.top
  2. Изменение размера изображения в соответствии с границами UIImageView

Для загрузки и изменения размера изображения я использую Kingfisher:

let size = imageView.bounds.size
let processor = ResizingImageProcessor(referenceSize: size, mode: .aspectFit)
imageView.kf.setImage(with: URL(string: imageUrl), options: [.processor(processor)])

Ответ 9

Я решил это путем подкласса UIImageView и переопределения метода setImage:. Подкласс сначала сохранит исходные значения для начала и размера, чтобы он мог использовать исходный размер набора как ограничивающий прямоугольник.

Я установил режим содержимого в UIViewContentModeAspectFit. Внутри setImage: я захватил соотношение ширины изображения и высоты, а затем изменил размер изображения, чтобы он соответствовал тому же соотношению, что и изображение. После изменения размера я скорректировал свойства кадра, чтобы установить вид изображения в том же месте, что и раньше, а затем я назвал super setImage:.

Это приводит к представлению изображения, кадр которого настроен так, чтобы точно соответствовать изображению, поэтому аспект подходит и свойства кадра изображения делают тяжелый подъем при размещении изображения, где должно быть, чтобы получить тот же эффект.

Вот код, который я использовал:

Прежде всего, и я считаю, что это довольно полезно в целом, это категория в UIView, которая упрощает установку свойств кадра при просмотре с помощью свойств, таких как левый, правый, верхний, нижний, ширина, высота и т.д.

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

Это подкласс UIImageView. Он не полностью протестирован, но должен получить эту идею. Это можно расширить, чтобы настроить свои собственные новые режимы для выравнивания.

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

Ответ 10

Если вам нужно достичь aspectFit и избавиться от пустых мест

Не забудьте убрать ограничение ширины вашего изображения из раскадровки и наслаждайтесь

Класс SelfSizedImageView: UIImageView {

override func layoutSubviews() {
    super.layoutSubviews()

    guard let imageSize = image?.size else {
        return
    }

    let viewBounds = bounds
    let imageFactor = imageSize.width / imageSize.height
    let newWidth = viewBounds.height * imageFactor

    let myWidthConstraint = self.constraints.first(where: { $0.firstAttribute == .width })
    myWidthConstraint?.constant = min(newWidth, UIScreen.main.bounds.width / 3)

    layoutIfNeeded()
}}

Ответ 11

Чтобы выровнять масштабируемое изображение, используйте автоматический макет. Пример выравнивания по правому краю после масштабирования в соответствии с UIImageView:

  • Создайте UIImageView, который содержит изображение
  • Добавить автоматические ограничения для прав, сверху, снизу, ширины
  • Установите изображение:
myUIImageView.contentMode = .ScaleAspectFit
myUIImageView.translatesAutoresizingMaskIntoConstraints = false
myUIImageView.image = UIImage(named:"pizza.png")

Соответствующее масштабируемое изображение вашего аспекта теперь выравнивается по правому краю в UIImageView

+----------------------------------+
|                           [IMAGE]|
+----------------------------------+

Измените ограничения для выравнивания по-разному в пределах изображения.