What is the best way in iOS to get the following:
3 buttons(?) that will change info displayed after tap. I have something in mind but i would like to hear from someone with experience. I am asking about how to get the looks of that, will it be best to use buttons one next to another, if so how to change border from one side only? If not what do? Also if its a repost of some sort i apologize, couldnt find anything via search.
This seems to be a pretty standard Segmented Control object with a custom gradient or image for each button.
The best way is to use UISegmentedControl
This is a standard way of creating the switcher:
UISegmentedControl *switcher = [[UISegmentedControl alloc] initWithItems: items];
switcher.segmentedControlStyle = UISegmentedControlStyleBar;
switcher.tintColor = self.navigationController.navigationBar.tintColor;
[switcher addTarget:self action: #selector(switcherTapped:)
forControlEvents: UIControlEventValueChanged];
"items" is an array of the 3 items you want to switch between.
Related
I've been looking over countless questions and answers here on SO, but could not find one that would provide the answer for my specific problem.
In a nutshell: I am trying to implement a custom edit view for my UITableViewCells. I would like to keep the basic "delete" and "rearrange/drag" actions (although on opposite ends than in the default implementation and with custom icons), and I would also like to add a "duplicate" action to them and one that navigates to a specific view (separate from the one when you click the cell in normal state). Something like this:
Ideally, I would like to trigger this edit mode on all cells when I toggle edit mode with a separate button, and on individual cells with a left swipe (without the drag option if it is not possible on an individual cell).
I have sub-classed UITableViewCell and was able to add a swipe recognizer that reveals a view ("cellOptionsContainer") with the 3 custom buttons on the right, all of which I was able to make work using tags and delegates, but that is most certainly not the right way to do things because I've added them to the cell's content view (not knowing any better):
// Add container to hold options buttons
cellOptionsContainer = [[UIView alloc] initWithFrame:CGRectMake(cellWidth,
0.0f,
(dataBase.sizeInteraction * 3),
dataBase.sizeInteraction)];
[self.contentView addSubview:cellOptionsContainer];
// Add edit button
UIButton *cellOptionsButton = [[UIButton alloc] initWithFrame:CGRectMake((0.0f),
0.0f,
dataBase.sizeInteraction,
dataBase.sizeInteraction)];
cellOptionsButton.tag = cellID;
[cellOptionsButton setImage:[UIImage imageNamed:#"iconEditOutlined"] forState:UIControlStateNormal];
[cellOptionsButton setShowsTouchWhenHighlighted:YES];
[cellOptionsButton setAdjustsImageWhenHighlighted:NO];
[cellOptionsButton addTarget:self action:#selector(presentEditView:) forControlEvents:UIControlEventTouchUpInside];
//[cellOptionsContainer addSubview:cellOptionsButton];
[cellOptionsContainer addSubview:cellOptionsButton];
Meanwhile, I was also able to make work the standard edit view in my UITableView delegate (rearranging and deleting both works fine), but I was unable to augment this standard edit view with the added functionality and visual customization illustrated above. I cannot even find a way to change the standard icons...
Any help would be much appreciated; although, I am looking for Objective-C answers as I do not know Swift! I am also doing everything programmatically; I do not use interface builder.
Aside from duplicating the look of UINavigationItem into a custom image file, is there any way to add a button to iOS application that looks like a UINavigationItem?
I have UITableView and would like to have buttons on the right side of each cell for specific actions (1 button per cell, but not all cells have the same buttons). So I was looking to base this on the behaviour of "Delete" button that shows up when doing swipe-to-delete on table cells, except I would also need the ability to change the color and text of such a button.
What's the best way to do something like this?
Edit: I know I can just duplicate that look in Photoshop and use an image, but that way to change title and colour I have to go back to editing the image every time. Is there any way to make a button that looks like UINavigationItem programmatically, outside of a UINavigationBar?
The button style I was looking for is UISegmentedControl. It behaves a little bit different than a standard button, but looks a whole lot better. A good alternative to the ugly inflexible UIButton if you don't have hours to spend making buttons in a graphics editor.
UISegmentedControl *btn = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:#"My Button"]];
btn.segmentedControlStyle = UISegmentedControlStyleBar;
btn.momentary = YES;
btn.tintColor = [UIColor greenColor];
[btn addTarget:self action:#selector(btn_action:) forControlEvents:UIControlEventValueChanged];
I'm having a problem when I try to change a UINavigationBar's "back" button custom icon. To achieve such a thing, I'm using the following code:
- (void)viewDidLoad {
[super viewDidLoad];
UIBarButtonItem* leftBtn;
UIImage* botonVolverImg = [UIImage imageNamed:#"boton_volver.png"];
leftBtn = self.navigationItem.leftBarButtonItem;
leftBtn.image = botonVolverImg;
}
But, when the view appears, you see this:
a busy cat http://www.timotteo.com.ar/boton.png
(You can see that the old button still appears at the back, plus the image I chose looks a bit streched)
I've been changing the imageInsets property, but that doesn't seem to work. I've also been reading the forum around, but couldn´t find the exact solution.
Any suggestions are welcomed!
The image property for UIBarButtonItem doesn't correspond to the background image, only an image that provides additional context. If you're targeting 5.0+, your best bet would be to use -setBackButtonBackgroundImage:forState:barMetrics: to set a background for the bar button item.
To supplement Mark's answer, if your customer is requiring you to support iOS 4, you could create a UIButton that looks exactly how your customer wants it to (ie, just that image), and then use UIBarButton's initWithCustomView method to create your own back button. You can then have that button trigger popViewController or whatever appropriate action you need.
I know about self.navigationItem.rightBarButtonItem.enabled = NO, but how do I make a UIBarButtonItem appear disabled but actually detect when the user taps it? I want to do this in case I want to alert the user what is incomplete.
The way i'd do it is not disable it, but when its 'disabled' set another bar button item there with a disabled looking background and no alternate image for the tap event. Then when it is tapped, show an alert view to tell them that it isn't available:
- (void)init
{
[self setDisabledBarButtonItem:[UIBarButtonItem alloc] initWith...];
[disabledBarButtonItem addTarget:......];
[self setEnabledBarButtonItem:[UIBarButtonItem alloc] initWith...];
[enabledBarButtonItem addTarget......];
}
- (void)timeToDisableBarButtonItem:(id)sender
{
[self.navigationitem setRightBarButtonItem:disabledBarButtonItem animated:NO];
}
- (void)timeToEnableBarButtonitem:(id)sender
{
[self.navigationitem setRightBarButtonItem:enabledBarButtonItem animated:NO];
}
Good UX practises state however that you shouldn't need to tell your user that it is disabled, they should be able to tell without an alert. Easier said than done of course :)
Would love to see a cleaner solution than this, but its the only way I think your going to get it to work.
Hope that helps :)
I had a similar problem, except I was trying to make a disabled button look enabled. I found a much nicer solution that is available in iOS 5.0 - you can use setTitleTextAttributes:forState to control the appearance of your enabled (or in my case, disabled) state, as well as many other states.
API reference:
https://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIBarItem_Class/Reference/Reference.html#//apple_ref/occ/instm/UIBarItem/setTitleTextAttributes:forState:
In most cases you won't want to do this. However, in my case it proved necessary. I have a toolbar button that is a document title, and pressing it while in edit mode allows brings up a UITextField to edit the title, but in run mode the title should not be editable while still looking like a title, rather than a disabled button. By changing the text color to match my enabled state, I achieved the look and behavior I wanted without having to swap the button or the action out (and consequently have to synchronize my title text across three places instead of two).
I want to know whether drawing a round UIButton(not rounded rect) is possible.
When I add a round image in a UIButton of type custom, then it looks like a round button. But at the moment the button is clicked the boundary of the button becomes visible, so that it looks like a square button, then again when the click ends it looks like a round button.
I want the button to look like a round button even at the moment the click happens. is this possible?
Tested Code:
.h
-(void)vijayWithApple;
.m
-(void)vijayWithApple{
NSLog(#"vijayWithApple Called");
}
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"Micky.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(vijayWithApple) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:#"Show View" forState:UIControlStateNormal];
button.frame = CGRectMake(135.0, 180.0, 40.0, 40.0);//width and height should be same value
button.clipsToBounds = YES;
button.layer.cornerRadius = 20;//half of the width
button.layer.borderColor=[UIColor redColor].CGColor;
button.layer.borderWidth=2.0f;
[self.view addSubview:button];
Result
Just create two rounded button images, one for the pressed state and one for unpressed.
In IB, create a UIButton of type Custom. Go to the section where you set a background image, and set the dropdown with "All" to normal - now set the image to your unpressed image.
Then change the dropdown to "Selected", and put in your pressed image.
Now change the fill type to be aspect fit, and make the button sqare. Use as a normal UIButton anywhere. You can of course also easily do this all programaitcally with similar steps (setting images for UIControlStateNormal and UIControlStateSelected).
You'd probably have to create a custom control for that, but do you really need a round button?
Every platform has its UI conventions, and the iPhone is no exception. Users expect the buttons to be rounded rectangles.
UPDATE in response to comment:
If I'm getting this right, you're not looking for a round button, but rather a clickable (touchable) image.
You can use an UIImageView and its touchesBegan method.
UPDATE 2:
Wait a second. What kind of radio button are we talking about? For some reason I thought you were trying to imitate a real radio. If you're talking about a radio button group, please use a UISegmentedControl or a UIPicker.
UIButton *but=[UIButton buttonWithType:UIButtonTypeCustom];
but.layer.cornerRadius=50;
From what I know of the SDK (admittedly I have very little experience beyond tutorials in books/screencasts), you'd have to create your own control to have a radio button. There are a couple of suggestions on how to implement that in this question.
That said, from a user's perspective I feel like it would be better to stick to the native controls. iPhone users are used to specific controls (i.e. UITableViews or UIPickerViews) for this type of interaction. Straying from practically universal UI conventions tends to make the user experience more jarring.
take the help of this site for creating Round Button on iPhone.
You can get many custom controls :)
http://www.cocoacontrols.com/controls
http://www.cocoacontrols.com/platforms/ios/controls/uiglossybutton
H#PPY CODING !
Thanks & regards,
Gautam Tiwari