AspectRatio

AspectRatio

关注
发信
关注(28)粉丝(399)

在具有特定约束的scrollview中显示图像（使用自动布局）

本文介绍了在具有特定约束的scrollview中显示图像（使用自动布局）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的视图控制器中显示一个标题和一个图像。
我的约束是：




  • 标签可以位于屏幕顶部的50px

  • 标签可以有一行或多行

  • 图片可以是我标签的50像素

  • 图片必须具有



我有具有滚动视图的视图控制器：



视图控制器



---视图



------滚动视图



---------容器视图



------------标签



------------图片



我想使用故事板和自动布局。



我已成功对齐标签，



如果我使用aspect fit或scale to fill作为imageview，在这种情况下



$ b

使用宽高比： b

缩放填充：





但是如果我使用aspect fill，我不明白图像是如何显示的。



使用方向填充：





我已经约3天了，我在这个问题，它让我疯。
我也尝试使用不可见的spacer视图...
我找不到解决方案。



我用Xcode开发swift 6。



>为您的imageView添加一个@IBOutlet，并为您的视图控制器添加一个属性以跟踪约束：

  @IBOutlet weak var imageView：UIImageView！ 
 var aspectRatio：NSLayoutConstraint？

然后添加一个新图片：

  let tree = UIImage（named：WinterTree.jpg）！ 
 
 imageView.image = tree 
 aspectRatio = NSLayoutConstraint（item：imageView，attribute：.Height，relatedBy：.Equal，toItem：imageView，attribute：.Width，multiplier：trees.size。 height / tree.size.width，constant：1）
 imageView.addConstraint（aspectRatio！）

编辑2：但之后，我的视图不再滚动



我的容器视图的约束：





我删除了底部约束为了容器视图的高度适应内容，但我得到一个错误：



解决方案

问题是， imageView没有改变，所以图像只是在旧框架的中心。视图模式设置（纵横匹配，缩放至适合或纵横比填充）不会更改imageView的高度。



我可以通过执行以下操作来实现这个功能。

p>


  1. 我将图片的宽度限制为视图的宽度。


  2. 我为图像添加了一个AspectRatio约束。这将设置宽度与高度的比率，并且由于我已指定图像的宽度，因此现在将完全指定高度。我希望能够在代码中更新这个约束，当我加载一个新的图像（因为不同的图像有不同的长宽比），但我只能更改常量从代码而不是乘法器。因此，为了解决这个问题，我通过检查属性检查器中的占位符，创建了一个占位符约束。


  3. 在代码中，当我为imageView设置图像时，我添加一个约束来设置宽度的imageView到具有乘数的imageView的高度。这代替了在Interface Builder中设置的宽高比约束。



    首先，添加 @IBOutlet 为你的imageView和一个属性到你的视图控制器来跟踪约束：

      @IBOutlet weak var imageView：UIImageView！ 
     var aspectRatio：NSLayoutConstraint？

    然后添加一个新图片：

      let tree = UIImage（named：WinterTree.jpg）！ 
     
     imageView.image = tree 
     aspectRatio = NSLayoutConstraint（item：imageView，attribute：.Height，relatedBy：.Equal，toItem：imageView，attribute：.Width，multiplier：trees.size。 height / tree.size.width，constant：1）
     imageView.addConstraint（aspectRatio！）

    当需要更改图片时，请在添加新图片之前删除上一个aspectRatio约束：

      imageView.removeConstraint aspectRatio！）






我实现了类似于你的布局。我的项目有一个按钮代替你的标签，但否则它是类似的。当用户按下按钮时，我的应用程序会用完全不同的宽高比替换图像。这是文档大纲和我的项目的所有约束。





 第一项：WinterTree1.jpg .Width 
关系：等于
第二项：WinterTree1.jgp.Height 
常数：1 
优先级：1000 
乘数：0.68 
 
第一项：WinterTree1.jpg.Leading 
关系：等于
第二项：ContentView.Leading 
常量：8 
 
第一项：ContentView.Bottom 
关系：等于
第二项：WinterTree1.jpg.Bottom 
常量：8 
 
第一项：ContentView.Trailing 
关系：Equal 
第二项： WinterTree1.jpg.Trailing 
常数：8 
 
第一项：WinterTree1.jpg.Top 
关系：等于
第二项：Button.Bottom 
常数：20 
 
第一项：Button.Top 
关系：Equal 
第二项：ContentView.Top 
常量：20 
 
第一项：ContentView.Center X 
关系：等于
第二项：Button.Center X 
常量：0 
 
第一项：Superview.Trailing 
关系：等于
第二项：ContentView.Trailing 
常量：0 
 
第一项：ContentView.Leading 
关系：等于
第二项：Superview.Leading 
常量：0 
 
第一项：Superview.Bottom 
关系：等于
第二项：ContentView.Bottom 
常量：0 
 
第一项：ContentView.Top 
关系：等于
第二项：Superview.Top 
常量：0 
 
第一项：ContentView.Width 
关系：等于
第二项：Superview.Width 
常数：0 
 
第一项：Scroll View.Leading 
关系：Equal 
第二项：Superview .Leading 
常量：0 
 
第一项：Scroll View.Top 
关系：等于
第二项：Superview.Top 
常数：0 
 
