I want to create a small horizontal scrollview with few buttons as shown in image. User can select any one of them and details will be shown accordingly. I am not sure how to code it programmatically. Please help.
Image:- http://i.stack.imgur.com/uDqkn.jpg
ok follow steps to implement the same.
step 1 : take UITableview and apply affin transform for 90 degree.
step 2 : take a button on each cell also apply affinetransform of 90 degree.
step 3 : for each table cell height (now you can say width) will be calculated with the help of stringwidth function of NSString. so please type code in call back method (heightforRowatIndexPath).
step 4 : take layer of tableview and apply round corner property with value 10.0f
step 5 : same you can do for the button their color.
step 6: for outer arrow yo need to implement some UIScrollview module.
here all memory will be managed by tableview for n number of buttons in horizontal scrolling.
Thanks,
Please let me know for any issue
In an ARC view controller ...
#define kHEIGHT 35.0
- (void)createButtonScrollViewWithButtonTitles:(NSArray *)titles {
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0,100.0,320.0,kHEIGHT)];
CGFloat buttonPositionX = 0.0;
for (NSString *title in titles) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self action:#selector(pressedButton:) forControlEvents:UIControlEventTouchDown];
[button setTitle:title forState:UIControlStateNormal];
button.frame = CGRectMake(buttonPositionX, 0.0, 90.0, kHEIGHT);
buttonPositionX += 90.0;
[scrollView addSubview:button];
}
scrollView.contentSize = CGSizeMake(buttonPositionX, kHEIGHT);
[self.view addSubview:scrollView];
}
After you get this working, you can create a version that takes an array of images. For that, the button type will change to UIButtonTypeCustom. You'll use setImage: rather than setTitle: and you'll have the chance to vary the width by advancing buttonPositionX by the image.size.width, rather than a constant.
Not sure how to interpret the little scroll-arrow-looking things on each side of the image you posted. Another subsequent enhancement would be to overlay each end with a little image view (with userInteractionEnabled = NO) that matches those arrow things.
Related
Do you know, how to control the ScrollView, so they do not repeat. For example I have 5 pictures (like the added figure), they should be viewable from 1-5 and it should stop right after the last picture, at the same time it should be able to scroll back and stop right after the first picture. All in all it should only be able to go from 1-5 without repeating after 5th picture and before 1st.
The problem right now is, that it scroll further after 5th, so it begins from 1st picture again, and the other way around when it scroll back to 1st picture it keep going to 5th and so on.
The code that I used for this is:
"InfinitePagingView" page!.
Disabled scroll:
scrollEnabled = NO;
What I want to know is, if I am able to stop scrolling right after 5th picture, but it should only be enable to do that on the right side. So is there any codes like: "scrollEnable right = NO & scrollEnable left = NO". If not, which code can I use.
Advance thanks
so you want infinite scrolling on the right side, but not on the left? You need to customize the InfinitePagingView, that you are using. Look in the code, especially the method scrollView:didScroll and disable it for the left side.
That is not a default behaviour, so there is not a simple property to set. But don't you think this is a strange behaviour? If you scroll right and go over the 5th picture, than you are at the 1st one again and you cannot scroll to the left anymore? Although you just came from that place?
If you don't want any infinite scrolling just use a default scrollView!
I have using following Code to display 5 UIButtons in Scrollview it works for as you want.you can use it for 5 pictures Check it.
- (void)viewDidLoad
{
UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 407, 320, 80)];
[self.view addSubview:scrollview];
int i;
int spacex = 5;
int spacey=5;
for ( i = 0; i <5; i++)
{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn = [[UIButton alloc] initWithFrame:CGRectMake(spacex, spacey, 115, 45)];
btn.backgroundColor = [UIColor greenColor];
[btn setTitleColor: [UIColor blackColor] forState: UIControlStateNormal];
spacex = spacex + 120;
[scrollview addSubview:btn];
}
scrollview.contentSize = CGSizeMake(scrollview.frame.size.height*(i+2) , scrollview.frame.size.height);
[super viewDidLoad];
}
You can changed it according to your requirments.hope it works for you.Thanks.
I have a UIScrollview with a UIImageview inside it showing a floor plan. I also have a UIButton within the scrollview that acts as a marker/pin.
I have implemented zooming with pinching/double tapping on the image, but the UIButton element obviously doesn't move when the image scrolls and/or zooms.
I have tried the following code to try and resposition the button when a zoom is completed:
[myButton setFrame:CGRectMake(
(myButton.frame.origin.x - myButton.frame.size.width / 2) * _scrollView.zoomScale,
(myButton.frame.origin.y - myButton.frame.size.height / 2) * _scrollView.zoomScale,
myButton.frame.size.width, myButton.frame.size.height)];
This moves the button to the top left hand corner.
Has anyone got any idea of what I should be doing to keep the button relative to the image (the same way a marker does on a Google map).
I answered a question very similar to this recently. If you don't need realtime updating (only update when a zoom is completed), then you should be able to use the method outlined here.
Ok well this was solved by the following:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:#"Marker.png"] forState:UIControlStateNormal];
button.frame = CGRectMake(640.0, 230.0, 30.0, 46.0);
[button addTarget:self action:#selector(aMethod:)forControlEvents:UIControlEventTouchUpInside];
[self.imageView addSubview: button];
self.imageView.userInteractionEnabled = YES;
Basically by adding the button to the imageView directly and then enabling userInteraction, I was able to get all the functionality needed.
I have a UIToolbar that I've customized with my own background image. Consequently, the built-in UIBarButtonItem appearance doesn't work for me, so I'm using images that are already prepared to show in the bar. I create a custom button item with this method:
+ (UIBarButtonItem *)customWithImage:(UIImage *)image enabled:(BOOL)enabled target:(id)target action:(SEL)selector {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
//I've tried different values for the frame here, but no luck
button.frame = CGRectMake(0, 0, 44, 44);
button.enabled = enabled;
button.showsTouchWhenHighlighted = YES;
[button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
[button setImage:image forState:UIControlStateNormal];
UIBarButtonItem *it = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
//Tried changing this, to no avail
it.width = 32.f;
return it;
I have one button on the left and one on the right and I'm trying to make it so that if you tap on the far left or far right of the UIToolbar, the corresponding button is tapped. However, with these custom buttons, the hit targets do not extend all the way to the edges of the UIToolbar, but are inset from the sides:
http://skitch.com/andpoul/d1p8g/hit-targets
Any help greatly appreciated!
UIBarButtonItem.width might be ignored if you're using a custom view (it probably just uses the width of the view).
A lame hack is to make the toolbar wider (so it sticks outside the screen) and add transparent edges to the background image to compensate. This brings the buttons closer to the edge of the screen.
An alternative is just to use a UIImageView with UIButton subviews.
I think the only way you will have to go is to make buttons wider (change image by adding some from left for one and right for another) and adjust size...
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.
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.