I'm working on an app that has a view that is positioned in various places depending on the screen size of it. The size depends on the device. I chose the size of the iPhone 5S. My app will run on an iPad.
See how was the Swift code:
class Main: UIViewController {
#IBOutlet var viewRect: UIView!
let DeviceHeigth:CGFloat = 1136 / 2
let DeviceWith:CGFloat = 640 / 2
override func viewDidLoad() {
super.viewDidLoad()
calcviewRectViewInit()
}
func calcviewRectViewInit(){
let space:CGFloat = 40
var frame: CGRect = viewRect.frame
frame.size.height = DeviceHeigth
frame.size.width = DeviceWith
frame.origin = CGPoint(x: toolView.frame.width + space, y: space)
viewRect.frame = frame
}
When you start, the Rect view is not positioned in the sizes and positions - by code. The viewDidLoad is not redrawn the view at runtime.
My question is: How can redraw the view (viewRect) when starting the app?
You should use the superview's frame as a reference.
For example:
var frame: CGRect = viewRect.frame
frame.size.height = self.view.frame.height / 2
frame.size.width = self.view.frame.width / 2
I referenced self.view instead of just view for clarity. UIViewController has the view property. This can be used where you are attempting to reference the device size.
You should also make sure you have the frame set correctly for the toolView prior to building this frame.
Additionally, I would recommend looking at Auto Layout for this particular problem. It was designed to aid in supporting user interfaces on various size screens. Below is a link to more information about it.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/index.html
Related
This question already has an answer here:
images render larger when loaded programmatically on iPhone X,Xs?
(1 answer)
Closed 1 year ago.
I have an ImageView on my Storyboard layout and I put some images over this ImageView.
To maintain the proportion of the image I created a code to calculate the image scale.
static func getImageScale(_ myImage:UIImageView) -> (width: CGFloat, height: CGFloat) {
let imageViewHeight = myImage.bounds.height
let imageViewWidth = myImage.bounds.width
let imageSize = myImage.image!.size
let myScaledImageHeight = imageViewHeight / imageSize.height
let myScaledImageWidth = imageViewWidth / imageSize.width
return (width: myScaledImageWidth, height: myScaledImageHeight)
}
This is how I use the code above:
ImageMarcasHelper.addScaledImageToScreenWithoutMovement(imageStringName: nome_imagem, scaledImageWidth: percentImageScale.width, scaledImageHeigth: percentImageScale.height, view: view)
Finally, I call this:
static func addScaledImageToScreenWithoutMovement(imageStringName imageNameString:String, scaledImageWidth:CGFloat, scaledImageHeigth:CGFloat, view:UIView) {
var xFinal = 0
var scaledImageWidthMultiplied:CGFloat = 0.0
let vc: UIViewController = view.parentViewController!
let vc_name = type(of: vc)
let image = UIImage(named: imageNameString)
print(image!)
let imageView = UIImageView(image: image!)
imageView.isAccessibilityElement = true
imageView.restorationIdentifier = imageNameString
if vc_name == ResenhaMarcasCabecaController.classForCoder() ||
vc_name == ResenhaMarcasMembrosPosterioresController.classForCoder() {
print("ResenhaMarcasCabecaController view used")
xFinal = Int((image?.size.width)!/1.9)
scaledImageWidthMultiplied = (image?.size.width)! * 1
} else {
// identifica todas as outras views como ResenhaMarcasFocinhoController ou ResenhaMarcasPescocoController ou ResenhaMarcasMembrosAnterioresController
print("viewcontroller genenrica usada")
xFinal = 0
scaledImageWidthMultiplied = (image?.size.width)! * scaledImageWidth
}
imageView.frame = CGRect(
x: xFinal,
y: 0,
width: Int( scaledImageWidthMultiplied ),
height: Int( (image?.size.height)! * scaledImageHeigth )
)
view.addSubview(imageView)
}
On some iPhone models the image resize works perfectly, but on other models it is not calculated correctly.
Check below the images from an iPhone 8 and an iPhone 8 Plus
The red image on the left side is centered, but on the right side the red image is NOT centered.
How can I fix that? There is another code that can I use to fix it or do I need to adapt something on my code?
Or maybe another solution, there is any way to detect the type of screen size or dimension? The same problem happens with iPhone 11 Max and iPhone Max Pro.
The red image is centered on iPhone 11 Max, but is NOT centered on iPhone Max Pro.
--- EDIT ---
#IBOutlet weak var imagemPrincipalCabeca:UIImageView!
I have an IBOutlet that contains the ImageView that I created using Storyboard with AutoLayout and I use the image inside this ImageView to get the scale to apply to other images.
This is the code that I use to get and apply the scale from the IBOutlet that is assigned to the ImageView
let percentImageScale = ImageMarcasHelper.getImageScale(imagemPrincipalCabeca)
ImageMarcasHelper.addScaledImageToScreenWithoutMovement(
imageStringName: nome_imagem,
scaledImageWidth: percentImageScale.width,
scaledImageHeigth: percentImageScale.height,
view: view)
I find out what is the problem.
All calculations are done inside the "viewDidLoad" method. Inside this method, the calculations are not correct because the view still does't know the correct size of the subviews(the container view)
I change all the calculations to be made inside the "viewWillAppear" method. This way I was able to get the correct screen width and height for the subview.
Currently, I have the following codes to make UIScrollView work for iPhone that I have set it up in the main storyboard.
var images: [String] = ["image1", "image2"]
var frame = CGRect(x:0,y:0,width:0,height:0)
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
pageControl.numberOfPages = images.count
for index in 0..<images.count {
frame.origin.x = scrollView.frame.size.width * CGFloat(index)
frame.size = scrollView.frame.size
let imgView = UIImageView(frame: frame)
imgView.image = UIImage(named: images[index])
self.scrollView.addSubview(imgView)
}
scrollView.contentSize = CGSize(width: (scrollView.frame.size.width * CGFloat(images.count)), height: scrollView.frame.size.height)
scrollView.delegate = self
}
I am trying to make a horizontal scrollview in xcode but when I run the project on iPad, the scrollview changes to the screen size but not the images. I looked up solutions online by adding views to the scroll view but it does not work. I am trying to make the images resize accordingly to the scrollview size.
Quick fact: Images are stored in Assets.xcassets.
Any help would be very much appreciated. Thanks!
I am trying to implement a image slider using scrollView and pageControl, with the images being appended to the scrollView programmatically using the .addSubView method. The code is as follows:
#IBOutlet weak var sliderScrollView: UIScrollView!
#IBOutlet weak var sliderPageControl: UIPageControl!
var images: [String] = ["0", "1", "2"]
func updateSlider() {
sliderPageControl.numberOfPages = images.count
for index in 0..<images.count {
frame.origin.x = sliderScrollView.frame.size.width * CGFloat(index)
print(sliderScrollView.frame.size.width)
frame.size = sliderScrollView.frame.size
let image = UIImageView(frame: frame)
image.contentMode = .scaleAspectFill
image.image = UIImage(named: cafeObject.images[index])
sliderScrollView.addSubview(image)
}
sliderScrollView.contentSize = CGSize(width: sliderScrollView.frame.size.width * CGFloat(cafeObject.images.count), height: sliderScrollView.frame.size.height)
sliderScrollView.delegate = self
sliderPageControl.currentPage = 0
}
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
switch scrollView {
case sliderScrollView:
sliderPageControl.currentPage = Int(pageNumber)
default:
break
}
}
As I designed the storyboard on iPhone 8 layout, the above code works nicely for iPhone 8. However, once I run the code in iPhone 8 Plus, the photo does not adapt the new size of the scrollView. I have added constraints to the scrollView such that the top, leading, trailing and bottom are equal to the super view's top, leading, trailing and bottom. When debugging, I realized that the UIImageView's frame is still using the old width as on iPhone 8.
Any workaround for this either programatically or using interface builder? Thanks!
Okay I managed to get this fixed by placing the updateSlider() function under viewDidLayoutSubviews() instead!
I have an NSWindow with it's contentView. In the awakeFromNib() of the NSWindow I have the following code:
override func awakeFromNib()
{
super.awakeFromNib()
/// Customize Window through XIBs
self.title = "Main Window"
let screenFrame = NSScreen.main?.frame
let windowPercentage: CGFloat = 0.9;
let offset: CGFloat = (1.0 - windowPercentage) / 2.0;
let windowFrame: NSRect = NSRect(x: (screenFrame?.width)! * offset, y: (screenFrame?.height)! * offset, width: (screenFrame?.width)! * windowPercentage, height: (screenFrame?.height)! * windowPercentage )
self.setFrame(windowFrame,display: true,animate: true)
self.backgroundColor = NSColor.lightGray
self.isRestorable = true
// Customize contentView
let viewPercentage: CGFloat = 0.6
self.contentView?.setFrameSize(NSSize(width: self.frame.size.width * viewPercentage, height: self.frame.size.height))
self.contentView?.setFrameOrigin( NSMakePoint( ( (self.frame.width) - (self.contentView?.frame.width)! )/2, ( (self.frame.height) - (self.contentView?.frame.height)!)/2) )
self.contentView?.autoresizingMask = [.width, .height, .minXMargin,.maxXMargin,.maxYMargin,.minYMargin]
}
I am trying to set up the contentView in the center and with a percentage of its NSWindow frame but it's failing when i resize the window. As soon as I start to resize the Window the contentView it's not resizing correctly, as you can see from the following image(the second one):
Image one
Image two
Should I override the resize(withOldSuperviewSize:) method to achieve this? (also the autoresize from interface builder don't resolve the issue)
You shouldn't attempt to change the size of the content view like that. I don't believe it's supported. The window controls the content view's size.
If you want a view of your own to occupy only a portion of the window's content area, you should add your view as a subview of the content view.
I have created custom UIView
import UIKit
#IBDesignable
class CategoryIcon: UIView {
let pi:CGFloat = CGFloat(M_PI)
#IBInspectable var circleColor:UIColor = UIColor.green
#IBInspectable var width:CGFloat = 10
#IBInspectable var radius: CGFloat = 20
override func draw(_ rect: CGRect) {
center = CGPoint(x:bounds.width/2 ,y:bounds.height/2)
let path = UIBezierPath(ovalIn: rect)
path.lineWidth = width
circleColor.setStroke()
path.stroke()
}
}
But when I add it to the storyboard does not matter where i put it it stay at the left top corner of parent view as you can see dots shows that view has moved but drawings are out of view and at the left top
what is the problem and how can it be solved?
Delete the following line from your draw(rect:) method:
center = CGPoint(x:bounds.width/2 ,y:bounds.height/2)
It's generally inadvisable to change a view's state while executing drawing code. But in this particular case, you're changing the location of the view's frame based on the origin of its bounds, which is ordinarily (0, 0), unless you've modified the bounds elsewhere. It's not clear what you were hoping to accomplish by doing that, but what it actually does is move the view to the upper left corner.