http://g.virbcdn.com/_f/cdn_images/resize_1280x640/29/PageImage-489404-2437983-IMG_4531.PNG
Hi all, we are trying to figure out how to do the small orange numbered label on the left in the image above. As you can see, when the number is 6, it looks like a circle. When it is 33, the label looks wider. Does anyone know how to make it? Our developer believes it is made with UIButton. Is it possible to do it with label? Thanks in advance.
cornerRadius property of the CALayer class can be use to achieve this. Every view has a CALayer instance on which we can perform certain action. Means we can get rounded corners by using -
myLabel.layer.cornerRadius = //radius that we want;
Also for accessing layer we need to have following framework in our application-
<QuartzCore/QuartzCore.h>
First Add QuartzCore FrameWork, then
use in .m file
#import "QuartzCore/CALayer.h"
then use this code where do you want to show
UIButton *Mybutton = [UIButton buttonWithType:UIButtonTypeCustom];
Mybutton.backgroundColor=[UIColor orangeColor];
[Mybutton addTarget:self action:#selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
[Mybutton setTitle:#"1" forState:UIControlStateNormal];
Mybutton.frame = CGRectMake(135.0, 180.0, 40.0, 40.0);
Mybutton.clipsToBounds = YES;
Mybutton.layer.cornerRadius = 20;
Mybutton.layer.borderColor=[UIColor greenColor].CGColor;
Mybutton.layer.borderWidth=2.0f;
[self.view addSubview:Mybutton];
button will look like...
Related
something strange happened during the development of my app. I have a view with several UIButtons in it. All are using custom artwork and are UIButton with CostumType.
For me everything felt right. In the simulator and on the phone.
But when I give the app in someone else's hand the person taps on a button and it won't work. It feels like the button is just reaction to a certain tap which in fact doesn't feel right (if you compare it to normal behavior).
What can I do to make it behave normal? Normal means that somebody who is used to iOS Apps can use it like he except it works.
Here is an example code for a button:
focusButton = [UIButton buttonWithType:UIButtonTypeCustom];
[focusButton setFrame:CGRectMake(self.bounds.size.width-(self.bounds.size.width/widthFactor)+108, self.bounds.origin.y+(self.bounds.size.height/(heightFactor*2))+2, 36, 40)];
focusButton.contentHorizontalAlignment = false; // I think these lines doesn't effect the behavior
focusButton.contentVerticalAlignment = false;
[focusButton setBackgroundImage:[UIImage imageNamed:#"arrowUp.png"] forState:UIControlStateNormal];
[focusButton setBackgroundImage:[UIImage imageNamed:#"arrowUpH.png"] forState:UIControlStateHighlighted];
[focusButton addTarget:self action:#selector(focusOrDefocusCourse) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:focusButton];
The Button Background looks like this:
this is woking fine.. Once just test with the frame..
UIButton *btn_foucs = [UIButton buttonWithType:UIButtonTypeCustom];
[btn_foucs setFrame:CGRectMake(20, 20, 200, 40)];
[btn_foucs setImage:[UIImage imageNamed:#"btn_erase.png"] forState:UIControlStateNormal];
[btn_foucs setImage:[UIImage imageNamed:#"btn_erase_h.png"] forState:UIControlStateHighlighted];
[self.view addSubview:btn_foucs];
You may like to take a look at the UIButton property imageEdgeInsets. This allows you to make the image draw into only part of the frame, so that the touchable area is bigger than the image itself (reducing the chance of 'missing' the button). You could do the following, for example:
int touch_offset = 10;
[focusButton setFrame:CGRectMake(self.bounds.size.width-(self.bounds.size.width/widthFactor)+108-touch_offset, self.bounds.origin.y+(self.bounds.size.height/(heightFactor*2))+2-touch_offset, 36+(touch_offset*2), 40+(touch_offset*2))];
focusButton.imageEdgeInsets = UIEdgeInsetsMake(touch_offset, touch_offset, touch_offset, touch_offset);
This should make the touchable area 10 pixels wider than the image on each side, adjustable by changing the touch_offset value. As a general guideline, Apple recommend using touchable areas no smaller than 44x44 pixels.
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.
Actually the question is simple. I don't know what to add to the title of my question. I need to have button which has border and title and nothing else. The rest is transparent and background of my view is seen through the button. I have googled for it a lot and found nothing. Thanks in advance
You can make the button of type UIButtonTypeCustom and add a border to its CALayer.
[[myButton layer] setCornerRadius:10];
[[myButton layer] setBorderColor:[[UIColor blackColor] CGColor]];
[[myButton layer] setBorderWidth:2];
you need to #import <QuartzCore/QuartzCore.h> to use the layer's methods.
EDIT (Answer to comments)
If you created the button in Interface Builder and connected to the proper outlet, then you shouldn't create a new button in code, which is what you're doing with
backArrowButton = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
When you added the button in Interface Builder and connected it to the outlet, you already created it there, so just make sure that in IB it's set to Custom, and just set the layers properties in code like shown above.
Yes, just make your graphic completely transparent with the border you want. Then:
UIButton* button = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
[button setImage:[UIImage imageNamed:#"YOUR-IMAGE" forState:UIControlStateNormal];
...
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...
Is there a way to get access to the up/down arrows used in the Mail app and implement them the same way?
No, there's no supported way to do it. I'd suggest you file a bug on Radar asking Apple to include more built-in artwork. In the mean time, you'll just have to draw your own.
Can you clarify your question?
The graphics for up/down are not easily accessible, though you can probably find a way to get them. For instance, see http://0xced.blogspot.com/2009/04/extract-uikit-artwork.html.
But if you're looking for the behavior, it's really quite simple. The arrows are on a momentary UISegmentedControl. Attach to valueChanged: to tell when the user taps on one of them, and use selectedSegmentIndex to tell which one they tapped.
Nowadays they are part of the sample code of IOS 4.1. Check the NavBar sample.
As Steven Fisher said, you can’t access the Apple graphic easily. But they are relatively easy to remake.
Given the images I had some trouble making this look right in iOS 7 where a UISegmentedControl will not work. This code did the trick however (added to viewDidLoad in the ViewController).
UIButton *upButton = [UIButton buttonWithType:UIButtonTypeCustom];
[upButton setImage:[upImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
forState:UIControlStateNormal];
upButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 6);
[upButton sizeToFit];
UIButton *downButton = [UIButton buttonWithType:UIButtonTypeCustom];
[downButton setImage:[downImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
forState:UIControlStateNormal];
downButton.contentEdgeInsets = UIEdgeInsetsMake(0, 6, 0, 0);
[downButton sizeToFit];
UIBarButtonItem *upButtonItem = [[UIBarButtonItem alloc] initWithCustomView:upButton];
UIBarButtonItem *downButtonItem = [[UIBarButtonItem alloc] initWithCustomView:downButton];
[upButton addTarget:self action:#selector(YOUR_UP_SELECTOR:) forControlEvents:UIControlEventTouchUpInside];
[downButton addTarget:self action:#selector(YOUR_DOWN_SELECTOR:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItems = #[downButtonItem, upButtonItem];