How center a Navigation Bar Image [Swift] - swift

in my project I have a Navigation Bar with a Button to open a slide menu.
Now I am trying to set a title image instead of the title string. Unlikely the image is pushed slightly to the right instead of being centered. I thought its because of the slide menu button in the left corner of my navigation bar. If I set a title in main.storyboard everything look properly. Why is it so, that my image won't be centered.
Image function:
func addNavBarImage() {
let navController = navigationController!
let image = UIImage(named: "TransparentLogo")
let imageView = UIImageView(image: image)
let bannerWidth = navController.navigationBar.frame.size.width
let bannerHeight = navController.navigationBar.frame.size.height
let bannerX = bannerWidth - image!.size.width
let bannerY = bannerHeight - image!.size.height
imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView
}
Button function:
func addSlideMenuButton(){
let btnShowMenu = UIButton(type: UIButton.ButtonType.system)
btnShowMenu.setImage(self.defaultMenuImage(), for: UIControl.State())
btnShowMenu.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
btnShowMenu.addTarget(self, action: #selector(BaseViewController.onSlideMenuButtonPressed(_:)), for: UIControl.Event.touchUpInside)
btnShowMenu.tintColor = UIColor(red: 3, green: 49, blue: 79)
let customBarItem = UIBarButtonItem(customView: btnShowMenu)
self.navigationItem.leftBarButtonItem = customBarItem;
}

Change the frame of your titleView in func addNavBarImage() like this:-
func addNavBarImage() {
let navController = navigationController!
let image = UIImage(named: "TransparentLogo")
let imageView = UIImageView(image: image)
let bannerWidth = navController.navigationBar.frame.size.width
let bannerHeight = navController.navigationBar.frame.size.height
let bannerX = bannerWidth - image!.size.width
let bannerY = bannerHeight - image!.size.height
imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView
}
to this
func addNavBarImage() {
let imageView = UIImageView(image: #imageLiteral(resourceName: "TransparentLogo"))
imageView.frame = CGRect(x: 0, y: 0, width: 170, height: 30)
imageView.contentMode = .scaleAspectFit
let titleView = UIView(frame: CGRect(x: 0, y: 0, width: 170, height: 30))
titleView.addSubview(imageView)
titleView.backgroundColor = .clear
self.navigationItem.titleView = titleView
}

func centeredNavBarImageView() {
if let navcontroller = navigationController {
let image = #imageLiteral(resourceName: "logo")
let imageView = UIImageView(image: image)
let bannerWidth = navcontroller.navigationItem.accessibilityFrame.size.width
let bannerHeight = navcontroller.navigationBar.frame.size.height
let bannerX = bannerWidth / 2 - image.size.width / 2
let bannerY = bannerHeight / 2 - image.size.height / 2
imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
imageView.contentMode = .scaleAspectFit
self.navigationItem.titleView = imageView
}

Related

Background Color to imageView

I am trying to add a circle background to an image view. But I only see the image without background.
lazy var circle: UIImageView = {
let view = UIImageView()
view.contentMode = .scaleAspectFit
view.image = UIImage(named: "iconsCancelThin")
view.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
view.tintColor = KSColor.neutral700.getColor()
view.backgroundColor = KSColor.neutral700.getColor()
view.clipsToBounds = true
view.layer.cornerRadius = 16
return view
}()
guard let image = circle.image else { return }
self.cancelButton.setBackgroundImage(image, for: .normal, barMetrics: .default)

Show multiple images in ViewController in Swift

I have tried the following code to load multiple images in sequence in my ViewController.
import SwiftUI
class ViewController: UIViewController {
var ctrl = MainPageController()
override func viewDidLoad() {
super.viewDidLoad()
Thread.sleep(forTimeInterval: 4.0)
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height
var backgroundImageView = UIImageView(frame: CGRect(x:0, y:0, width: width, height: height))
backgroundImageView.image = UIImage(named: "loading")
backgroundImageView.contentMode = .scaleAspectFill
self.view.addSubview(backgroundImageView)
Thread.sleep(forTimeInterval: 5.0)
backgroundImageView.removeFromSuperview()
Thread.sleep(forTimeInterval: 5.0)
backgroundImageView = UIImageView(frame: CGRect(x:0, y:0, width: width, height: height))
backgroundImageView.image = UIImage(named: "loading1")
backgroundImageView.contentMode = .scaleAspectFill
self.view.addSubview(backgroundImageView)
Thread.sleep(forTimeInterval: 5.0)
backgroundImageView.removeFromSuperview()
self.performSegue(withIdentifier: "MainViewSegue", sender: self)
But I see only the second image. I want to load the first image, show it for about 5 seconds, then replace it with the second image, display that for 5 seconds. I have removed the image from the Launch.storyboard. Currently I cannot see any image. The self.performSegue works. How do I fix this problem?
Thanks
Vyasa
It looks like you are creating new image views. If you goal is to simply change the image after 5 seconds you can simplify this code to be something more like:
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
imageView.image = UIImage(named: "Load 1")
imageView.contentMode = .scaleAspectFill
self.view.addSubview(imageView)
DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
// the code in this block will only execute after 5 seconds
imageView.image = UIImage(named: "Load 2")
}

How do I add a background to a scroll view and have it repeat to the end?

I am making a roster on a scroll view with every slide being someone different. I was wondering if there is a way to set a background and have it repeat to the end as it cuts off at a certain person
Currently, I am copy and pasting the background and dragging it to match
for i in 0..
let label = UILabel(frame: CGRect(x:xPosition+110, y: 350, width: 200, height: 200))
label.text = names[i]
label.font = UIFont.systemFont(ofSize: 35, weight: UIFont.Weight.bold)
label.adjustsFontSizeToFitWidth = true
label.textColor = UIColor.black
let imageView = UIImageView()
imageView.image = UIImage(named: names[i])
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: xPosition-110, y: 150, width: 650, height: 250)
let descriptionM = UITextView(frame: CGRect(x: xPosition+65, y: 525, width: 300, height: 250))
descriptionM.text = desc[i]
descriptionM.textColor = UIColor.black
descriptionM.backgroundColor = UIColor.clear
descriptionM.contentMode = .scaleAspectFill
descriptionM.font = UIFont.systemFont(ofSize: 20)
scrollView.contentSize.width = scrollView.frame.width * CGFloat(i + 1)
scrollView.addSubview(label)
scrollView.addSubview(imageView)
scrollView.addSubview(descriptionM)
}
Results would be the photo to repeat to the end and past.
One way is to turn the background image into a resizable image with zero edge insets and the default (tiling) resizing mode. Set your image view's contentMode to .scaleToFill.
let image = UIImage(named: "background")!.resizableImage(withCapInsets: .zero)
imageView.contentMode = .scaleToFill
imageView.image = image
Then make sure your imageView is at least as big as your scroll view's contentSize.

Change UIBarButton image from gallery

I have UIBarButton and user can change image just chose photo or gallery image with image picker. My problem is bad scale image.
If I use AspectFit my UIBarButton look like this:
If I use AspectFill my UIBarButton look like this:
and if I try first change size image and after set it, image all time scratched:
This is my code:
func createPhotoBarButton(image: Data) {
let barbtn = UIBarButtonItem()
var image = UIImage(data:image)
if image == nil {
image = UIImage(named: "photoIcon")
}
let imageView = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0))
imageView.image = image?.resizedImage(newSize: CGSize(width: 35, height: 35))?.withRenderingMode(.alwaysOriginal)
// imageView.image = cropToBounds(image: image!, width: 35, height: 35)
// imageView.image = image
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = imageView.frame.size.height / 2
imageView.layer.masksToBounds = true
imageView.clipsToBounds = true
self.navigationItem.rightBarButtonItem = barbtn
barbtn.customView = imageView
barbtn.customView?.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(photoTapped(_:))))
}
And here func for resize image:
func resizedImage(newSize: CGSize) -> UIImage? {
guard size != newSize else { return self }
let hasAlpha = false
let scale: CGFloat = 0.0
UIGraphicsBeginImageContextWithOptions(newSize, !hasAlpha, scale)
UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
draw(in: CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height))
let newImage: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Help me plz find the right way to resolving my problem.
As I understand your question. I found a solution.
Try this
func createPhotoBarButton(image: Data) {
let barbtn = UIBarButtonItem()
let imageView = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0))
var image = UIImage(data:image)
if image == nil {
image = UIImage(named: "photoIcon")?.resize(maxWidthHeight: Double(imageView.frame.size.width))
}
imageView.image = image
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = imageView.frame.size.height / 2
imageView.layer.masksToBounds = true
imageView.clipsToBounds = true
self.navigationItem.rightBarButtonItem = barbtn
barbtn.customView = imageView
barbtn.customView?.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(photoTapped(_:))))
}
Resize method
extension UIImage {
func resize(maxWidthHeight : Double)-> UIImage? {
let actualHeight = Double(size.height)
let actualWidth = Double(size.width)
var maxWidth = 0.0
var maxHeight = 0.0
if actualWidth > actualHeight {
maxWidth = maxWidthHeight
let per = (100.0 * maxWidthHeight / actualWidth)
maxHeight = (actualHeight * per) / 100.0
}else{
maxHeight = maxWidthHeight
let per = (100.0 * maxWidthHeight / actualHeight)
maxWidth = (actualWidth * per) / 100.0
}
let hasAlpha = true
let scale: CGFloat = 0.0
UIGraphicsBeginImageContextWithOptions(CGSize(width: maxWidth, height: maxHeight), !hasAlpha, scale)
self.draw(in: CGRect(origin: .zero, size: CGSize(width: maxWidth, height: maxHeight)))
let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
return scaledImage
}
}
Output
Try to create a custom button with the code below:
func createPhotoBarButton(image: Data) {
let imageBtnContainer = UIButton()
let imageBtn = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
var image = UIImage(data:image)
if image == nil {
image = UIImage(named: "photoIcon")
}
imageBtn.setImage(image, forState: UIControlState.Normal)
imageBtn.frame = CGRectMake(0, 0, 53, 31)
imageBtn.imageView?.contentMode = .scaleAspectFit
imageBtnContainer.addSubview(imageBtn)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: imageBtnContainer)
...
}
You don't need anymore resizedImage(..) function
Here is working code (swift 4)
override func viewDidLoad() {
let containView = UIView(frame: CGRect(x: 0, y: 0, width: 35, height: 35))
let Button : UIButton = UIButton.init(type: .custom)
Button.frame = CGRect(x: 0, y: 0, width: 35, height: 35)
Button.Round = true
Button.setImage(UIImage(named: "photoIcon"), for: .normal)
Button.addTarget(self, action: #selector(btnTapped), for: .touchUpInside)
containView.addSubview(Button)
let rightBarButton = UIBarButtonItem(customView: containView)
self.navigationItem.rightBarButtonItem = rightBarButton
}
Button Action Here
#objc func btnTapped(_ sender: Any) {
print("Click Event")
}
Extension to Round
extension UIView{
#IBInspectable var Round:Bool{
get{
return false
}
set{
if newValue == true {
self.layer.cornerRadius = self.frame.size.height/2;
self.layer.masksToBounds = true;
}
}
}
}
Output:

