Changing UIImageView with scrolling the image - iphone

I have an NSMutbleArray with images. I puted the first image in UIIageView and then I want that the user navigate between images. Should I make button or there is other method? Can I do it when user touch the image, like photo on the ios?
I have another question please. Some time I see this kind of button, but when I select .xib , I don't find them?
I have only basical button on object libraries
help please ( and sorry about my english )

Please watch the "Designing Apps with Scroll Views" talk from WWDC 2010.
Start here, log in, then look for that title, then click 'Watch in iTunes'.

Ummmmm, for a place to start:
-(void)viewDidLoad {
UIButton *image = [UIButton buttonWithType:UIButtonTypeCustom];
[self setCurrentIndex:0];
[image setImage:[array objectAtIndex:0] forState:UIControlStateNormal];
[image addTarget:self action:#selector(nextImage:) forControlEvents:UIControlEventTouchUpInside]
[[self view] addSubview:image];
}
-(void)nextImage:(id)sender {
UIButton *button = (UIButton *)sender;
[self setCurrentIndex:[self currentIndex] + 1];
if([self currentIndex] >= [array count]) {
[self setCurrentIndex:0];
}
[button setImage:[array objectAtIndex:[self currentIndex]] forState:UIControlStateNormal];
}
You will need to keep a reference variable named currentIndex to keep track of where you are in the array and which image to display the next image. This is a pretty awkward way to do it, but probably the easiest to understand and fastest to code.
To answer your second question: Those buttons are for mac applications, not iPhone applications. You will not see them when you create a xib because the iPhone doesn't support them.

Let me answer your second question first. The little control next to the pop-up menu controls how the library items are displayed:
Regarding your first question, I suggest you use swipe gesture recognizers. First, in your view controller, make actions for the swipe recognizers to send:
MyViewController.h
- (IBAction)showPriorImage;
- (IBAction)showNextImage;
MyViewController.m
- (IBAction)showPriorImage
{
// You'll need to change this based on how you track the current image.
if (self.currentImageIndex > 0)
self.imageView.image = [self.images objectAtIndex:--self.currentImageIndex];
}
- (IBAction)showNextImage
{
// You'll need to change this based on how you track the current image.
if (self.currentImageIndex < self.images.count - 1)
self.imageView.image = [self.images objectAtIndex:++self.currentImageIndex];
}
Then, in your XIB, find the swipe gesture recognizer in the library:
Drag a swipe gesture recognizer onto your image view. In the Attributes Inspector, set the swipe direction to Left. Then find the recognizer in the object list (on the left side of the XIB) and control-drag from it to File's Owner. Choose showPriorImage from the pop-up.
Now drag another swipe gesture recognizer onto your image view. Set its swipe direction to right, and connect it to the showNextImage action on your File's Owner.

Related

Set UIImageView background color upon user intervention

I am developing an application in which I have a horizontal scroller.
The scroller area comprise of different colors [which are nothing but UIImageView of colors].
Above the scroller area is a canvas [which is also a UIImageView].
Now, what I want is that when I select any color in the scroller area, it should set on the canvas.
It is pretty much like a color picker but I am already providing solid color options to be selected by the user.
How should I go about it ? Any sample Code to get me started or my mind kicking would be awesome ?
Thanx a ton
To implement it easily.
Use UIView not UIImageView
Set UIView backgroundColor and place it on the scroll
Set UITapGestureRecognizer on views,Refer here
when a purticular view is touched you have its instance of view which
is touched
get the background color of the view and set it in the scroller
Can you take UIButtons instead of UIImageViews inside your scrollView to show colours to be picked.
This will make the implementation easier. User will select any colour button and you will receive a callback in buttons action selector method. Then based on button tag or any property you can set the colour to your canvas.
In current implementation it will be tricky as you need to know the exact content offset where the tap is done to make out which UIImageView was pressed.
coding steps:
In your scroll view add UIButtons instead of UIImageView like:
UIButton* button = [[UIButton alloc] initWithFrame:someRect];
//put some tag to button
button.tag = someInt;
//add selector to each button to get callback
[view addTarget:self action:#selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];
[scrollView addSubview:button];
In the btnSelected method put this code:
-(IBAction)btnSelected:(id)sender;
{
UIButton* button = (UIButton*) sender;
if (button.tag == someInt) {
//do something like
canvas.backgroundColor = button.backgroundColor;
}
}
Instead of using UIImageViews or UIViews as suggested, I would put custom UIButtons for picking colors.
UIButton * colorButton;
//You will probably do these inside a for loop
colorButton = [UIButton buttonWithType:UIButtonTypeCustom];
[colorButton setFrame:CGRectMake(X, Y, buttonSize, buttonSize)];
[colorButton setTitle:#"" forState:UIControlStateNormal];
[colorButton setBackgroundColor:SOME_COLOR];
//Border visualization would be good if you are putting buttons side-by-side
[colorButton.layer setBorderWidth:1.0];
[colorButton.layer setBorderColor:[[UIColor darkGrayColor] CGColor]];
//You can use this tag to identify different buttons later
[colorButton setTag:INDEX+SOME_OFFSET]; //use loop index with some offset
[colorButton addTarget:self action:#selector(colorButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
-(void) colorButtonPressed:(UIButton *) sender
{
UIColor *selectedColor = sender.backgroundColor; //Or identify with sender.tag
[yourCanvas doSmtOnCanvas:selectedColor];
}
Initialize UIImageView then add gesture recognizer to all imageViews by calling this method.
- (void) setupImageView : (UIImageView *) imageView{
[imageView setUserInteractionEnabled:YES];
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(changeUIImageViewBackgroundColor:)];
tapGestureRecognizer.numberOfTapsRequired = 1;
[imageView addGestureRecognizer:tapGestureRecognizer];
}
Now change color of canvasView within the selector by following way:
- (void) changeUIImageViewBackgroundColor : (UITapGestureRecognizer *) recognizer{
UIImageView *imageView = (UIImageView *)[recognizer view];
[canvasView setBackgroundColor:[imageView backgroundColor]];
}
You can put a tap gesture in your scrollview and whenever a tap is made in the scroll check whether the tap is on the imageview. (You will get whether the tap point in on imageview or not) and according you can change the image.
Second alternative is to take a custom button and handle on its click.
Hope it helps

Dragging UIButtons in UIScrollView?

I have a scrollview in my Main view and I have three subviews on my scrollview. And I have UIButtons in all my subviews.
Now, I want to drag those buttons from one subview to another subview (while dragging the buttons, the scrollview should not scroll).
How do I do this?
I'm not completely sure if this snippet works for this particular case (an UIControl inside a UIScrollView), but my understanding of UIResponder chain suggests me that it should :)
- (void)viewDidLoad { // or wherever you initialize your things
...
// Add swipe event to UIButton so it will capture swipe intents
UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc] init];
[panGR addTarget:self action:#selector(panEvent:)];
[button addGestureRecognizer:panGR];
[panGR release];
}
- (void)panEvent:(id)sender {
button.center = [sender locationInView:self.view];
}
If this works (can't test it right now, but it did work for me in a similar situation), then you should add more code to handle the drag & drop related events (maybe disable Clip Subviews option in the UIScrollView, add the button to the new superview if the location intersects with the CGRect of the destination, return the button to the original location if it doesn't, etc).
So, what's happening in those lines? When you begin touching the UIButton, the order doesn't get to the UIScrollView because the event could follow as a touch event (handled by the UIButton), or as a pan event (handled by the UIScrollView). When you move your finger, the event is dismissed by the UIButton's responder because there's no Gesture Recognizer that knows how to proceed if the finger is moved.
But when you add a Gesture Recognizer to the UIButton who actually knows what to do when the finger is moved, everything is different: the UIButton will not dismiss the event, and the UIScrollView will never realize that there was a touch moving over it.
I hope my explanation is accurate and comprensible enough. Let me know if a) it doesn't work or b) there's something unclear.
Good luck :)
Try
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
if (allowAppDrag && [gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
return NO;
}
return YES;
}

