For my current project, I need to drop some pins on a image(NOT a map), and also should be able to click the pin to add some comments to this pin. I wonder if I can use MKAnnotation/MKAnnotationView to do this. I have searched on Internet for a while. I only find tutorials about how to customize MKAnnotation with other images.
If I cannot use MKAnnotation, what should I use? Any tutorials about this will be great helpful.
Thanks.
If you want to click on the pin, you should just place a UIButton on top the image view. MKAnnotationView can only placed within a map view.
You can do something like that:
#property (nonatomic,strong) UIButton *button;
- (void)viewDidLoad
{
[super viewDidLoad];
_button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
UIImage *buttonImage = [UIImage imageNamed:#"image.jpg" ];
[_button setImage:buttonImage forState:UIControlStateNormal];
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(imageTouched:)];
tapGesture.numberOfTapsRequired = 1;
[_button addGestureRecognizer:tapGesture];
[self.view addSubview:_button];
}
-(IBAction)imageTouched:(UITapGestureRecognizer *)sender
{
CGPoint touchedPoint = [sender locationInView:_button];
UIButton *pin = [[UIButton alloc] initWithFrame:CGRectMake(touchedPoint.x, touchedPoint.y, 10, 10)];
}
You can also link in from the storyboard of course.
Set the image of the button for the state UIControlStateHighlighted or UIControlStateSelected if you don't want it to flash/show user interaction
Related
Actually i want to place image and label on the toolbar as a UIBarButtonItem and provide a clickable effect to that Button.
So what i have done here is I have created one custom view and placed Image and Label on the same custom view and finally placed this custom view as UIBarButtonItem CustomView.
But when i set target and action for the same UIBarButtonItem, it is not calling the selector method.
The entire code is below.
Can anybody suggest me what's the mistake in my code ? and is there any other approach to achieve the same ????
Early suggestions would be much appreciated.
- (void)viewDidLoad
{
[super viewDidLoad];
[self.navigationController setToolbarHidden:NO];
UIView *customView = [[UIView alloc]
initWithFrame:CGRectMake(0,0,self.navigationController.toolbar.frame.size.width,self.navigationController.toolbar.frame.size.height)];
customView.backgroundColor = [UIColor colorWithRed:62.0/255.0 green:187.0/255.0 blue:150.0/255.0 alpha:1.0];
[self.navigationController.toolbar addSubview:customView];
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(60,0,44,44)];
imgView.image = [UIImage imageNamed:#"documentImage.png"];
[customView addSubview:imgView];
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(104,0,145,44)];
lbl.text = #"Scan Document";
lbl.textAlignment = NSTextAlignmentLeft;
[customView addSubview:lbl];
UIBarButtonItem *bar = [[UIBarButtonItem alloc]initWithCustomView:customView];
bar.target = self;
bar.action = #selector(scanDocument);
self.toolbarItems = [NSArray arrayWithObjects:bar, nil];
}
If you want to create button right hand side here is the code. i have already implemented it and working fine.
//Button Right side
UIImage *imgFavRest = [UIImage imageNamed:#"documentImage.png"];
UIButton *cart = [UIButton buttonWithType:UIButtonTypeCustom];
[cart setImage:imgFavRest forState:UIControlStateNormal];
cart.frame = CGRectMake(0, 0, imgFavRest.size.width, imgFavRest.size.height);
[cart addTarget:self action:#selector(showCart) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightBtn = [[UIBarButtonItem alloc] initWithCustomView:cart];
self.navigationItem.rightBarButtonItem = rightBtn;
Then use method like this . that's all
-(void)cartItemCount{
// Method
}
float textwidth = 50; // according to your text
UIImage *image = [UIImage imageNamed:#"logout"];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.bounds = CGRectMake( 10, 0, image.size.width+textwidth, image.size.height );
[btn addTarget:self action:#selector(scanDocument) forControlEvents:UIControlEventTouchUpInside];
[btn setImage:image forState:UIControlStateNormal];
[btn setTitle:#"test" forState:UIControlStateNormal];
[btn setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 5.0, 0.0, 0.0)];
//Adjust the coordinates and size of your button as your requirement.This is a sample code to guide you.
//PS:Take a UIButton in the nib file>Make it a custom button>Connect the IBOutlet to your custom button in the nib file.Thats it.
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.rightBarButtonItem = rightButton;
I see very complicated answers, all of them using code. However, if you are using Interface Builder, there is a very easy way to do this:
Select the button and set a title and an image. Note that if you set
the background instead of the image then the image will be resized if
it is smaller than the button.IB basic image and title
Set the position of both items by changing the edge and insets. You
could even control the alignment of both in the Control section.
IB position set IB Control set
You could even use the same approach by code, without creating UILabels and UIImages inside as other solutions proposed. Always Keep It Simple!
EDIT: Attached a small example having the 3 things set (title, image and background) with correct insets Button preview
Note:: UIBarButtonItem inherits from UIBarItem and NSObject so it doesn't know anything about touches. It would be nice if the docs mentioned that the action and target properties only apply if the custom view is a UIButton.
I am rather new to Xcode and iOS development but have been enjoying the challenge so far.
I have run into an issue where I am attempting to move a UIImageView I have created programmatically on top of a MapBox mapView.
I would like to move this UIImageView with a UIButton by a measure of pixels, with the UIButton being on top of the mapView.
This is the code I have so far in my ViewController.m:
[self.view addSubview:mapView];
UIImageView* ship;
ship=[[UIImageView alloc] initWithFrame:CGRectMake(150, 200, 40, 40)];
UIImage * image;
image=[UIImage imageNamed:#"spaceShip"];
[ship setImage:image];
ship.alpha = 0.75;
[self.view addSubview:ship];
UIButton *upButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
upButton.frame = CGRectMake(150, 250, 40, 40);
upButton.userInteractionEnabled = YES;
[upButton setTitle:#"UP" forState:UIControlStateNormal];
[upButton addTarget:ship action:#selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:upButton];
}
- (IBAction)moveUp {
ship.center = CGPointMake(ship.center.x, ship.center.y -10);
}
Could anyone show me how to get this upButton to recognize and move my UIImageView?
One problem is that ship is a local variable that you create in the first block of code. When that code block goes out of scope, ship will be nil, so when you try to set it's center in the button method, it won't work. You need to create a property for ship, and use that instead.
Your other problem is that when you add the action to your button, you call it buttonPressed:, but the method you implemented is moveUp. So, if you create a property called ship, then your action method should be,
- (void)buttonPressed:(UIButton *) sender {
self.ship.center = CGPointMake(self.ship.center.x, self.ship.center.y -10);
}
I'm trying to add a button to a UIImageView with a transparent background - the button is shown ok but is not responding. (takePictureClicked is not called)
My code:
cameraController = [[UIImagePickerController alloc] init];
cameraController.sourceType = UIImagePickerControllerSourceTypeCamera;
cameraController.delegate = self;
cameraController.allowsEditing=YES;
cameraController.showsCameraControls = NO;
cameraController.navigationBarHidden = YES;
cameraController.toolbarHidden = YES;
// overlay on top of camera lens view
UIImageView *cameraOverlayView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"camera_overlay.png"]];
cameraOverlayView.alpha = 0.0f;
//Take picture button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
UIImage *btnImage = [UIImage imageNamed:#"714-camera.png"];
[button setImage:btnImage forState:UIControlStateNormal];
[button addTarget:self action:#selector(takePictureClicked) forControlEvents:UIControlEventTouchUpInside];
button.frame = CGRectMake(cameraOverlayView.center.x-16,cameraOverlayView.frame.size.height,32,32);
[cameraOverlayView addSubview:button];
[cameraOverlayView setUserInteractionEnabled:YES];
[cameraOverlayView bringSubviewToFront:button];
cameraController.cameraOverlayView = cameraOverlayView;
Normally you create a UIView where you can add different ui elements like UIButton or UIImageView. An UIImageView is just for UIImages and not for adding any other stuff on it. Create another UIView which will hold all the elements in it.
Like this post describes, even Interface Builder doesn't allow you to add a UIButton to an UIImageView.
You have to able the user interaction:
[cameraOverlayView setUserInteractionEnabled:YES];
You have also the checkbox in Interface Builder if you are using it.
This is needed because for default, the UIImageView has the user interaction disabled.
Have you tried setting userInteractionEnabled to the UIImageView?
try with:
cameraOverlayView.userInteractionEnabled = YES;
I want to implement this fade in/out in a horizontal scroll I have, but I can't figure out how to access my button that is in a subview of my UIScrollView. This is what I'm trying to implement Fade in/out stackoverflow.
This is my code...
Game *game = (Game *)[_schedule.games objectAtIndex:i];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(x, 20, 150, 100)];
[button setBackgroundImage:[UIImage imageNamed:game.opponent] forState:UIControlStateNormal];
//[button setTitle:game.opponent forState:UIControlStateNormal];
[_gameScrollList addSubview:button];
How Can I add the observer to my button, Can this be done?
[self.scrollView addObserver:[self.contentViews objectAtIndex:i]
forKeyPath:#"contentOffset"
options:NSKeyValueObservingOptionNew
context:#selector(updateAlpha:)];
To access the reference of this button added as subview, you can:
Use this button as a iVar, saving the reference to use it later;
Similarly, use this button as a property;
Iterate through subviews of _gameScrollList, looking for a subview of UIButton's class (not recommended, will work well only if it has just one UIButton as subview)
Example of how implement the second approach. Just declare a property:
#property(nonatomic, strong) UIButton *button;
and then:
Game *game = (Game *)[_schedule.games objectAtIndex:i];
self.button = [[UIButton alloc] initWithFrame:CGRectMake(x, 20, 150, 100)];
[self.button setBackgroundImage:[UIImage imageNamed:game.opponent] forState:UIControlStateNormal];
//[self.button setTitle:game.opponent forState:UIControlStateNormal];
[_gameScrollList addSubview:self.button];
So, after, when you want to access this button somewhere, just call for the property
self.button.alpha = 0.5; //example of interation with your button
If this is not what you are looking for, you really should edit your question to be more clear.
Hope it helped.
I have a simple UIImageView that is animated, and i need to detect a tap on it. I've added a UIButton that is a subview of this UIImageView. However,the tap on it does not work. I've already tested the UIButton itself when added to the view,and it works, so it's not the button that is causing the problem.
Here's the code:
self.red = [[UIImageView alloc] initWithFrame:CGRectMake(50, 300, 85, 100)];
self.red.image = [UIImage imageNamed:#"red.png"];
[self.red setUserInteractionEnabled: YES];
[self.view addSubview: self.red];
[self.view bringSubviewToFront:self.red];
UIButton *redButton = [UIButton buttonWithType: UIButtonTypeCustom];
redButton.frame = CGRectMake(self.red.frame.origin.x, self.red.frame.origin.y, self.red.frame.size.width, self.red.frame.size.height);
[redButton addTarget: self action:#selector(correctButtonClick) forControlEvents: UIControlEventAllTouchEvents];
[redButton setUserInteractionEnabled:YES];
[self.red addSubview: redButton];
[self.red bringSubviewToFront:redButton];
What am I doing wrong here?
Instead of this line , redButton.frame = CGRectMake(self.red.frame.origin.x, self.red.frame.origin.y, self.red.frame.size.width, self.red.frame.size.height); try this
redButton.frame = CGRectMake(0,0, self.red.frame.size.width, self.red.frame.size.height);
EDIT : This line [self.red bringSubviewToFront:redButton]; is no needed..
Instead of inserting a UIButton as a subview use a UITapGestureRecognizer, for example:
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(correctButtonClick)];
[self.red addGestureRecognizer:tap];
What you have to do is to invert your implementation, adding UIButton to UIImageView is not a good idea, rather create a custom styled UIButton programatically, and add UIImageView as its subview, would definitely work
EDIT:
As for you current implementation, youve added UIButton inside a UIImageView so probably you want every part of image to accept the click event, in that case your x and y coords of UIButton would be 0,0 rather than red.x and red.y, however width and height are correct
Just do self.red.userInteractionEnabled = YES.
UIImageView has userInteractionEnabled NO as default.
The custom button has no UI. So you can't select it. (you can try it with bound button , or add some image to button and set button alpha to 0.1 or else)
#tkanzakic answer should be correct.
Just add TapGestureRecognizer to ImageView or add Image to Button.
Instead of using separate imageview and Button, make use of the imageview property within the Button. Which will solve all your problems and relieves you from writing extra lines of code.
UIButton *redButton = [UIButton buttonWithType: UIButtonTypeCustom];
redButton.imageView.image = [UIImage imageNamed:#"red.png"];
redButton.frame = CGRectMake(50, 300, 85, 100);
[redButton addTarget: self action:#selector(correctButtonClick) forControlEvents: UIControlEventAllTouchEvents];
[redButton setUserInteractionEnabled:YES];
[self.red addSubview: redButton];
It's simple, the button doesn't respond because its frame is wrong and so it's not where you think it is. Basically change your line below:
redButton.frame = CGRectMake(self.red.frame.origin.x, self.red.frame.origin.y, self.red.frame.size.width, self.red.frame.size.height);
with this:
redButton.frame = CGRectMake(self.red.bounds.origin.x, self.red.bounds.origin.y, self.red.frame.size.width, self.red.frame.size.height);