How to create a button similar to "Remove Contact" button on iPhone? - iphone

Apple has many big colored buttons, that are not standard. One of them is a delete contact button in address book. Another is Start/Stop button in Timer (Clock application) or End Call button in Phone. They are different, but all have similar appearance.
Question is simple. Is there a way to create these kind of buttons without using background images/screenshots or recreating them from scratch?
Thanks.

You could try Opacity. The new release allows you to draw vector images and generate UIKit-friendly Objective-C code that recreates the drawing.

Well, I've tried many ways to do it, but the most simple was to make a UIButton with a custom style.
If you need a "delete" button in the footer of the table - like in contact or event, here is the code:
UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 60)];
UIButton *newDeleteButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
newDeleteButton.frame = CGRectMake(10, 10, 300, 43);
UIImage *buttonBackground = [UIImage imageNamed:#"ButtonDelete.png"];
[newDeleteButton setImage:buttonBackground forState:UIControlStateNormal];
[newDeleteButton addTarget:self action:#selector(deleteButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
UILabel *deleteTitle = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 300, 39)];
deleteTitle.text = #"Delete";
deleteTitle.font = [UIFont boldSystemFontOfSize:20];
deleteTitle.textColor = [UIColor whiteColor];
deleteTitle.textAlignment = UITextAlignmentCenter;
deleteTitle.backgroundColor = [UIColor clearColor];
[footerView addSubview:newDeleteButton];
[footerView addSubview:deleteTitle];
formTableView.tableFooterView = footerView;
First, you create the view for footer.
Then you make a button with the correct background — just make a screenshot of any button you need and delete letters from it.
Than you create a caption for your button and place it over the button.
The last step is to put the button and caption in the footer view, and put the footer view into the table.

Related

button action in UITableView Cell

In my app one UITableView is there. In table cell am placing two labels and one button. button height is equal to (label1+ label2) height. these are to display content. and button is for action. Here my problem is am not able to perform button action in all portion. only some part is working when clicking.
Here is the code am used to place the labels and buttons
artistButton = [[UIButton alloc] initWithFrame:CGRectMake(11.0, 6.0, 170.0, 50.0)];
artistButton.backgroundColor = [UIColor redColor];
[self.contentView bringSubviewToFront:artistButton];
[self.contentView addSubview:artistButton];
artistLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(11.0, 6.0, 170.0, 27.0)];
artistLabel1.textAlignment = UITextAlignmentLeft;
artistLabel1.textColor = [UIColor colorWithRed:0.14 green:0.29 blue:0.42 alpha:1];
artistLabel1.font = [UIFont boldSystemFontOfSize:15.0];
artistLabel1.backgroundColor = [UIColor blueColor];
[self.contentView addSubview:artistLabel1];
artistLabel2 = [[UILabel alloc] initWithFrame:CGRectMake(11.0,20.0, 170.0, 27.0)];
artistLabel2.textAlignment = UITextAlignmentLeft;
artistLabel2.textColor = [UIColor grayColor];
artistLabel2.font = [UIFont boldSystemFontOfSize:12.0];
artistLabel2.backgroundColor = [UIColor grayColor];
[self.contentView addSubview:artistLabel2];
any one can help or suggest.
Thanks in advance.
I found answer for my question.
Because of size of the button and labels only it is not working.
Now am adjusted the width and length of button and labels its working fine.
Thank you all.
add one line before UIButton declaration..
artistButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
after that you can initialize your UIButton code.
Add Target action to this Button
artistButton = [[UIButton alloc] initWithFrame:CGRectMake(11.0, 6.0, 170.0, 50.0)];
artistButton.backgroundColor = [UIColor redColor];
[artistButton addTarget:self
action:#selector(ArtistAction)
forControlEvents:UIControlEventTouchUpInSide];
[self.contentView bringSubviewToFront:artistButton];
[self.contentView addSubview:artistButton];
-(void)ArtistAction
{
NSLog("Test Artist Action");
}
I suppose you do realize that the frames you set are overlapping.
You do call [self.contentView bringSubviewToFront:artistButton]; but you add the button as a subview after so it will have no effect.
Also you add other subviews after adding the button and those will be placed above you button.
So just add the two labels first and then the button you should be able to click the button properly, though you labels will be under the button and not sure how much of them will be visible. Check the frames you are setting for the objects you are adding.
Just use for your cell tableView:didSelectRowAtIndex: method.

Create highlighted state background image programmatically for UIButton