how to place menu button in iphone

i need to place menu button in iphone.
i have some touch with android.
In android i display like this by pressing menu.
Is it possible to handle iphone menu button.
if it is not where can i place these.
Thank u in advance.
use the round rect button and change the property into custom place the image as the background image of the button do this for more menu item in your home page.
this is the way i do the menu item.......
I think with Xcode and Interface Builder (iPhone's development platform), getting this task done would be even simpler.
As a brief introduction to iPhone app's UI design, to place this tab bar (as you put it, the menu) on a view, all you need to do is pick up a tab bar from the library and place it on a nib file's view. You can also connect such a tab bar with some codes responsible for internal logic by simply clicking and dragging. It's simple.
btw, a nib file is just some file format Xcode and Interface Builder use to hold the UI data.
iPhones don't have a dedicated slide out menu - everything is on the screen at all times, and there are no purpose built buttons (like back and home).
You should either always show your actions on the screen, or if they are unimportant or infrequent, hide them behind another action button (like a + or wrench icon).
You should use images same as menu items and put custom button over the images.This is the only way to show menu as you want.
Iphone sdk provides tabBar and toolBar, you also can use these in customize forms.This is the correct way to making menu.Iphone design pattern having lot of strengths over android so you can make every thing in Iphone easily but you cant make every thing in android same as iPhone.Iphone having international standards so must use iPhone's controls.
.h
IBOutlet UIScrollView *scrollView;
#property ( nonatomic , retain ) IBOutlet UIScrollView *scrollView;
-(void)AppleVijayAtFacebookDotCom:(id)sender;
-(void)createMenuWithButtonSize:(CGSize)buttonSize withOffset:(CGFloat)offset noOfButtons:(int)totalNoOfButtons;
.m
#synthesize scrollView;
-(void)AppleVijayAtFacebookDotCom:(id)sender{
NSLog(#"AppleVijayAtFacebookDotCom called");
UIButton *button=(UIButton *)sender;
if (button.tag == 0) {
NSLog(#"hey have clicked first button, this is my tag : %i \n\n",button.tag);
}
else if (button.tag == 1) {
NSLog(#"hey have clicked second button, this is my tag : %i \n\n",button.tag);
}
// ......like this
NSLog(#"button clicked is : %iBut \n\n",button.tag);
}
-(void)createMenuWithButtonSize:(CGSize)buttonSize withOffset:(CGFloat)offset noOfButtons:(int)totalNoOfButtons{
for (int i = 0; i < totalNoOfButtons; i++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:#selector(AppleVijayAtFacebookDotCom:) forControlEvents:UIControlEventTouchUpInside];
//[button1 setImage:[UIImage imageNamed:#"Button.png"] forState:UIControlStateNormal];//with image
//OR
[button setTitle:[NSString stringWithFormat:#"%iBut",i] forState:UIControlStateNormal];//with title
button.frame = CGRectMake(i*(offset+buttonSize.width), 8.0, buttonSize.width, buttonSize.height);
button.clipsToBounds = YES;
button.showsTouchWhenHighlighted=YES;
button.layer.cornerRadius = 10;//half of the width
button.layer.borderColor=[UIColor redColor].CGColor;
button.layer.backgroundColor=[UIColor blackColor].CGColor;
button.layer.borderWidth=2.0f;
button.tag=i;
[self.scrollView addSubview:button];
}
self.scrollView.contentSize=CGSizeMake((buttonSize.width + offset) * totalNoOfButtons, buttonSize.height);
//self.navigationItem.titleView=self.scrollView;//if u have navigationcontroller then enable this line
}
Dont forget to connect the scrollView in interface builder
while creating the scrollview in IB make sure ur scrollView height is 44.which is default to navigation bar.so it will look nice.
in viewDidLoad call
[self createMenuWithButtonSize:CGSizeMake(70.0, 30.0) withOffset:20.0f noOfButtons:30];
OUTPUT

UIButton only responds in a small area

I'm trying to add a UIButton to a UIView, but am having some trouble with getting it to respond to touches.
I have a method which returns UIButtons after I provide it with a tag:
- (UIButton*)niceSizeButtonWithTag:(int)tag {
UIButton * aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setTag:tag];
[aButton addTarget:self action:#selector(buttonWasTapped:) forControlEvents:UIControlEventTouchUpInside];
CGRect newFrame = aButton.frame;
newFrame.size.width = 44;
newFrame.size.height = 44;
[aButton setFrame:newFrame];
return aButton;
}
As you can see I'm creating a new button and increasing the size.
I use this in the following way:
UIButton * anotherButton = [self niceSizeButtonWithTag:1];
[anotherButton setImage:[UIImage imageNamed:#"image" withExtension:#"png"] forState:UIControlStateNormal];
[anotherButton setCenter:CGPointMake(middleOfView)];
[aView addSubview:anotherButton];
I create a lot of buttons like this, hence the reason for the method.
The buttons are always created and added to the subview perfectly. I can see the image and they're in the correct position. The problem is that they only respond to touches in a tiny strip.
In this attached image,
alt text http://web1.twitpic.com/img/107755085-5bffdcb66beb6674d01bb951094b0e55.4c017948-full.png
The yellow shows the whole frame of the button,
The red shows the area that will respond to touches.
The grey shows a section of the view the button is added to.
If anyone could shed some light on why this is happening, it would be really useful.
UPDATE:
I should probably mention I'm trying to add this button to a UIView which is a subview of a UITableViewCell.
UPDATE 2:
Adding it directly to the UITableViewCell works, adding it to the UIView on the UITableViewCell is causing the error.
FINAL UPDATE
The problem turned out to be that I was sending the view containing the button to the back of the subviews on the UITableViewCell. Getting rid of the sendSubviewToBack: call fixed it.
Do you have any other views added to this containing view after you add the button? try setting some of your view's background color to blueColor, redColor and other colors to better see what the stack of views in your app is like. Then you should be easily able to see if there is some sort of view blocking the button.

UIButtons over a UIImageView Zooming

I am pretty new to iphone programming. I just started about a month ago and have only been tinkering with small tutorial type applications but anyways, here is my question.
I currently have a UIScrollView thats scrollable and zoomable, that loads a UIImageView subview, and i want to add in some controls(UIButtons) over the image view but when i zoom in and out the whole group(the buttons and the image) zoom togeather.
If I add the UIButtons to my UIScrollView and zoom, the image zooms and the buttons stay in origional place
If I add the UIButtons to my UIImageView they zoom correctly but arent buttons anymore. IE they lose their interactivity.
Later ill add lots of buttons into an array and add them.
I would appreciate any help i can get
This is part of my mainViewController.m:
- (void)viewDidLoad
{
[scrollView2 setBackgroundColor:[UIColor blackColor]];
[scrollView2 setCanCancelContentTouches:NO];
scrollView2.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView2.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scroll2ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"bigNH.jpg"]];
[scrollView2 addSubview:scroll2ImageView];
[scrollView2 setContentSize:CGSizeMake(scroll2ImageView.frame.size.width, scroll2ImageView.frame.size.height)];
scrollView2.minimumZoomScale = .5;
scrollView2.maximumZoomScale = 3;
scrollView2.delegate = self;
[scrollView2 setScrollEnabled:YES];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
CGRect newSize = CGRectMake(658, 435, 50, 50); // position in the parent view and set the size of the button
myButton.frame = newSize;
[myButton setImage:[UIImage imageNamed:#"redStop.png"] forState:UIControlStateNormal];
// add targets and actions
[myButton addTarget:self action:#selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
// add to a view
[scroll2ImageView addSubview:myButton];
[redLineArray addObject:myButton];
[scroll2ImageView release];
}
This might not help and it is not what it appears that you want to do.
However, when I want buttons associated with a scrollview, I add a parent view, add the buttons to that view and also add the scrollview to that view. The button(s) and the scrollview would be siblings. This allows the user to scroll around the contents of the scrollview, while insuring that the buttons are always in view.
-isdi-
By default, UIImageView has userInteraction disabled. Have you changed this?
Also, I would be really uneasy adding subviews to an UIImageView, it's really meant to hold one image. It would be better to create a normal UIView and add the UIButtons and UIImageView to that. It's very easy to control the ordering so that the buttons appears on top of the image.
P.S. Just to make your life easier, instead of :
[scrollView2 setContentSize:CGSizeMake(scroll2ImageView.frame.size.width, scroll2ImageView.frame.size.height)];
You can use :
[scrollView2 setContentSize:scroll2ImageView.frame.size];
Make a single view to contain all your zoomable content (everything it would appear), and call it say contentView. Now place everything you want in that contentView, the imageView and all your buttons etc.
In your UIScrollView delegate place this: (Be sure to set the scrollView's delegate if you haven't already)
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return self.contentView;
}
Only one view is allowed to zoom, but that one view can however contain other views that will scale because they're child views.
Also be sure to set the scrollView's contentSize value to the exact size of your zoomable contentView.