I have a fairly simple TableViewController listing items that can be checked as they are collected. I have successfully implemented a word wrapped label in each cell, and updated heightForRowAtIndexPath such that each row is a suitable height. This is working well:
note: I have set a garish background color on the cell's contentView for testing purposes.
The problem comes when I try to add a checkmark button as the accessoryView for each cell:
UIImage *image = [UIImage imageNamed:#"checked.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
CGRect frame = CGRectMake(0.0, 0.0, 44.0, 44.0);
button.frame = frame;
[button setImage:image forState:UIControlStateNormal]
button.backgroundColor = [UIColor redColor];
cell.accessoryView = button;
For some reason, the alignment is not quite right for my cells that span more than one line once the button size exceeds about 26x26 pixels.
The example above uses 44x44 as the button width.
Can anyone explain what is going on here? Why would there be a different alignment when the contentView is 2-lines versus one? Infact, for each extra line that the text uses, the alignment is increasingly off. I can add the code for the row text if it will help.
I found that this can be resolved by setting the height of the button in the accessory view to match what will be calculated for the row.
So, the code used in heightForRow:atIndexPath: should be copied in to the cellForRowAtIndexPath and used to set the button's height.
I had the same issue and unfortunately I neither can explain the odd behaviour, nor did I solve it. But I made some observations that may be help to others struggling with this issue.
I am using a UIImageView as an accessory view for my cells, and ended up fiddling around with the image dimensions. What finally worked were images to a size of about 16x16 pixels or lower.
As I just wanted a rather tiny image, this worked for me.
Related
I have attached an image of cells in a table view, and you can notice the 2 separator lines in the middle are a tiny bit thicker/darker than the 2 outer lines. I want the lines to all be consistent, and the color/thickness of the outer two lines. I could not find a solution, so I am wondering if anyone knows of any. I figure it would be a simple solution, but I haven't been able to figure it out. Thanks guys.
Select your UITableView from xib or storyboard, then make the UITableView separator to None.
See the image
Then place a UILabel with the width same as of UITableViewCell and height=1 in the bottom of your cell, clear the text of the label and set the backGround color as per your wish, this will solve your problem.
Hope this helps you.
Create a custom separator Line Programatically:
UIView *separatorLine = [[UIView alloc] initWithFrame:
CGRectMake(0, cell.contentView.frame.size.height - 1.0,
cell.contentView.frame.size.width, 1)];
separatorLine.backgroundColor = [UIColor blackColor];;
[cell.contentView addSubview: separatorLine];
or you can add a image view for separator in custom UITableviewCell in UI
I've been banging my head against the wall with this one, so maybe someone here has done this before.
Anyway, I'm trying to change how the delete button looks in my UITableView, and I've got it mostly figured out. I'm changing it by setting the background Color to a UIImage of what I actually want it to look like.
Apparently, though, a UITableViewRowAction has a faint grey line under it, and I can't figure out how to make this disappear. Any pointers would be greatly appreciated. There's a link to what I'm talking about here:
Thank you very much!
This is a separator line of UITableView. You can remove it by setting it's style as None.
Objective C:
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
Swift:
self.tableView.separatorStyle = UITableViewCellSeparatorStyle.None
Initially separator line is not visible, because I think height of image or view added in cell is more than cell height.
And that's why while you swipe separator line is visible. If you are testing in Simulator than use Debug > Color Blended Layers of Simultor. Which is helpful to track overlapping views.
Edit:
iOS 8.0 introduced layoutMargins for UITableView. So it may be possible reason for that also.
Check out this answer for more information.
It explains to clear layout margins by setting cell layoutMargins as UIEdgeInsetsZero.
Try this on cellForRowAtIndexPath Method
for iOS lower versions
if(indexPath.row != self.newCarArray.count-1){
UIImageView *line = [[UIImageView alloc] initWithFrame:CGRectMake(0, 44, 320, 2)];
line.backgroundColor = [UIColor redColor];
[cell addSubview:line];
}
for iOS 7 upper versions
if (indexPath.row == self.newCarArray.count-1) {
cell.separatorInset = UIEdgeInsetsMake(0.f, 0.f, 0.f, cell.bounds.size.width);
}
What I tried was this :-
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:btn];
btn.translatesAutoresizingMaskIntoConstraints = NO;
[btn addTarget:self action:#selector(bringUpNextViewController:)
forControlEvents:UIControlEventTouchUpInside];
btn.titleLabel.font = [UIFont fontWithName:#"HelveticaNeue" size:14];
[btn setTitle:#"8" forState:UIControlStateNormal];
[self.view layoutIfNeeded];
NSLog(#"button size : %#", NSStringFromCGSize(btn.frame.size));
As output, I get this :
button size : {30, 29}
Then I gave setTitle string as nothing. The button width was still 30.
So why is this the case always?
I also tried giving a high compression resistance priority and high content hugging priority. Doesn't shrink to nothing.
The problem is also the fact that I want to reduce the width of the button simply based on its content, without giving any fixed width.
I could take the width of text and give the button the width, but I shouldn't be needing to do that either if the button was taking up the content width.
EDIT:
Its not the insets either which is causing the width to be 30. Ghost value.
A button is made of several subviews. It's very likely that the internal layout of a button has some default padding between the label and the button view itself.
Making a button like yours and examining the constraints shows the following:
button constraints (
"<NSContentSizeLayoutConstraint:0x8c40a60 H:[UIButton:0x8f29840(30)] Hug:250 CompressionResistance:750>",
"<NSContentSizeLayoutConstraint:0x8c55280 V:[UIButton:0x8f29840(29)] Hug:250 CompressionResistance:750>"
)
The 30 and 29 tie up with the size values you are seeing. The intrinsic content size property of the button also returns 30,29. Basically this is the minimum size for a button, in the absence of anything else.
It's not quite clear what you want or why you are bothered by this. Anything smaller will be a poor touch target, and a button with no label or image will be invisible anyway. If you add a longer title, the button will get bigger. If you add other constraints to force particular sizes, then these will override the intrinsic content size.
If you want the button to become invisible when it has no title, then you should explicitly hide it. This makes your intentions in the code much clearer and will prevent the user from accidentally hitting a button they can't really see.
I'm wondering if there is a minimum intrinsic content size for a uibutton?
Anyway, try doing...
[button invalidateIntrinsicContentSize];
Did you try [button sizeToFit];?
For custom buttons, I think that you will need to override:
- (CGSize)sizeThatFits:(CGSize)size;
Finally, if nothing other works, you can always try giving the button width from the text size like so
CGSize textsize = [yourText sizeWithFont:[UIFont fontWithName:#"HelveticaNeue" size:14]];
[button setFrame:CGRectMake(0,0,textsize.width, textsize.height)];
First define a constraint for button size in storyboard.
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttonSizeConst;
After that you can set it's size to whatever you want like this.
self.buttonSizeConst.constant = 65.0;
Edit: With this method you need to calculate your button width but I think you don't want to do that. You need to autoresize UIButton for it's content. For this you should give constraints like image below. It will expand to right when you change your title.
I have a tableview that displays a feed of statuses(pictured below) and im trying to figure out how to size each cell appropriately aka short statuses having a smaller cell and bigger cells that display all the status text for longer statuses. Ive come across this tut: http://www.cimgf.com/2009/09/23/uitableviewcell-dynamic-height/
but, im still a little confused on how I would go about calculating in the extra space for my buttons or the margin to the left for my thumb img.
currently it consists of 2 buttons, a label (for the users name) , a thumb img and a textfield (unsure if I should be using a textfield or label for displaying the status, either or is fine with me if i it works)
Please excuse me in advance if this is a question that has already been answered somewhere. I am primarly a Android developer just getting started in IOS and have found alot of mixed answers on this topic so im a little unsure if there is a simple solution to this problem in IOS7
There are several ways of doing this, but I've found that the most reliable is to use a temporary and invisible UITextView to get the necessary size.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//Ideally you should do lazy loading so that instead of creating a new textView each time, you just reuse the same one.
UITextView *temp = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 44)]; //This initial size doesn't matter
temp.font = __Your_desired_font__
temp.text = #"Put your status here";
CGFloat textViewWidth = __your_constraint_width__
CGRect tempFrame = CGRectMake(0,0,textViewWidth,44); //The height of this frame doesn't matter.
CGSize tvsize = [temp sizeThatFits:CGSizeMake(tempFrame.size.width, tempFrame.size.height)]; //This calculates the necessary size so that all the text fits in the necessary width.
//Add the height of the other UI elements inside your cell
return tvsize.height + staticElementHeights
}
This works on iOS 7, but I think if you want to support iOS 6 you need to actually add the textView as a subview for this to work. Just set temp.hidden = YES
The way text is displayed in a UILabel is different from a UITextView, so for a UILabel, you should use the method described in this answer
iOS auto adjust label height
This question already has answers here:
How can I set the title of a UIButton as left-aligned?
(15 answers)
Closed 9 years ago.
I wish to align title and image in UiButton in such a manner that the title appears on the left and the image to the extreme right.
Please note that the button is stretched so as to fill the screen horizontally.
The button layout should look something like this:-
[title .. ]
The title should have some left padding.
The image should have some right padding.
CGFloat width = self.frame.size.width;
CGFloat imageWidth = [button currentImage].size.width;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 10, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, width - imageWidth - 10, 0, 0)];
However, though the title is left align, there is a lot of space on it's left. The image does not show up at all!
Following Code will work
UIButton *sectionheader=[[UIButton alloc]initWithFrame:CGRectMake(0,0,320,44)];
[sectionheader setImageEdgeInsets:UIEdgeInsetsMake(0,6,0,0)];
sectionheader.userInteractionEnabled=NO;
[sectionheader setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
// Now Create Label and addsubview to button
UILabel *lblkey=[[UILabel alloc] initWithFrame:CGRectMake(0,0,sectionheader.frame.size.width-10,sectionheader.frame.size.height)];
lblkey.accessibilityValue=#"Value";
lblkey.font=[UIFont fontWithName:themefont size:20];
lblkey.text=[creteria uppercaseString];
lblkey.backgroundColor=[UIColor clearColor];
lblkey.shadowColor = [UIColor blackColor];
lblkey.shadowOffset = CGSizeMake(0, 2);
lblkey.textAlignment=NSTextAlignmentRight;
lblkey.textColor=[UIColor whiteColor];
[sectionheader addSubview:lblkey];
And suppoce you value is going to change always and you want to make it perfect than Make UIButton class and than add above code in that category class than just call following method to change value of that label
+(void)settitle:(NSString *)value:(UIButton *)selfbutton
{
for (UILabel *valuelabel in selfbutton.subviews)
{
if ([valuelabel.accessibilityValue isEqualToString:#"Value"])
{
valuelabel.text=value;
}
}
}
I will go with alternative What you can do is add three control in one view. lets say ParentView:
1) yourButton
2) yourlable // don't use button title instead use this lable.
3) imageView
now make the ParentView autosize like below:
so as yourButton will stretched horizontally it will automatically resize ParentView.
From here on you just want to take care about position.
set yourlable to extreme left in parentView after yourButton and set autosize property to:
so it will always remain to extreme left of ParentView
And set imageView position to extreme right in parentView and set autosize property to:
so it will always remain to extreme right of ParentView
Hope it will help.
if you have added button in xib and you want to set title and image then you can do it from Attribute inspector.
in attributeinspector there is an property named Edge. By default it has set content. but there are other two options named as Title and Image.
and exactly below Inset Property is there by which you can set title and image as you want. if you select title then you can set title (move left or right as u want) likewise for image also