第一项：Superview.Trailing 
关系：Equal 
第二项：Scroll View.Trailing 
常量：0 
 
第一项：底部布局Guide.Top 
关系：等于
第二项：Scroll View.Bottom 
常数：0


I would like display a title and below a image in my view controller.My constraints are :

  • the label can be at 50px of the top of the screen
  • the label can have one or many rows
  • the image can be at 50px of my label
  • the image must have the width of the screen
  • the scroll view must scroll depending on the size of all these elements

I have a view controller with a scroll view :

-view controller

---view

------scroll view

---------container view

------------label

------------image

I want use storyboard and auto layout.

I have succeeded to align the label correctly, but I am unable to display the image at 50px of the label and keep it ratio.

If I use "aspect fit" or "scale to fill" for the imageview, in this case, the label and the image are at 50px like I want.

With aspect fit :

With scale to fill :

But if I use "aspect fill", I don't understand how the image is displayed.

With aspect fill :

It has been about 3 days that I'm on this issue, it make me crazy.I tried also to use invisible "spacer" views...I don't find the solution.

I develop in swift with Xcode 6.

EDIT 1 : Positioning the image is solved with the vacawama advice

Add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:

@IBOutlet weak var imageView: UIImageView!
var aspectRatio:NSLayoutConstraint?

Then add a new image:

let tree = UIImage(named: "WinterTree.jpg")!

imageView.image = tree
aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1)
imageView.addConstraint(aspectRatio!)

EDIT 2 : But after, my view is no longer to scroll

Constraints of my container view :

I removed the bottom constraint in order to the height of the container view adapts to the content, but I get an error :

解决方案

The problem is that the height of the imageView is not getting changed, so the image is just centered over the old frame. The view mode setting (Aspect Fit, Scale To Fit, or Aspect Fill) does not change the height of your imageView. You need a constraint for the height of your imageView, but this constraint will change depending on your image.

I was able to make this work by doing the following.

  1. I constrained the width of the image to the width of the view.

  2. I added an AspectRatio constraint to the image. This sets the ratio of the width to the height, and since I have specified the width of the image, the height will now be fully specified. I had hoped to be able to update this constraint in code when I loaded a new image (because different images have different aspect ratios), but I could only change the constant from code and not the multiplier. So, to get around this, I made this a Placeholder constraint by checking Placeholder in the Attributes Inspector. This means that this constraint will be removed at build time.

  3. In code, when I set the image for the imageView, I add a constraint that sets the width of the imageView to the height of the imageView with a multiplier. This takes the place of the aspect ratio constraint that was set in Interface Builder.

    First, add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:

    @IBOutlet weak var imageView: UIImageView!
var aspectRatio:NSLayoutConstraint?

    Then add a new image:

    let tree = UIImage(named: "WinterTree.jpg")!

imageView.image = tree
aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1)
imageView.addConstraint(aspectRatio!)

    When it is time to change your image, remove the previous aspectRatio constraint before adding a new one:

    imageView.removeConstraint(aspectRatio!)

I implemented something similar to your layout. My project has a button in place of your label, but otherwise it is similar. When the user presses the button, my app replaces the image with one with an entirely different aspect ratio. Here is the Document Outline and all of the constraints from my project.

First Item:       WinterTree1.jpg.Width
Relation:         Equal
Second Item:      WinterTree1.jgp.Height
Constant:         1
Priority:         1000
Multiplier:       0.68

First Item:       WinterTree1.jpg.Leading
Relation:         Equal
Second Item:      ContentView.Leading
Constant:         8

First Item:       ContentView.Bottom
Relation:         Equal
Second Item:      WinterTree1.jpg.Bottom
Constant:         8

First Item:       ContentView.Trailing
Relation:         Equal
Second Item:      WinterTree1.jpg.Trailing
Constant:         8

First Item:       WinterTree1.jpg.Top
Relation:         Equal
Second Item:      Button.Bottom
Constant:         20

First Item:       Button.Top
Relation:         Equal
Second Item:      ContentView.Top
Constant:         20

First Item:       ContentView.Center X
Relation:         Equal
Second Item:      Button.Center X
Constant:         0

First Item:       Superview.Trailing
Relation:         Equal
Second Item:      ContentView.Trailing
Constant:         0

First Item:       ContentView.Leading
Relation:         Equal
Second Item:      Superview.Leading
Constant:         0

First Item:       Superview.Bottom
Relation:         Equal
Second Item:      ContentView.Bottom
Constant:         0

First Item:       ContentView.Top
Relation:         Equal
Second Item:      Superview.Top
Constant:         0

First Item:       ContentView.Width
Relation:         Equal
Second Item:      Superview.Width
Constant:         0

First Item:       Scroll View.Leading
Relation:         Equal
Second Item:      Superview.Leading
Constant:         0

First Item:       Scroll View.Top
Relation:         Equal
Second Item:      Superview.Top
Constant:         0

First Item:       Superview.Trailing
Relation:         Equal
Second Item:      Scroll View.Trailing
Constant:         0

First Item:       Bottom Layout Guide.Top
Relation:         Equal
Second Item:      Scroll View.Bottom
Constant:         0

这篇关于在具有特定约束的scrollview中显示图像（使用自动布局）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-06 04:40
Powered by LMLPHP ©2024 AspectRatio 0.035772