I created a UIBarButton programmatically with the following code:
UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
[rightButton setFrame:CGRectMake(0, 0, 81, 30)];
[rightButton setBackgroundColor:[UIColor clearColor]];
rightButton.layer.borderColor = [UIColor blackColor].CGColor;
rightButton.layer.borderWidth = 0.5f;
rightButton.layer.cornerRadius = 5.0f;
rightButton.titleLabel.font = [UIFont fontWithName:#"HelveticaNeue-Bold" size:12];
[rightButton setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal];
[rightButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
//set text according to sign in status
if (signIn) {
[rightButton setTitle:#"5 votes left" forState:UIControlStateNormal];
} else {
[rightButton setTitle:#"Sign in" forState:UIControlStateNormal];
}
UIBarButtonItem * rightBarButton = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
self.navigationItem.rightBarButtonItem = rightBarButton;
The obtained button has the desired aspect but now what I need is that when the status of the button is highlighted there should be a gradient effect fading to black to let the user know that he has pressed the button, because right now when I pressed the button, nothing happens to the view so the user has no way to know that he has pressed the button.
I want to explore a choice that does NOT involve setting the background images for the desired states because the text of the button can change dynamically according to the app configurations so I need to do this entirely by code.
Although this won't directly answer your question, it may help. I had to create some graphics for a button dynamically and came up with a method using core graphics to create my button image. It gives me the flexibility to change to appearance parametrically in the code.It draws the button image in an abstract graphics context and then converts the result into an image that I can use for my button. YOu might get enough out of my explanation that you can try it yourself for your needs.
Subclass UIButton and add a CALayer or CAGradientLayer to achieve the highlight effect that you want. Set the initial state of the highlight layer to hidden. Override setHighlighted: with something like:
- (void) setHighlighted:(BOOL)highlight {
highlightLayer.hidden = !highlight;
[super setHighlighted:highlight];
}

adding custom UIButton to UINavigationBar

So the code I have is as follows:
// Create a containing view to position the button
UIView *containingView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 23.5, 21.5)] autorelease];
// Create a custom button with the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"Settings.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(settings) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(-19, -3, 21.5, 21.5)];
[containingView addSubview:button];
// Create a container bar button
UIBarButtonItem *containingBarButton = [[[UIBarButtonItem alloc] initWithCustomView:containingView] autorelease];
self.navigationItem.rightBarButtonItem = containingBarButton;
The issue is that my Settings.png original image size is 21.5, 21.5 and there fore the button is super hard to click. I have to tap really hard in order to trigger the UITouchUpInside to be triggered. This will clearly be rejected if I put it in the app store, as it is not in compliance with apple's HIG. Is there a way around this? I still need to use UIView as the container for the UIButton as I'd like to position it correctly on the UINavigationBar
Try to set a bigger fram to the button like 40,40 and set the content mode to be the center so the image will apear to be in the center.
button.contentMode = UIViewContentModeCenter;
Tell me if that helped

UIbutton on UItableView Cell not clickable

I have added uibutton in a cell in uitable view. I want this button to be pressed and interat with user. I added this line of code in cell implementation class.
readMore = [[UIButton alloc]initWithFrame: CGRectMake(180, 50, 67, 25)];
[readMore addTarget:self action:#selector(readMoreClic:) forControlEvents:UIControlEventTouchUpInside];
[readMore setImage:[UIImage imageNamed:#"readmore.png"] forState:UIControlStateNormal];
[self addSubview:readMore];
the problem is that it is not clicked (it is always in highlight state after selecting the cell). I tried :-
1- [self setSelectionStyle:UITableViewCellSelectionStyleNone];
2- cell.userInteractionEnabled = NO
but I still get cells selected and highlighted with blue color and button not clicked. even after i've chosen
[self setSelectionStyle:UITableViewCellSelectionStyleGray]
some one help plz
thx
[note i have a textView in the same cell and it allows interaction (select and copy) ]
[i am using xcode 4 with iOS 4.3]
try a different control event?:
[readMore addTarget:self action:#selector(readMoreClic:) forControlEvents:UIControlEventTouchDown];
well, i don't quite understand why your button don't respond, because i've came across similar problems but i've used different solutions. here's what i've done:
CGRect reuseableRect = CGRectMake(20, 290, 260, 37);
self.actionButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.actionButton.frame = reuseableRect;
[self.actionButton setTitle:#"Initialize" forState:UIControlStateNormal];
[self.actionButton addTarget:nil action:#selector(performAction) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.actionButton];
Actually, i did this :
self.actionButton = [[UIButton alloc] initWithFrame:reuseableRect];
but it didn't work. so i changed it into
self.actionButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
the resueableRect is just a CGRect that I've used all through the view initialization.
as for the three lines of your previous solution, the first one:
[self setSelectionStyle:UITableViewCellSelectionStyleNone];
it's doing some configurations to the tableView and its cells, so it's not going to affect the button
the second one:
cell.userInteractionEnabled = NO;
it's not configuring the button as well, what's more, since the cell is the super view of the button, this line prevents any user interactions.
the third one is not doing anything to the button as well, so i recommend that you delete all of them if you were thinking about configuring the button
You don't need to do anything with selection style or userInteractionEnabled. Make sure that readMoreClic: looks like:
-(void)readMoreClic:(id)sender
{
}

Smaller active area for custom UIBarButtonItem

I have a UINavigationBar with a custom UIBarButtonItem (which uses a UIButton as its custom view). The problem is: the active area of the custom button is much too large, if I tap at least 40 pixels outside the button, it still gets registered as a tap on the button. This results in accidental taps. How can I reduce the active area on these buttons?
I noticed this weirdness too. I found that using a container UIView fixes this. For example:
UIButton *menuButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButton addTarget:self action:#selector(revealMenu:) forControlEvents:UIControlEventTouchUpInside];
[menuButton setImage:[UIImage imageNamed:#"menuIcon"] forState:UIControlStateNormal];
UIView *menuButtonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButtonContainer addSubview:menuButton];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:menuButtonContainer];
I think u haven't changed the size of the custom button...
Try doing this...
In Interface builder select the button which u want to reduce the active area and then press "Command+3" or "tools --> Size inspector" in that reduce 'W' and 'H' values...
this will make the custom button smaller and so the active area also get reduced...
~Raviraja
Are you adding the button through Interface Builder or are you doing it programmatically? Either way, you can use this line of code to set the bounds of the image:
yourButton.bounds = CGRectMake( 0, 0, yourImage.size.width, yourImage.size.height );
If you want a full example, here's one I used in one of my apps:
UIImage *image = [UIImage imageNamed:#"audio-off.png"];
UIButton *myMuteButton = [UIButton buttonWithType:UIButtonTypeCustom];
myMuteButton.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[myMuteButton setImage:image forState:UIControlStateNormal];
[myMuteButton addTarget:self action:#selector(mute) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *myMuteBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myMuteButton];
navBar.leftBarButtonItem = myMuteBarButtonItem;
[myMuteBarButtonItem release];