Place image position on top of button programatically - ios

I have a button on tap of which I need to show an image view which I did like below in button action
let imageName = "pointed_image.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
self.addSubview(imageView)
Now i want to position that image on top of button such that bottom center of image lies exactly on top center of button. (Imagine a callout view how it displays in map where pin is the location(button in my scenario) and callout alert is the "starbucks callout" of location (image in my scenario) -
Pls advice how shall i modify the below code to meet the requirement
//Build image view
let imageName = "pointed_image.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
//Get Button frame
let btnFrame = self.infoButton.frame
//position image on top of buttom
// CODE TO MODIFY BELOW
var imgFrame: CGRect = imageView.frame
imgFrame.origin.x = btnFrame.origin.x + 10
imgFrame.origin.y = btnFrame.origin.y - 10
imageView.frame = imgFrame
self.addSubview(imageView)

I would use imageView's center property to place it correctly:
// aligned by centers in x axis
imageView.center = CGPoint(x: self.infoButton.center.x,
// in y axis, using buttons origin and imageView's height placed right on top of the button
y: self.infoButton.frame.origin.y - (imageView.bounds.height / 2))

Related

How to move one image to another imageview with position changing animation

I have an image in a collection view, I want to move collection view image when I click on a cell that image move to imageview with animation.
I tried CABasicAnimation function but it couldn't work.
I tried to change x and y frame but that's not taking perfect cell frames.
I am trying using dummy frame but that's also not working.
UIView.animate(withDuration: 0.9, animations: {
//FIND VIEW FROM MAIN VIEW
if let oriView = self.viewCollection.viewWithTag(567){
//DUMY FRAME WHICH ADD ON COLLECTION CELL
self.dumy.frame = CGRect(x: oriView.frame.origin.x, y: oriView.frame.origin.y, width: oriView.frame.size.width, height: oriView.frame.size.height)
self.dumy.image = UIImage(named: "abc")
self.dumy.contentMode = .scaleAspectFill
self.dumy.clipsToBounds = false
self.viewCollection.addSubview(self.dumy)
}
}, completion: { done in
//IMAGEVIEW AT TOP OF SCREEN
self.imgView.image = UIImage(named: "abc")
self.imgView.layer.borderColor = myColors.AppBorder.cgColor
self.imgView.clipsToBounds = true
})
I want to move collectionview cell image move to the top four imageview when it's clicked.
Please help me out, how's to take cell frame or change position of the image with animation of moving.

Reposition view which is going out of screen frame

I have a imageView inside a UIView which displays on top of button when that button is tapped. The position of the button is dynamic.
If the button is on the extreme right of the screen, on tap of that button, half of the view which displays is going out of screen (i.e., only half is displayed)
In the code below, I'm setting my view's frame equal to image width and its height, imageView's position is (center of image is on top center of button )
Pls advice how i can reposition the such that the view will always inside the bounds. Below is the code Im using to display my custom view on top of button
//calculate frame for view
let imageHeight = myImage.size.height
let imageWidth = myImage.size.width
let imageX = myButton.minX -
((myView.myImageView.bounds.width)/2) + 15
let imageY = currentCellRect.minY -
(myView.myImageView.bounds.height) + 15
let imageFrame = CGRect(x: imageX, y: imageY, width:
imageWidth, height: imageHeight)
//Assign calculated from to the tool tip view
toolTipView.frame = imageFrame
After calculating imageWidth and imageX you could make a check like this:
[...]
var imageX = myButton.minX -
((myView.myImageView.bounds.width)/2) + 15
imageX = min(imageX, view.frame.width - imageWidth)
[...]
Notice that i changed imageX from let to var.

iOS - NavBar logo title is shifting to the left

NavBar logo title is shifting to the left because of rightBarButtonItem. How can I set its X position center horizontally.
Try something like this
if let navBar = self.navigationController?.navigationBar {
let image = UIImageView()
image.image = UIImage(named: "Icon.png")
image.frame = CGRectMake(0, 0, 50, 50)
image.center = CGPoint(x: navBar.center.x, y: navBar.center.y-19)
navBar.addSubview(image)
}
Given that you used Storyboard:
If you view your warnings, Xcode should notify you that the Frame will be different at run time. Often, it can correct that for you automatically if you click on the yellow triangle and select "Update constraints automatically".
Let me know if that helps.

How to center an image in navigationBar across all UIViewControllers? Swift / Obj-C

Problem visually:
I have tried putting the image in the center of its own frame with no luck. I have also tried to center it with playing the x of the CGRect with no luck either. I presume I can just put an empty icon with the same background as the navigation bar; however, I don't want to do it that way. I might have 2-3 icons on the right; then what?
let image = UIImage(named: "some_logo")!
let imageSize = CGSizeMake(60, 42)
let marginX: CGFloat = (self.navigationController!.navigationBar.frame.size.width / 2) - (imageSize.width / 2)
let imageView = UIImageView(frame: CGRect(x: marginX, y: 0, width: imageSize.width, height: imageSize.height))
imageView.image = image
imageView.contentMode = .ScaleAspectFit
self.navigationItem.titleView = imageView
I prefer swift but obj-c solutions are welcomed as well.
Any pointers appreciated.
This app has nothing to do with KIA, it is just some logo I got off the google search, searching "some logo".
I have faced the same issue. Then i tried one code shown below.
override func viewDidAppear(animated: Bool) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "googlePlus")
imageView.image = image
navigationItem.titleView = imageView
}
This Code working fine when i tested with Left & Right Bar Button.
But in my previous code there is no Right Bar Button.
So the image is moving towards right.
For solving this i created a Right Bar Button & change the Tint color to clear color.
So everything seems to be working fine. This is one Temporary Solution for your problem.
The easiest way of doing this is in Interface Builder.
Simply drag a 'NavigationItem' from the object library and place it into your ViewController, then place a UIView where the title goes (ensure you set the background to 'clear')
Then place a UIImageView into that view and set the image in the Attributes Inspector to your required image. Scale your UIImage accordingly and set your your constraints accordingly.
I created an extension for solving this problem using the hint of #idrougge.
In order to center the title view image no matter what buttons you have, a content view is set as title view, then the image view is added as child of the content view. Finally, using constraints the image view is aligned inside its parent (content view).
import UIKit
extension UIViewController {
func addLogoToNavigationBarItem() {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.heightAnchor.constraint(equalToConstant: <your_height>).isActive = true
imageView.contentMode = .scaleAspectFit
imageView.image = <your_image>
//imageView.backgroundColor = .lightGray
// In order to center the title view image no matter what buttons there are, do not set the
// image view as title view, because it doesn't work. If there is only one button, the image
// will not be aligned. Instead, a content view is set as title view, then the image view is
// added as child of the content view. Finally, using constraints the image view is aligned
// inside its parent.
let contentView = UIView()
self.navigationItem.titleView = contentView
self.navigationItem.titleView?.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
}
}
I hope this helps someone,
Xavi
As question heading stated "Swift / Obj-C" so I am sharing code of Obj-C :
UIImageView *titleImage = (UIImageView *)self.navigationItem.titleView;
titleImage = [[UIImageView alloc]initWithFrame:CGRectMake((self.navigationController.navigationBar.frame.size.width/2) - (100/2), 0, 100,self.navigationController.navigationBar.frame.size.height)];
//setting the image for UIImageView
titleImage.image = [UIImage imageNamed:#"someLogo"];
titleImage.contentMode = UIViewContentModeCenter;
self.navigationItem.titleView = titleImage;
Had same issue on phones with smaller sizes. Image in title was moving to right. Causing this issue back button -> [back_button][title_view]. Its centered when there is no back button or there is right bar button. Richard Hope's was right, you just need to put UIView first, and then put UIImageView as subview. Programmatically could be done like this.
private var imageView: UIView {
let bannerWidth = navigationBar.frame.size.width * 0.5 // 0.5 its multiplier to get correct image width
let bannerHeight = navigationBar.frame.size.height
let view = UIView()
view.backgroundColor = .clear
view.frame = CGRect(x: 0, y: 0, width: bannerWidth, height: bannerHeight)
let image = UIImage(named: "your_image_name")
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
view.addSubview(imageView)
return view
}
The just change titleView
navigationItem.titleView = imageView
What about setting the center of your image equals to the navigationBar.center instead of setting a margin?
//assuming we already have our navigationController
let myNicelLogoWidth = 100
let myNiceLogoHeight = 50
//start positioning your logo at 0.0, 0.0
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: myNicelLogoWidth, height: myNiceLogoHeight))
imageView.contentMode = .scaleAspectFit
imageView.center = navigationBar.center //the put your image at the center
let image = UIImage(named: "myNiceLogoImage")
imageView.image = image
navigationItem.titleView = imageView
I once face with this problem, and finally i found out that the problem is the previous navigation bar title still located next to burger button, but it's invisible.
Fast solution but not sure if it's the best is to change the previous navigation bar title to empty string before show the next view controller.
Hope it's help.