Swift UITextField icon position set

Add Icon in UITextField using
var leftImageView = UIImageView()
leftImageView.image = leftImage
textField.leftView = leftImageView
textField.leftViewMode = UITextFieldViewMode.Always
leftImageView.frame = CGRectMake(15, 10, 15, 20)
textField.addSubview(leftImageView)
o/p for this
I found solution like remove this code from above code
textField.leftView = leftImageView
It give icon alignment proper but whenever start editing text field text on icon like this
I want o/p like this
First of all, you should definitely not add the image as a subview to the label. It's enough to set the leftView property.
textField.addSubview(leftImageView) // Delete this line
Secondly, any x or y offsets that you apply to the left view's frame are ignored. The text field will only care about the view's size. If you want to add padding around the image, one option is to use a container view and position the image view inside of it.
let leftImageView = UIImageView()
leftImageView.image = leftImage
let leftView = UIView()
leftView.addSubview(leftImageView)
leftView.frame = CGRectMake(0, 0, 30, 20)
leftImageView.frame = CGRectMake(0, 0, 15, 20)
textField.leftView = leftView
Another option would be to subclass UITextField and override leftViewRectForBounds.
Referring #hennes syntax , there are some syntax missing in swift like CGRect syntax is changed and userNameTextField.leftViewMode = .always is missing
With swift syntax this worked for me :
let leftImageView = UIImageView()
leftImageView.image = UIImage(named: "email")
let leftView = UIView()
leftView.addSubview(leftImageView)
leftView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
leftImageView.frame = CGRect(x: 10, y: 10, width: 20, height: 20)
userNameTextField.leftViewMode = .always
userNameTextField.leftView = leftView
Try this. May be help you.
var padding: Float = 20
var envelopeView: UIImageView = UIImageView(frame: CGRectMake(padding, 0, 30, 30))
envelopeView.image = UIImage.imageNamed("comment-128.png")
envelopeView.contentMode = UIViewContentModeScaleAspectFit
var viewLeft: UIView = UIView(frame: CGRectMake(padding, 0, 30, 30))
viewLeft.addSubview(envelopeView)
textField.leftView.setFrame(envelopeView.frame)
textField.leftView = viewLeft
textField.leftViewMode = UITextFieldViewModeAlways
var viewRight: UIView = UIView(frame: CGRectMake(textField.frame.size.width - (textField.frame.size.width + 30 + padding), 0, 30, 30))
viewRight.addSubview(envelopeView)
textField.rightView.setFrame(envelopeView.frame)
textField.rightView = viewRight
textField.rightViewMode = UITextFieldViewModeAlways
Swift 3.1
extension UITextField
{
enum Direction
{
case Left
case Right
}
func AddImage(direction:Direction,imageName:String,Frame:CGRect,backgroundColor:UIColor)
{
let View = UIView(frame: Frame)
View.backgroundColor = backgroundColor
let imageView = UIImageView(frame: Frame)
imageView.contentMode = .center
imageView.image = UIImage(named: imageName)
View.addSubview(imageView)
if Direction.Left == direction
{
self.leftViewMode = .always
self.leftView = View
}
else
{
self.rightViewMode = .always
self.rightView = View
}
}
}