I have an NSButton, created programatically. within said button, I have an NSImage that serves as an icon:
let button = NSButton(frame: NSRect(x: 10, y: (200 + (50 * id)), width: 100, height: 50))
button.action = #selector(self.switchToView)
let img = NSImage(named: "wob_icon")
button.image = img
What I'm trying to do is get the image 10pt. from the left side of the button, while centred vertically. So far, the image shows up centered horizontally as well as vertically, but since it doesn't seem like I'm able to define a frame or something like that, I can't really move it.
Is there a way to move the image within it's parent (the button)?
Thanks.
Maybe you could use the imagePosition property on a NSButton? (documented here).
It uses an enum of type NSCellImagePosition (documented here) and allows you to set the image to the left of the text, to the right of the text, above the text, below the text and so on.
You still won't have the opportunity to align things pixel perfect but if you can live with that, then imagePosition seems like the way to go.
Here is how to use it:
let button = NSButton(frame: NSRect(x: 10, y: 10, width: 100, height: 50))
button.action = #selector(self.switchToView)
let img = NSImage(named: "wob_icon")
button.image = img
button.imagePosition = .imageLeft
button.title = "Look left :)"
And that gives me this stunning UI:
Hope that helps you.
Related
I'm trying to display an NSImageView with a symbol icon inside it, however the top and right sides are being clipped off. I tried changing the imageScaling, imageAlignment, bounds, and image.size, but it says the same.
Here's what I'm doing right now:
let iconImage = NSImage(named: .myImage)!
let icon = NSImageView(image: topBarButtonIcon)
icon.frame = CGRect(x: 7.5, y: 7.5, width: 15, height: 15)
icon.animates = true
icon.isEditable = false
icon.imageAlignment = .alignCenter
icon.imageScaling = .scaleAxesIndependently
Here's how it shows up:
This might matter: I'm sub-viewing the icon into a custom NSButton class I made, it's given a 30x30 frame, but even if I change it to something like 100x100 the icon says clipped.
I am trying to display a lock icon on the left hand side of a search bar's text field, like Safari displays when you visit a secure site, but I don't know how to set the frame.
How can you get the frame of the label within a text field?
Here's what I have:
let lockImageView = UIImageView()
lockImageView.image = UIImage(named: "lock")
lockImageView.contentMode = .scaleAspectFit
lockImageView.frame = CGRect(x: searchBar.bounds.midX, y: 23, width: 11, height: 11)
searchBar.addSubview(lockImageView)
Here's what it looks like because the frame for the icon is not correct:
Add this two to your searchBar before adding the image to the subview
searchBar.leftView = lockImageView
searchBar.leftViewMode = UITextFieldViewMode.Always
I need your help with solving this problem.
My UIImage is allowed to be moved around the screen using PanGesture and it also has TapGesture to rotate with trasform
.transform.rotated(by: CGFloat(M_PI_4))
After user is done with positioning and rotating, he clicks the UIbutton to show a four dots in corners of the Image
//dotcode
let dotSize = 20
let firstDotView = UIView()
firstDotView.frame = CGRect(x: 0, y: 0, width: dotSize, height: dotSize)
firstDotView.backgroundColor = UIColor.black
firstDotView.layer.cornerRadius = 10
view.addSubview(firstDotView)
1: dots like that, don't have any connection with green space
Dots always show in the corner
What approach would I take to add buttons to an image in xcode? The app is for iPhones and iPads so it needs to be "responsive" somehow. I am trying to do something like this image has sample image map I found a Github project that uses Obj-C, but I am just trying to learn app development and have no idea what I am doing. Eventually, once the button is pressed I will make some kind of popup with an image and a little info. My app is in swift. I would appreciate and tips or direction to tutorials.
Assuming that provided Map is one flat image.
This is sudo and it will explain you the concept.
Works for both iPhone or iPad on different screen sizes.
//make sure you have the correct size of original image.
let originalImageSize: CGSize = CGSize(width: 1000, height: 500)
//Lets create a struct to have the basic information we need
struct Item {
var id: Int
var name: String
var x: Double
var y: Double
}
//Creating some sample button on the map
//x and y are based on the original Image size
let buttonsInfo : [Item] = [
Item(id: 1, name: "France", x: 10, y: 10),
Item(id: 2, name: "Poland", x: 20, y: 30),
Item(id: 3, name: "Location A", x: 50, y: 100),
Item(id: 4, name: "Location B", x: 300, y: 300)
]
//sudo code : plug it with your project real image code
let yourUIImageView = UIImageView(image: UIImage())
//after the image is rendered on UI get the real dimensions
//Size of the Image that is rendered on UI in proper aspect ratio
let renderedImageSize: CGSize = CGSize(width: 500, height: 250)
for item in buttonsInfo {
let button = UIButton()
button.tag = item.id
//
button.frame = CGRect(x: Double(renderedImageSize.width/originalImageSize.width)*item.x,
y: Double(renderedImageSize.height/originalImageSize.height)*item.y,
width: 50, height: 50)
button.backgroundColor = UIColor.red
button.setTitle("Name your Button ", for: .normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
//yourUIImageView is actual view in your code
yourUIImageView.addSubview(button)
}
func buttonAction(sender: UIButton!) {
let item:Item = buttonsInfo.filter{$0.id == sender.tag}
print("Button tapped")
print(item)
}
Note: if you are resizing your yourUIImageView on orientation changes, then you need to do few more changes to move the buttons based on the new aspect ratio. (let us know if you need help)
You can use UITapGestureRecognizer over the image view to perform same as button action
1st Put in viewDidLoad
let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(YourViewControllerName.imgAction))
ImageViewName.addGestureRecognizer(tap)
2nd write function to perform action
func imgAction(){
// perform the action here
}
There are two approaches
1. You can add image to a button as shown in the picture
You can place an image in the storyboard and then add a button above it, then remove the text of the button. It's better to add both these things in a UIView so you can make sure that the button is exactly above the image. You can set the constraints for the UIView after that add the image and button and set the constraints of top, left, right and bottom to 0
Note: Make sure that the button is always above the image so it's clickable. Try to color the button in storyboard in order to be certain.
Im making a small boxing app. This whole week iv been trying to work out how to solve my current problem above, with no luck :(.
Summary
Basically Its a 1 v 1 game. Each time the user hits the other player I want to make a tiny number pop up near him and float up and dissappear.
Its sort of like when you play MMORPG's and when you do dmg you see how much you did. See image below for an example!
So basically everytime the user hits the other player I want a little number to pop up on the screen to show the dmg and then float up and disappear.
Details
I am building the game on a simple UIView
The label is a UILabel
Anywhere How I can achieve this?
Thank you!
Create a label, then use UIView.animateWithDuration to animate it.
let label = UILabel(frame: CGRect(origin: point/*The point where you want to add your label*/, size: CGSize(width: 50, height: 50)))
label.text = "+1"
label.font = UIFont()//Your font
label.textColor = UIColor.blueColor()
label.alpha = 1
self.view.addSubview(label)
UIView.animateWithDuration(1) {
label.center = CGPoint()//The point where you want your label to end up
label.alpha = 0
}
Edit: As mentioned in the comments, you asked for how to create the label at a random point. Try this:
let screenWidth = self.view.frame.width
let screenHeight = self.view.frame.height
let randomX = CGFloat(arc4random_uniform(UInt32(screenWidth)))
let randomY = CGFloat(arc4random_uniform(UInt32(screenHeight)))
let point = CGPoint(x: randomX, y: randomY)
As you will notice, for the width and height, I use the view's frame's width and height. You may want to use the view's bounds. For more on this, check out this SO Post.