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.
Related
I am trying to create a chart where a bar in the form of a UIView displays on top of a background UIView. I'd like both to display on top of the UIView for the whole screen. I have done this before successfully, but while I can get the first view to display, I somehow can't get my code to display the bar. Could it have something to do with setting the color? Or can anyone suggest why the second subview is not displaying.
My code:
//Make background box:
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat graphWidth = screenWidth-40;
CGFloat graphHeight = 160;
CGRect graphBounds =CGRectMake(20, 200, graphWidth, graphHeight);
float tableStartY = graphBounds.origin.y;
UIView *graphBox = [[UIView alloc] initWithFrame:graphBounds];
graphBox.backgroundColor = [UIColor colorWithRed:200.0/255.0 green:200.0/255.0 blue:200.0/255.0 alpha:0.2]; graphBox.layer.borderWidth = 1;
graphBox.layer.borderColor = [UIColor blueColor].CGColor;
//Make Bar
CGFloat barWidth = 20;
CGFloat barHeight = 100;
CGRect aBar = CGRectMake(20, tableStartY+1, barWidth, barHeight);
UIView *barView = [[UIView alloc] initWithFrame:aBar];
barView.backgroundColor = [UIColor blueColor];
barView.layer.borderWidth = 1;
barView.layer.borderColor = [UIColor redColor].CGColor;
// [graphBox addSubview:barView];
[self.view addSubview: graphBox];
If I run the above code, it displays the graphBox. If I add the bar directly to the view as a subView instead of the graphBox, the bar displays. However, if I uncomment out the line shown and add the barView first to the graphBox and then add the graphBox to the view, the barView does not display.
Thanks in advance for any suggestions.
If I understand correctly what you need to do, you should replace
CGRect aBar = CGRectMake(20, tableStartY+1, barWidth, barHeight);
with
CGRect aBar = CGRectMake(20, 1, barWidth, barHeight);
[edit: and obviously uncomment the addSubview line]
Perhaps this is an accident in your posted code, but you have specifically commented out where the barView would be added to the screen.
// [graphBox addSubview:barView];
In addition, as another answer lists, your offset is incorrect if you are adding barView to graphBox. If you add it to self.view instead, your offset is correct.
So, you've got two choices, depending on the containment you desire in your view hierarchy:
CGRect aBar = CGRectMake(20, 1, barWidth, barHeight);
// ...
[graphBox addSubview:barView];
or
CGRect aBar = CGRectMake(20, tableStartY+1, barWidth, barHeight);
// ...
[self.view addSubview: graphBox];
[self.view addSubview:barView];
Note that in the second option, the order is important to get the barView to display over top of the graphBox as they will be siblings.
I have tried tirelessly to create a "chips" layout within a table view cell where the height of the cell expands to fill the contents but with no luck.
My research has landed me with this library https://github.com/zoonooz/ZFTokenField but it doesn't quite fill my needs. An example is like the Messages app where the "to" field expands to fill all the contacts, or primarily this image below is what I'm ultimately attempting to achieve:
Where the chips wrap to the next line where appropriate expanding the cell as it goes. The best I have so far is "sort of" working minus the cell height and the label at the start (label should be an easy fix so not the main concern)
I've tried many approaches but with no cigar and any help would be greatly appreciated. (each "chip" needs to be a button so I can tap to remove them). I've tried with a collection view in the table view cell (which I didn't like) and manually laying out each button (show below)
- (CGSize)updateChipsLayout {
self.minWidth = 0.0f;
self.minHeight = 0.0f;
if (!self.visibleButtons) {
self.visibleButtons = [NSMutableArray new];
}
for (UIButton *button in self.visibleButtons) {
[button removeFromSuperview];
}
[self.visibleButtons removeAllObjects];
CGRect oldButtonRect = CGRectZero;
oldButtonRect.origin.x = self.buttonPadding;
oldButtonRect.origin.y = self.buttonPadding;
CGFloat maxHeight = 0.0f;
for (ChipsData *data in self.chips) {
NSString *autoLayout_orientation = #"H";
NSLayoutFormatOptions autoLayout_options = NSLayoutFormatAlignAllLeft;
UIButton *button = [data generateButton];
CGSize buttonSize = button.bounds.size;
CGFloat newX = oldButtonRect.origin.x + oldButtonRect.size.width + self.buttonPadding;
if (newX + buttonSize.width > self.bounds.size.width) {
newX = self.buttonPadding;
oldButtonRect.origin.x = newX;
oldButtonRect.origin.y += maxHeight + self.buttonPadding;
maxHeight = 0.0f;
autoLayout_orientation = #"V";
autoLayout_options = NSLayoutFormatAlignAllTop;
}
if (buttonSize.height > maxHeight) {
maxHeight = buttonSize.height;
}
self.minHeight = MAX(self.minHeight, buttonSize.height);
self.minWidth = MAX(self.minWidth, buttonSize.width);
button.frame = CGRectMake(
newX,
oldButtonRect.origin.y,
button.frame.size.width,
button.frame.size.height
);
button.tag = self.visibleButtons.count;
[button addTarget:self action:#selector(buttonTouchUp:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:button];
oldButtonRect = button.frame;
[self.visibleButtons addObject:button];
}
self.cellSize = CGSizeMake(
oldButtonRect.origin.x + oldButtonRect.size.width + self.buttonPadding,
oldButtonRect.origin.y + maxHeight + self.buttonPadding
);
//[self setHeight:self.cellSize.height];
[self invalidateIntrinsicContentSize];
return self.frame.size;
}
The button generation logic isn't that complex either:
- (UIButton *)generateButton {
UIColor *backgroundColor = [UIColor colorWithWhite:0.1f alpha:1.0f];
UIColor *backgroundColorHighlighted = [UIColor colorWithWhite:0.4f alpha:1.0f];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
NSMutableAttributedString *attrText = [[NSMutableAttributedString alloc] initWithAttributedString:self.attributedText];
[attrText addAttributes:#{
NSForegroundColorAttributeName: [UIColor whiteColor],
NSBackgroundColorAttributeName: backgroundColor,
}
range:NSMakeRange(0, attrText.length)
];
[button setAttributedTitle:attrText forState:UIControlStateNormal];
[button setBackgroundImage:[self generateBackgroundWithColor:backgroundColor] forState:UIControlStateNormal];
[button setBackgroundImage:[self generateBackgroundWithColor:backgroundColorHighlighted] forState:UIControlStateHighlighted];
[button sizeToFit];
[button.layer setCornerRadius:8.0f];
[button.layer setMasksToBounds:YES];
[button setClipsToBounds:YES];
return button;
}
I assume I'll need a function to determine the cell height outside of the cell as I can't get a reference to the cell to determine it's height until I tell it what it's height should be.
PS yes I am aware that I am still using Objective-C when Swift is available.
The size of the cell is not determined by the cell, but by the tableView's delegate, specifically
tableView:heightForRowAtIndexPath:
So, you'll have to get the size of how high each cell will be and return that height. Also, if the data for each item in the cell does not change while the user is in that view, I would recommend storing the height for each individual index in an array once it is known so you can avoid expensive calculations.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// We are just going to assume a single section for brevity
// And we also have an array of CGFloats that is the same size as the # of rows
CGFloat height = knownHeights[indexPath.row];
if (height == 0) // our default value when we created the array
{
// You'll have to write the get custom height function
height = [self getHeightForItemAtIndexPath:indexPath];
knownHeights[indexPath.row] = height;
}
return height;
}
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'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 want to make UIButton exactly round,this code is creating oval button
_img.layer.borderWidth=2.0;
_img.layer.cornerRadius = 100;
_img.layer.masksToBounds = YES;
_img.layer.borderColor=[UIColor blackColor].CGColor;
_img.layer.borderWidth=.5f;
Please help
the property cornerRadius should be the half of the width / height (height and width should be the same)
use this code for a button exactly round:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:#selector(aMethod) forControlEvents:UIControlEventTouchUpInside];
button.frame = CGRectMake(135.0, 70.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];
First of all, why did you assign border width twice? Though it has nothing to do with round button but it's a bad coding example. Anyway, make sure that _img width and height are both equal to 200 if you want a rounded button with 100 corner radius. e.g.
_img.frame = CGRectMake(/* x origin of the button*/, /*y origin of the button*/, 200, 200);
_img.layer.cornerRadius = 100;
_img.layer.clipsToBounds = YES;
_img.layer.borderColor=[UIColor blackColor].CGColor;
_img.layer.borderWidth=.5f;// or 2.0f
hope this will make your button, or whatever _img is, rounded.
First make img width and height same
Img.clipstobounds=YES;
And then make layer.cornertadius equal to width/2 of img