Image in top background of UITableView - iOS

I can set an image to my TableView background, but the image is in the center of the view.
How can I set the image to top ?
I'm using staticTableView
let image = UIImageView(image: UIImage(named: "img.jpg"))
self.settingsTableView.backgroundView = image
self.settingsTableView.backgroundView?.frame = CGRectZero
self.settingsTableView.backgroundView?.contentMode = UIViewContentMode.ScaleAspectFit
If you're using a static table and theres no chance of changing it you might want to take an approach like this:
override func viewDidLoad() {
super.viewDidLoad()
//Create the UIImage
let image = UIImage(named: "testing")
//Create a container view that will take all of the tableView space and contain the imageView on top
let containerView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: self.view.bounds.width, height: self.view.bounds.height))
//Create the UIImageView that will be on top of our table
let imageView = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: self.view.bounds.width, height: image!.size.height))
//Set the image
imageView.image = image
//Clips to bounds so the image doesnt go over the image size
imageView.clipsToBounds = true
//Scale aspect fill so the image doesn't break the aspect ratio to fill in the header (it will zoom)
imageView.contentMode = UIViewContentMode.ScaleAspectFit
containerView.addSubview(imageView)
self.tableView.backgroundView = containerView
}
Make the cells or the headers transparent as you wish. I don't know how your UI should work. This method WON'T scroll the imageView but you can simply do it in the scrollView delegate method. Let me know if you need it to scroll and I'll help you out

Resources