I have a view with three small custom UIButtons (w:25,h:35) and I feel its really hard to get the touch events.
I have added target for touchUpInside event.
[button addTarget:self action:#selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
But as I said I myself seem to miss it easily. Then I looked into similar buttons in apple's keyboard. They seem to have a much bigger touch area, specially the keys with alphabet "A" and "L". I am wondering how they have managed to do the same.
Any help and code sample would be greatly appreciated.
make a new class that enherits UIButton and override this function:
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
int errorMargin = 8;
if ([self.titleLabel.text isEqualToString:#"A"] || [self.titleLabel.text isEqualToString:#"a"]) {
CGRect largerFrame = CGRectMake(0 - 20, 0 - errorMargin, self.frame.size.width + 22, self.frame.size.height + errorMargin*2);
return (CGRectContainsPoint(largerFrame, point) == 1) ? self : nil;
}
if ([self.titleLabel.text isEqualToString:#"L"] || [self.titleLabel.text isEqualToString:#"l"]) {
CGRect largerFrame = CGRectMake(0 - 2, 0 - errorMargin, self.frame.size.width + 20, self.frame.size.height + errorMargin*2);
return (CGRectContainsPoint(largerFrame, point) == 1) ? self : nil;
}
CGRect largerFrame = CGRectMake(0 - 2, 0 - errorMargin, self.frame.size.width + 2, self.frame.size.height + errorMargin*2);
return (CGRectContainsPoint(largerFrame, point) == 1) ? self : nil;
}
you will get the same visual output and the touchable area that you want
You shouldn´t create a button smaller than 40x40 points. You can put a smaller image in it. You can have an image with is 25,35 (b.e. myImage#2x.png).
An example:
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 40, 40)];
[button setImage:[UIImage imageNamed:#"myImage"] forState:UIControlStateNormal];
// Other option
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(myPosition.x-15, myPosition.y-15, 40, 40)];
[button setImage:[UIImage imageNamed:#"myImage"] forState:UIControlStateNormal];
// ......
button.layer.borderColor = [[UIColor clearColor] CGColor];
button.layer.borderWidth = 15.0;
button.layer.masksToBounds = YES;
Have you tried using Edge Insets?
This basically let's you set inset or outset margins for the rectangle around the button.
https://developer.apple.com/library/ios/documentation/uikit/reference/uibutton_class/index.html#//apple_ref/doc/uid/TP40006815-CH3-SW31
Related
I created a method that creates a subview based on the input size so there is not a defined and default corner CGRect values.I want to create a dismiss button that will be located at the top left corner of each subview. Currently I'm using this method to add it, but the problem with this is that the values for CGRectMake can not be static.
CGRect tapToDismissFrame = CGRectMake(50.0f, 50.0f, 400.0f, 400.0f);
UIButton *tapToDismiss = [[UIButton alloc] initWithFrame:tapToDismissFrame];
tapToDismiss.backgroundColor = [UIColor clearColor];
tapToDismiss.titleLabel.font = [UIFont fontWithName:[NSString stringWithFormat:#"Helvetica-Bold"] size:20];
[tapToDismiss setTitle:#"⊗" forState:UIControlStateNormal];
[tapToDismiss setTitleColor:[UIColor colorWithRed:173.0/255.0 green:36.0/255.0 blue:36.0/255.0 alpha:1.0] forState:UIControlStateNormal];
[tapToDismiss addTarget:self action:#selector(tapToDismissClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.maskView addSubview:tapToDismiss];
How can i get the dynamic values in order to create it in the top left or right corner.
You should use CGGeometry functions to calculate correct frame for your dismiss button. Suppose you created that button. After that point here is a sample code:
[button sizeToFit];
CGRect maskViewBounds = self.maskView.bounds;
CGFloat top = CGRectGetMinY(maskViewBounds);
CGRect left = CGRectGetMaxX(maskViewBounds);
CGFloat buttonHeight = button.size.height;
CGFloat buttonWidth = button.size.width;
CGFloat topMargin = 5.0f;
CGFloat leftMargin = 5.0f;
CGPoint buttonCenter = CGPointMake(top + buttonHeight / 2.0 + topMargin, left - buttonWidth / 2.0 - leftMargin);
button.center = buttonCenter;
Note: I didn't write this code in Xcode. So there may be type errors.
I would like to add buttons to an UIView. The number of buttons varies from view to view.
I want to achieve the following:
I tried to add the Buttons (in a foreach construct) like this:
UIButton *but=[UIButton buttonWithType:UIButtonTypeRoundedRect];
but.frame= CGRectMake(200, 15, 15, 15);
[but setTitle:#"Ok" forState:UIControlStateNormal];
[but addTarget:self action:#selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:but];
But I don't know how to calculate the CGRectMake when it comes to an new line. How can I check the end of the line (UIView)? Or is it kinda stupid to add Buttons like this?
Thanks
Florian
You need to add calculate buttons size after you set the title. Then keep track of the current X and Y of the previous buttons and figure out if the newly created button can fit on the current "line". Otherwise go to the next one.
I suggest you to look at existing components and see how they do it, below are a couple links.
https://github.com/domness/DWTagList
https://github.com/andreamazz/AMTagListView
With the following code , you can place multiple buttons in one row as long as their total width and the gap is smaller then the view's width.
UIView *view = nil;
NSArray *allBtns = nil;
float viewWidth;
float currentY = 0;
float currentX = 0;
float btnGapWidth = 10.0;
float btnGapHeight = 2.0;
for (UIButton *btn in allBtns) {
CGRect rc = btn.frame;
BOOL shouldAddToNewLine = viewWidth - currentX - btnGapWidth < rc.size.width ? YES : NO;
if (shouldAddToNewLine) {
rc.origin = CGPointMake(0, currentY + rc.size.height + btnGapHeight);
currentX = 0;
currentY += rc.size.height + btnGapHeight;
} else {
//another row
rc.origin = CGPointMake(currentX + rc.size.width + btnGapWidth, currentY);
currentX += rc.size.width + btnGapWidth;
}
btn.frame = rc;
[view addSubview:btn];
}
i want to fill area (UIView) with buttons(UIButton) so that they do not intersect with each others.
My idea:
create initial button at random position in view;
fill view with other buttons from initial button (count < 20) that they do not intersect ~10 pixels from each other.
What have i done so far:
I created method:
-(void)generateButtonsForView:(UIView *)view buttonCount:(int)count
{
//get size of main view
float viewWidth = view.frame.size.width;
float viewHeight = view.frame.size.height;
//set button at random position
UIButton *initialButton = [[UIButton alloc] initWithFrame:CGRectMake(arc4random() % (int)viewWidth,
arc4random() % (int)viewHeight,
buttonWidth, buttonHeight)];
[initialButton setBackgroundImage:[UIImage imageNamed:#"button"] forState:UIControlStateNormal];
[view addSubview:initialButton];
// set count to 20 - max number of buttons on screen
if (count > 20)
count = 20;
//fill view with buttons from initial button +- 10 pixels
for (int i=0;i<=count;i++)
{
//button
UIButton *otherButtons = [[UIButton alloc] init];
[otherButtons setBackgroundImage:[UIImage imageNamed:#"button"] forState:UIControlStateNormal];
...//have no idea what to do here
}
}
So i'm confused on the place where i want to generate the position of the other buttons, depending on the initial button. I do not know how to generate theirs position that they were at a distance of 5-10 pixels from each other... Any ideas how to realise this? Thanks!
Here's an example with views rather than buttons, but the concept is the same. I use CGRectInset to give the new potential view a buffer of 10 points around it, then look for whether the new view intersects any of the other views. If there's no intersection, add the subview, if there is, try again with a new random location.
-(void)generateButtonsForView {
float viewWidth = self.view.frame.size.width;
float viewHeight = self.view.frame.size.height;
UIView *initialView = [[UIView alloc] initWithFrame:CGRectMake(arc4random() % (int)viewWidth, arc4random() % (int)viewHeight, 50, 30)];
initialView.backgroundColor = [UIColor redColor];
[self.view addSubview:initialView];
int numViews = 0;
while (numViews < 19) {
BOOL goodView = YES;
UIView *candidateView = [[UIView alloc] initWithFrame:CGRectMake(arc4random() % (int)viewWidth, arc4random() % (int)viewHeight, 50, 30)];
candidateView.backgroundColor = [UIColor redColor];
for (UIView *placedView in self.view.subviews) {
if (CGRectIntersectsRect(CGRectInset(candidateView.frame, -10, -10), placedView.frame)) {
goodView = NO;
break;
}
}
if (goodView) {
[self.view addSubview:candidateView];
numViews += 1;
}
}
}
I'm working on an iPad app and part of the UI is a scrollview that has buttons for its contents. I'm working on adding images to these buttons, but when I do so, I only ever get the image in one spot, when I should be seeing it on all the buttons. This is what I'm doing:
float scrollCurrTop = 0;
CGRect currProcedureButtonFrame = CGRectMake(0,
scrollCurrTop,
self.fProceduresView.frame.size.width,
self.fLabelAndButtonHeight);
PatientIDButton* currProcedureButton = [PatientIDButton buttonWithType:UIButtonTypeCustom];
[currProcedureButton setFrame:currProcedureButtonFrame];
[currProcedureButton.layer setBorderColor: [self.fPanelViewBorderColor CGColor]];
[currProcedureButton.layer setBorderWidth: self.fBorderWidth];
currProcedureButton.titleLabel.font = self.fLabelFont;
NSString* displayName = [grabbing name];
if (displayName == nil)
{
displayName = currPlanName;
}
[currProcedureButton setTitle:displayName
forState:UIControlStateNormal];
[currProcedureButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
currProcedureButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
currProcedureButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
// is the plan approved?
if ([self isPlanApproved:currPlanName])
{
// add the checkmark to this plan button
CGRect currPlanButtonFrame = currProcedureButton.frame;
float originX = currPlanButtonFrame.size.width - (currPlanButtonFrame.size.width/3.0f);
float originY = currPlanButtonFrame.origin.y;
float width = currPlanButtonFrame.size.width - originX;
float height = currPlanButtonFrame.size.height;
CGRect currPlanApprovalImageFrame = CGRectMake(originX, originY, width, height);
UIImageView* currPlanApprovalImage = [[UIImageView alloc] initWithFrame:currPlanApprovalImageFrame];
[currPlanApprovalImage setBackgroundColor:[UIColor colorWithRed:(63.0f/255.0f)
green:(179.0f/255.0f)
blue:(79.0f/255.0f)
alpha:1.0f]];
[currPlanApprovalImage setImage:self.fCheckMarkIcon];
[currProcedureButton addSubview:currPlanApprovalImage];
}
[self.fProceduresView addSubview:currProcedureButton];
scrollCurrTop += self.fLabelAndButtonHeight;
Where 'fProceduresView' is the scrollview that houses the buttons. What am I doing wrong?
It seems that you're misunderstanding the logic behing setting the frame of the imageview's those you're trying to add
CGRect currPlanButtonFrame = currProcedureButton.frame;
float originX = currPlanButtonFrame.size.width - (currPlanButtonFrame.size.width/3.0f);
float originY = currPlanButtonFrame.origin.y;
float width = currPlanButtonFrame.size.width - originX;
float height = currPlanButtonFrame.size.height;
CGRect currPlanApprovalImageFrame = CGRectMake(originX, originY, width, height);
UIImageView* currPlanApprovalImage = [[UIImageView alloc] initWithFrame:currPlanApprovalImageFrame];
You don't need to set originY to currPlanButtonFrame.origin.y;
All subviews have relative coordinates to their's superviews.
So in your case originY should be 0
For example:
// Image is visible
Button frame [0, 0, 100, 100]
image in button [0, 0, 100, 100]
// Button is visible, but image is not because it will be clipped by bounds of the button.
Button frame [100, 100, 100, 100]
image in button [100, 100, 100, 100]
Also you will be able to "see" your images, if you set
currProcedureButton.clipsToBounds = NO
I have a very perplexing problem. I have a UIView with a few buttons spread across it. For whatever reason when you rotate the view(simulator or device) the buttons on the right half of the screen become unclickable. The unclickable area resembles the size of the orientation that was just rotated from. For example, if you have an iPhone in portrait mode and turn it to landscape the unclickable area is about the width of the iPhone screen in portrait. At first I thought that their must be an invisible element on top of that portion of the screen that was intercepting the clicks, but then I set the alpha of everything on screen to 1 and set every elements border color (via CALayer) so I could inspect. Surprisingly everything was where it was supposed to be and their was nothing(that I could find) covering the buttons. I even tried bringing the buttons to the front via [self.view bringSubviewToFront:self.BUTTON]
I have one function that handles setting the frames of everything when the view is either loaded or rotated. This function call is the ONLY thing in my rotation function and my viewWillAppear function. The unclickable buttons problem only happens when the device is rotated. For example, if you rotate the device from portrait to landscape and the buttons become unclickable, then all you have to do is select another tab from the tab bar at the bottom to load another view, then when you click back on the tab with the view with this weird problem(not having rotated anything), the buttons are all clickable and working as expected. The thing I just cant comprehend about this problem is that the EXACT same code is called in viewWillAppear and didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation yet the buttons are only unclickable when the device is rotated and the buttons are clicked. If the user clicks on another tab and then returns the the tab with this problem, the buttons now work as expected.
To complicate things further, this problem ONLY occurs on ios7. Everything is all fine and dandy on ios6.
I have tried everything I can think of and I just don't have a clue as to why this is happening.
Here is some of the code:
-(void)loadCorrectElements{
if(self.interfaceOrientation == UIInterfaceOrientationPortrait || self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown){
//portrait
int amountToSubtract = ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)?20:0;
int distanceBetweenLabels = (self.view.bounds.size.height - amountToSubtract) / 5;
self.viewForLabels.frame = CGRectMake(0, distanceBetweenLabels, self.view.bounds.size.width, distanceBetweenLabels*3);
int heightOfLabels = (self.viewForLabels.bounds.size.height / 3) - 20;
int ycoordOfLongitudeLabel = (self.viewForLabels.bounds.size.height / 3) + 10;
int ycoordOfAltitudeLabel = ((self.viewForLabels.bounds.size.height / 3) * 2) + 10;
self.latitudeLabel.frame = CGRectMake(10, 10, self.view.bounds.size.width-20, heightOfLabels);
self.longitudeLabel.frame = CGRectMake(10, ycoordOfLongitudeLabel, self.view.bounds.size.width-20, heightOfLabels);
self.altitudeLabel.frame = CGRectMake(10, ycoordOfAltitudeLabel, self.view.bounds.size.width-20, heightOfLabels);
self.optionsButton.frame = CGRectMake(self.view.bounds.size.width-36, self.view.bounds.size.height-36, 26, 26);
int ycoordForSpeakButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + 10;
self.speakButton.frame = CGRectMake(self.view.bounds.size.width - 40, ycoordForSpeakButton, 30, 25);
int heightOfRecordLabel = ((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height))) / 2;
int yCoordForRecordButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + (((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height)) / 2) - (heightOfRecordLabel / 2));
self.recordButton.frame = CGRectMake((self.view.bounds.size.width / 2) - (self.view.bounds.size.width / 4) / 2, yCoordForRecordButton, self.view.bounds.size.width / 4, heightOfRecordLabel);
int ycoordForOldCoordsButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + (((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height))) / 2 - 12);
self.oldCoordsButton.frame = CGRectMake(10, ycoordForOldCoordsButton, 24, 24);
}else{
//landscape
int amountToSubtract = ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)?20:0;
self.viewForLabels.frame = CGRectMake(5, 5 + amountToSubtract, self.view.bounds.size.width-10, self.view.bounds.size.height - 60);
int heightOfLabels = (self.viewForLabels.bounds.size.height - amountToSubtract) / 3;
int ycoordOfLongitudeLabel = (self.viewForLabels.bounds.size.height / 3);
int ycoordOfAltitudeLabel = ((self.viewForLabels.bounds.size.height / 3) * 2);
self.latitudeLabel.frame = CGRectMake(5, 0, self.view.bounds.size.width-20, heightOfLabels);
self.longitudeLabel.frame = CGRectMake(5, ycoordOfLongitudeLabel, self.view.bounds.size.width-20, heightOfLabels);
self.altitudeLabel.frame = CGRectMake(5, ycoordOfAltitudeLabel, self.view.bounds.size.width-20, heightOfLabels);
int yCoordForOptionsButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + (((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height)) / 2) - 13);
self.optionsButton.frame = CGRectMake(self.view.bounds.size.width - 31, yCoordForOptionsButton, 26, 26);
self.speakButton.frame = CGRectMake(self.optionsButton.frame.origin.x - 40, self.optionsButton.frame.origin.y, 30, 25);
int heightOfRecordLabel = ((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height))) / 2;
int yCoordForRecordButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + (((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height)) / 2) - (heightOfRecordLabel / 2));
self.recordButton.frame = CGRectMake((self.view.bounds.size.width / 2) - (self.view.bounds.size.width / 4) / 2, yCoordForRecordButton, self.view.bounds.size.width / 4, heightOfRecordLabel);
int ycoordForOldCoordsButton = self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height + (((self.view.bounds.size.height - (self.viewForLabels.frame.origin.y + self.viewForLabels.frame.size.height))) / 2 - 12);
self.oldCoordsButton.frame = CGRectMake(10, ycoordForOldCoordsButton, 24, 24);
}//end if
[self setLabelText:self.latitudeLabel text:self.latitudeLabel.text];
[self setLabelText:self.longitudeLabel text:self.longitudeLabel.text];
[self setLabelText:self.altitudeLabel text:self.altitudeLabel.text];
self.mainContainer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
}//end method
-(void)viewWillAppear:(BOOL)animated{
[self loadCorrectElements];
}//end function
-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
[self loadCorrectElements];
}//end function
Here are the button declarations inside ViewDidLoad
//create options button
self.optionsButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.optionsButton setImage:[UIImage imageNamed:#"Share.png"] forState:UIControlStateNormal];
[self.optionsButton addTarget:self action:#selector(shareButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[self.mainContainer addSubview:self.optionsButton];
//create speak button
self.speakButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.speakButton setImage:[UIImage imageNamed:#"Sound.png"] forState:UIControlStateNormal];
[self.speakButton addTarget:self action:#selector(speakButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[self.mainContainer addSubview:self.speakButton];
//create record button
self.recordButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.recordButton.backgroundColor = self.blueColor;
[self.recordButton setTitle:NSLocalizedString(#"RECORD", nil) forState:UIControlStateNormal];
self.recordButton.layer.cornerRadius = 3.0f;
[self.recordButton addTarget:self action:#selector(recordButtonClicked) forControlEvents:UIControlEventTouchUpInside];
[self.recordButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
[self.mainContainer addSubview:self.recordButton];
//set up old coord button
self.oldCoordsButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.oldCoordsButton setImage:[UIImage imageNamed:#"Clock.png"] forState:UIControlStateNormal];
[self.oldCoordsButton addTarget:self action:#selector(oldCoordsButtonClicked) forControlEvents:UIControlEventTouchUpInside];
[self.mainContainer addSubview:self.oldCoordsButton];
It looks like the viewController's view or the mainWindow is not resizing on rotation.
As Jesse Rusak mentions in his answer, it really makes no sense to do so much calculations in your code to setup the buttons to handle rotation.
Use AutoResizingMasks. It can take out a zillion lines of code. Once you have mastered it, you can move to Auto Layout.
your autoresizing masks can be set somewhat like this
self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight |
UIViewAutoresizingFixedBottomMargin |
UIViewAutoresizingFixedLeftMargin |
UIViewAutoresizingFixedRightMargin |
UIViewAutoresizingFixedTopMargin;
similarly, you can set the autoresizing masks for the buttons. And it'll take care of positioning on rotation. Try a few different options, you'll get the hang of it soon.
It seems likely to me that a superview of your buttons is not being resized correctly. (Views can still be visible outside of their superview, but they won't be interactive.)
I would suggest using a tool like Reveal or Spark Inspector to see where your views are after rotation and so let you figure out which one isn't being resized correctly.
As an aside, you might want to look into using nibs and auto layout for your layouts in the future, as it would eliminate all of the above code.