I have a UIScrollView and I am trying to add a UIImageView inside the scrollview. But after that, I want a UILabel inside the imageview. Basically, the image should fill the scroll view and the label should appear in the center of the image. Here is what I have:
#IBOutlet weak var image_scroll_view: UIScrollView!
var imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
image_scroll_view.backgroundColor = UIColor.yellowColor()
imageView.frame = CGRectMake(0, 0, image_scroll_view.frame.size.width, image_scroll_view.frame.height)
imageView.userInteractionEnabled = true
imageView.contentMode = UIViewContentMode.ScaleAspectFit
imageView.backgroundColor = UIColor.greenColor()
image_scroll_view.scrollRectToVisible(imageView.frame, animated: true)
self.imageView.image = // ...
let curr_user_name = UILabel(frame: CGRectMake(0, 0, imageView.frame.width, imageView.frame.height))
curr_user_name.text = "John Smith"
curr_user_name.textColor = UIColor.whiteColor()
curr_user_name.font = UIFont.boldSystemFontOfSize(16.0)
curr_user_name.backgroundColor = UIColor.redColor()
curr_user_name.center = CGPointMake(imageView.center.x, imageView.center.y)
curr_user_name.textAlignment = NSTextAlignment.Center
imageView.addSubview(curr_user_name)
image_scroll_view.addSubview(imageView)
self.navigationController?.navigationBarHidden = true
}
Here is what it looks like:
The scrollview is yellow. Ideally, the image view should fill all of that (it doesn't even show up at the moment) and the label should fill all of the image view, which would automatically center the text.
What am I doing wrong here?
make cur_user_name a property and
Write this code:
imageView.frame = CGRectMake(0, 0, image_scroll_view.frame.size.width, image_scroll_view.frame.height)
curr_user_name.center = CGPointMake(imageView.center.x, imageView.center.y)
in viewDidLayoutSubviews
Related
I am trying to implement a custom Navigation Title on an iOS app.
The StoryBoard looks like this:
The place that I want to have the custom Navigation Title is the last view ( the message view ), and because I use an image and text this means that I need to have custom width and height. By needing this if I do in viewDidLoad:
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
......
titleView?.addSubview(imageView)
......
titleView?.addSubview(label)
navigationItem.titleView = titleView
The height of the title is blocked to 44pt.
But how I managed to do it is adding the subViews to the navigation bar:
var navigationBar: MessagesNavigationBar? {
guard let navigationBar = navigationController?.navigationBar as? MessagesNavigationBar else {
return nil
}
return navigationBar
}
And in viewDidLoad
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
......
titleView?.addSubview(imageView)
......
titleView?.addSubview(label)
navigationBar?.addSubview(titleView!)
But the problem is that I have to remove the subviews when I leave the view, otherwise whatever I add there will be present in the table view as well.
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
if navigationBar != nil {
titleView?.removeFromSuperview()
}
}
Which kinda makes me feel that I'm not doing the right thing and I find difficult to add a fade out animation to those subViews when I leave the conversation. (i.e. native messages app on iOS).
So what is the right way of creating a custom Title Navigation Bar in iOS 12?
Scenes
Creating your custom titleView and assigning it to navigationItem.titleView is what you want. On older systems (pre iOS 11) you just might need to call sizeToFit() on the titleView.
This way you can create this titleView
Swift
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView()
NSLayoutConstraint.activate([
imageView.heightAnchor.constraint(equalToConstant: 20),
imageView.widthAnchor.constraint(equalToConstant: 20)
])
imageView.backgroundColor = .red
let titleLabel = UILabel()
titleLabel.text = "Custom title"
let hStack = UIStackView(arrangedSubviews: [imageView, titleLabel])
hStack.spacing = 5
hStack.alignment = .center
navigationItem.titleView = hStack
}
Obj-C
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc] init];
[NSLayoutConstraint activateConstraints:#[
[imageView.heightAnchor constraintEqualToConstant:20],
[imageView.widthAnchor constraintEqualToConstant:20]
]];
imageView.backgroundColor = [UIColor redColor];
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.text = #"Custom title";
UIStackView *hStack = [[UIStackView alloc] initWithArrangedSubviews:#[imageView, titleLabel]];
hStack.spacing = 5;
hStack.alignment = UIStackViewAlignmentCenter;
self.navigationItem.titleView = hStack;
}
You might also need to have the right set of autolayout constraints or use UIStackView.
These lines have no effect on the size of a title view:
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
Instead (or in addition) give your title view a width constraint and a height constraint. That is how the runtime knows what size you want.
I need in my app a custom navigation bar with an image and a text but I can't add the text.
Here is the code to add the image, how can I add the title?
let logo = #imageLiteral(resourceName: "navigationbaricon")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView
Thanks
Where is the frame assigned for self.navigationItem.titleView? Set the frame for imageView and it will work.
You can wrap the UIImageView and the UILabel (which will hold the custom title) in an UIView and then assign the UIView to the self.navigationItem.titleView. Something like this:
let view = UIView(...);
let label = UILabel(...);
label.text = "Custom Title";
let image = UIImageView(image: UIImage(named: "..."));
view.addSubview(image);
view.addSubview(label);
self.navigationItem.titleView = view;
This one is worked for me
override func viewDidLoad() {
super.viewDidLoad()
let titleView = UIView()
titleView.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
titleView.backgroundColor = UIColor.redColor()
let imageView = UIImageView(image: UIImage(named: "img")!)
imageView.frame = CGRectMake(0, 0, 40, 40)
imageView.contentMode = .ScaleAspectFill
titleView.addSubview(imageView)
self.navigationItem.titleView = titleView
}
I need a UIScrollView and a containerView to scroll the content I create. My code for that 2 items is:
var scrollView = UIScrollView()
var darkener = UIView()
var container = UIView()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.clearColor()
darkener = UIView(frame: self.view.frame)
darkener.backgroundColor = UIColor.blackColor()
darkener.alpha = 0.0
self.view.addSubview(darkener)
scrollView.frame = self.view.bounds
scrollView.backgroundColor = UIColor.clearColor()
scrollView.contentSize = CGSizeMake(scrollView.frame.width, scrollView.frame.height+1)
scrollView.delegate = self
self.view.addSubview(scrollView)
container = UIView(frame: CGRectMake(0, scrollView.frame.height, scrollView.frame.width, scrollView.frame.height))
container.backgroundColor = UIColor.whiteColor()
container.layer.masksToBounds = true
container.layer.cornerRadius = 10
scrollView.addSubview(container)
}
The problem is that the container view once I Set the Y point to scrollView.frame.height doesn't appear on the screen (it's on the bottom), but in a previous VC that code worked perfectly.
Also, it does not let me scroll on the content. What's wrong there?
If necessary I can upload the implementation, but this I think has no problem.
Solved. I just had to put that at the end of the ViewDidLoad to declare de frame:
The textField is the final label I have on the screen, to declare the limit of the screen.
self.container.frame = CGRectMake(0, self.container.frame.origin.y, self.container.frame.width, textField2.frame.origin.y + textField2.frame.height - 60)
self.scrollView.contentSize = CGSizeMake(self.container.frame.width, self.container.frame.height + 20.0)
And works Ok now.
In my view controller, I added the following to be able to customize the NavigationBar, but when I got to setting the width and height of the logo, all I can change is the height.
When I edit the value in width - Nothing happens, even if I set it to 0.
Also, is it possible to use px instead of points?
override func viewDidAppear(animated: Bool) {
// 1
var nav = self.navigationController?.navigationBar
// 2
nav?.barStyle = UIBarStyle.Black
nav?.tintColor = UIColor.whiteColor()
// 3
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
// imageView.contentMode = .ScaleAspectFit
// 4
let image = UIImage(named: "trotterlogo.png")
imageView.image = image
// 5
navigationItem.titleView = imageView
}
I'm trying to create a UIImage View programmatically, I have a new view and I tried doing this
let imageName = "yourImage.png"
yourview.backgroundColor = UIColor.colorWithPatternImage(UIImage(named:imageName))
this did not work because I don't know what this should be yourview in the second line.
Question:
How do I make a UIImageView appear on the screen by coding it instead of doing it in the storyboard
First you create a UIImage from your image file, then create a UIImageView from that:
let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
Finally you'll need to give imageView a frame and add it your view for it to be visible:
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
view.addSubview(imageView)
First create UIImageView then add image in UIImageView .
var imageView : UIImageView
imageView = UIImageView(frame:CGRectMake(10, 50, 100, 300));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)
This answer is update to Swift 3.
This is how you can add an image view programmatically where you can control the constraints.
Class ViewController: UIViewController {
let someImageView: UIImageView = {
let theImageView = UIImageView()
theImageView.image = UIImage(named: "yourImage.png")
theImageView.translatesAutoresizingMaskIntoConstraints = false //You need to call this property so the image is added to your view
return theImageView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(someImageView) //This add it the view controller without constraints
someImageViewConstraints() //This function is outside the viewDidLoad function that controls the constraints
}
// do not forget the `.isActive = true` after every constraint
func someImageViewConstraints() {
someImageView.widthAnchor.constraint(equalToConstant: 180).isActive = true
someImageView.heightAnchor.constraint(equalToConstant: 180).isActive = true
someImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
someImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 28).isActive = true
}
}
You can use above in one line.
let imageView = UIImageView(image: UIImage(named: "yourImage.png")!)
In Swift 3.0 :
var imageView : UIImageView
imageView = UIImageView(frame:CGRect(x:10, y:50, width:100, height:300));
imageView.image = UIImage(named:"Test.jpeg")
self.view.addSubview(imageView)
In Swift 4.2 and Xcode 10.1
//Create image view simply like this.
let imgView = UIImageView()
imgView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
imgView.image = UIImage(named: "yourimagename")//Assign image to ImageView
imgView.imgViewCorners()
view.addSubview(imgView)//Add image to our view
//Add image view properties like this(This is one of the way to add properties).
extension UIImageView {
//If you want only round corners
func imgViewCorners() {
layer.cornerRadius = 10
layer.borderWidth = 1.0
layer.masksToBounds = true
}
}
Thanks, MEnnabah, just to add to your code where you are missing the = sign in the declaration statement:
let someImageView: UIImageView = {
let theImageView = UIImageView()
theImageView.image = UIImage(named: "yourImage.png")
theImageView.translatesAutoresizingMaskIntoConstraints = false //You need to call this property so the image is added to your view
return theImageView
}()
Everything else is, all perfect for Swift 3.
Make sure to put:
imageView.translatesAutoresizingMaskIntoConstraints = false
Your image view will not show if you don't put that, don't ask me why.
Swift 4:
First create an outlet for your UIImageView
#IBOutlet var infoImage: UIImageView!
Then use the image property in UIImageView
infoImage.image = UIImage(named: "icons8-info-white")