I am working on a table under iOS, I added a couple of cells, and each cell has one UITextField added as a subview. An excerpt:
UITextField *t = [[UITextField alloc] initWithFrame:CGRectMake(20.0, 5.0, 220.0, 20.0)];
// here I set properties for t ...
t.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth;
[cell addSubview:t];
cell.autoresizeSubviews = YES;
// if needed, I set the UIImageView for the cell
if (...) {
cell.imageView.image = [UIImage imageNamed:#"myimage.png"];
t.frame = CGRectOffset(text.frame, 33, 0);
}
[t release];
What happens? When I enter the editing mode for the tabel, I'd expect that each cell will resize to make the red minus sign visible, and that the UITextField will move to right to remain aligned to the cell itself, as the other components. But this do not happen.
Also, I tried to change the autoresizingMask param using various combinations of UIViewAutoresizingFlexibleLeftMargin, UIViewAutoresizingFlexibleRightMargin and UIViewAutoresizingFlexibleWidth, but without success.
Am I doing something wrong here? Should I change the way I add the text field as a subview?
Thank you!
add your views to the contentView of the cell:
[cell.contentView addSubview:t];
Related
I need to display separator line in iOS 7 same like iOS 6 (as my image 2). I am using below code in CellForRowAtIndexPath:
UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
separatorLineView.backgroundColor = [UIColor colorWithRed:229/255.0 green:229/255.0 blue:229/255.0 alpha:1.0];
[cell.contentView addSubview:separatorLineView];
UIView *customColorView = [[UIView alloc] init];
customColorView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"cell_highlighted.png"]];
cell.selectedBackgroundView = customColorView;
cell.backgroundColor=[UIColor clearColor];
//Separation style for iOS7
if ([tableView respondsToSelector:#selector(setSeparatorInset:)]) {
[tableView setSeparatorInset:UIEdgeInsetsZero];
}
return cell;
I am getting output as below image:
But my output should like below image for both IOS 6 and 7:
Can anyone please help me how to achieve this? Thanks..
contentView doesn't always have the same size as the cell itself, add separator view on top of the cell view above the content view:
separatorLineView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
[cell insertSubview:separatorLineView aboveSubview:cell.contentView];
UITableView has a property separatorInset. Use that to set the insets of the table view separators to zero to let them span the full width of the screen.
[tableView setSeparatorInset:UIEdgeInsetsZero];
OR
You can set separator inset property in xib also. Change it to custom. And make both left and right values to zero.
I have a problem, how i can show the line between check mark and move at the time of tableview edit. like same as in below image.
explain the process or else if possible please send me to example code.
Thanks in advance.
Look at this :
Declare BOOL checkMark; in .h
check its value.
// This all code in Cell For Row At IndexPath :
for (UIView *ObView in [cell.contentView subviews])
{
[ObView removeFromSuperview];
}
if(checkMark == YES) // you can check here by imdexPath.row.
{
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(10,5,150,30)];
lbl.text = #"";
[cell.contentView addSubview:lbl];
UIImageView *CheckImage = [[UIImageView alloc]initWithFrame:CGRectMake(160,5,20,20)];
CheckImage.image = [UIImage imageNamed:#""];
[cell.contentView addSubview:CheckImage];
UIImageView *BarImage = [[UIImageView alloc]initWithFrame:CGRectMake(185,5,0.5,30)];
BarImage.image = [UIImage imageNamed:#""];
[cell.contentView addSubview:BarImage];
UIImageView *tblImage = [[UIImageView alloc]initWithFrame:CGRectMake(160,5,20,20)];
tblImage.image = [UIImage imageNamed:#""];
[cell.contentView addSubview:tblImage];
}
else
{
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(10,5,150,30)];
lbl.text = #"";
[cell.contentView addSubview:lbl];
UIImageView *tblImage = [[UIImageView alloc]initWithFrame:CGRectMake(160,5,20,20)];
tblImage.image = [UIImage imageNamed:#""];
[cell.contentView addSubview:tblImage];
}
Note: frames are temporary.
SO you basically have a tableView and you want to add that image "|" in your tableViewCell when you are editing.
I would assume you already have editingEnabled for your tableView, and you will need to implement
- (void)setEditing:(BOOL)editing animated:(BOOL)animate
{
if (editing) {
// Configure self.tableView and individual cells and add the "|" as a subView.
// It will all be tricky, and you should be able to logically place the vertical bar
// But whatever you want to be in your EDIT mode, you will have to configure it here.
} else {
// Re-configure and implement the 'correct' cells back to normal tableView
}
}
Create a UIView with 1px as width and grey as backgroundColor, and add this to the right of check mark should be fine.
If you Edit option is an image then you can do the code like below to show a line.
Steps
1] First import QuartzCore/QuartzCore.h
2] set border width and border color property of your Edit image.
[editImageView.layer setBorderWidth:2.0];
[editImageView.layer setBorderColor:[[UIColor grayColor] CGColor]];
//If you putting a button for edit then also you can set the same. Just replace the editImageView with your editButton
Hope you get exact you want!:)
Take uiimageview in table cell and set its width to 1. Set height according to your tablename.cell.height.
It will definitely solve your problem
You can customize your tableview cell.Just add the subviews at the time of cell creation and put it hidden untill click on edit button.
I have a custom UITextField with a UIImage as a background. Now when I type in a text into this UITextField and the cursor is blinking I get this:
I don't want to have a white image on the cursor blinking as it destroys the aesthetics.
I tried playing around with this and tried setting the background view to have the same color as the image, however the issue is that the UITextField shape is always a rectangle. How do I solve this?
Have you tried setting textField.backgroundColor = [UIColor clearColor]?
You can use a UIImageView for the image and then add a UITextField as a subview with clear background. Just create UIImageView *imageView and UITextField *textField, either programmatically or in the IB. If you go programmatically, use [imageView addSubview:textField]; and set the frame as you like. In the IB, just drop the textField onto the imageView and align it as you like.
I just tried it. It does not have the cursor highlighted like that.
set
textField.backgroundColor = [UIColor brownColor] // or your color
and
textField.textColor = [UIColor whiteColor];
For adding the textField into the UIView ;
//Do this where you create the UIView* view
UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(110, 10, 185, 30)];
textField.clearsOnBeginEditing = NO;
textField.textAlignment = UITextAlignmentRight;
textField.returnKeyType = UIReturnKeyDone;
textField.textColor = [UIColor blackColor]; // or any other color
textField.font = [UIFont systemFontOfSize:15];
textField.delegate = self;
[view addSubview:textField];
What about creating a UIImageView with your image in it, and then embedding a borderless UITextField inside your image view? The text field will still be editable, but shouldn't interfere with the imageview behind it.
I understand that there is a tableHeaderView property, but when ever I add my view to that, it is not hidden above the scroll area.
What I would like to have is, my custom view shown when you pull down the tableview and hold and you see my UIView brought into view. This is done on many apps to put a logo or such slightly hidden until a user pulls down on the tableview (Twitter/Facebook when you pulldown).
I am currently using the following and it is not putting it out of the view:
UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 20)];
l.text = #"Hidden Text";
l.textColor = [UIColor redColor];
self.tableView.tableHeaderView = l;
[l release];
Since UITableView is actually a UIScrollView with some extra functionality, you can use contentInset to obtain the effect you want. The trick is to use a negative value for the top inset. This will normally hide your header view, but it will still be viewable when the table bounces.
So, after you add the label to the header view, just set the contentInset like this:
UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 20)];
l.text = #"Hidden Text";
l.textColor = [UIColor redColor];
self.tableView.tableHeaderView = l;
//add this
[self.tableView setContentInset:UIEdgeInsetsMake(-l.bounds.size.height, 0.0f, 0.0f, 0.0f)];
[l release];
The best solution here is to add your view to the header, as you had mentioned you tried, and then in your controller's viewDidLoad actually scroll the tableview downward programmatically until the header view you wanted hidden is hidden. This can be done a number of different ways. The easiest is probably:
[self.tableView setContentOffset: CGPointMake(0, myHeaderHeight)];
Simply have a 0-height header view, and then have a subview of that be positioned with a negative y, and so that the bottom edge of the subview is the top of the view.
UIWindow* window = [[UIApplication sharedApplication].delegate.window;
[window addSubview: your-overlayview];
I'm trying to place various size images inside imageView of UITableViewCell. I get the image data asynch'ly, create the image, set the content mode of imageView and finally set bounds of imageView. But the code seems insensitive to any changes I made. I want the images to be centered in a 75x75 area. I wrote the below code for this purpose
UIImage* image = [UIImage imageWithData:data];
[holder.imageView setContentMode:UIViewContentModeCenter || UIViewContentModeRedraw];
[holder.imageView setImage:image];
[holder.imageView setBounds:CGRectMake(0,0,75,75)];
[holder.imageView setFrame:CGRectMake(0,0,75,75)];
[holder setNeedsLayout];
Where holder is the UITableViewCell. The result I get is always the same. All images have 75px height and different widths. Can someone help me solve this problem?
I have realized that setting contentMode and bounds properties does not have any effect in that code. I have added an NSLog after the last line and got the results as below:
NSLog(#"imageview:%# bounds and contentMode:%# %#",[holder imageView],[holder.imageView bounds],[holder.imageView contentMode]);
imageview:<UIImageView: 0x39ab8a0;
frame = (0 0; 75 75); opaque = NO;
userInteractionEnabled = NO; layer =
<CALayer: 0x39a92b0>> bounds and
contentMode:(null) (null)
Still no solution
Done, I finally found the solution, it cost me 3 hours though =)
The solution is to change properties like bound,frame,contentMode in -(void)layoutSubviews method of the custom UITableViewCell class. The "trick" is to write layout code in this method, otherwise the code does not have any effect.
Below code did the work for me. It makes rows of the table vertically aligned.
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.bounds = CGRectMake(0,0,75,75);
self.imageView.frame = CGRectMake(0,0,75,75);
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
CGRect tmpFrame = self.textLabel.frame;
tmpFrame.origin.x = 77;
self.textLabel.frame = tmpFrame;
tmpFrame = self.detailTextLabel.frame;
tmpFrame.origin.x = 77;
self.detailTextLabel.frame = tmpFrame;
}
So the problem with UITableViewCell's is that you have no control over the size of the built-in objects (namely imageView, contentView, accessoryView, backgroundView). When the table changes, your customizations get trampled over.
You can, as Behlul pointed out, force the sizes to be correct by using layoutSubviews, but the problem with that is that layoutSubviews is called every time the table scrolls. That is a lot of unnecessary re-layout calls.
An alternate, method is to add all of your content to the contentView. Similarly if you are customizing the background, you can create a transparent backgroundView and add your custom background view (eg myBackgroundView) as a subview of backgroundView.
This way you can place and size your items how you want them.
The down side is the stock messages are no longer received from the accessory or image views. You just have to create you own.
Hope that helps!
// This code is not tested
// MyCustomTableViewCell
- (id) init{
self = [super initWithStyle: UITableViewCellStyleDefault reuseIdentifier:#"MyReuseIdentifier"];
if(self){
//image view
my_image_view = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"default_image.png"]] retain];
[my_image_view setFrame:CGRectMake(10,10,30,30)];
[self.contentView addSubview:my_image_view];
//labels
my_text_label = [[[UILabel alloc] initWithFrame:CGRectMake(50,10,100,15)] retain];
[self.contentView addSubview:my_text_label];
//set font, etc
//detail label
my_detail_label = [[[UILabel alloc] initWithFrame:CGRectMake(50,25,100,15)] retain];
[self.contentView addSubview:my_detail_label];
//set font, etc
//accessory view
//Whatever you want to do here
//attach "accessoryButtonTapped" selector to button action
//background view
UIView* background_view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)] autorelease];
[background_view setBackgroundColor:[UIColor greenColor]];
background_view.layer.cornerRadius = 17;
background_view.layer.borderWidth = 3;
background_view.layer.borderColor = [UIColor whiteColor].CGColor;
[self setBackgroundView:[[[UIView alloc] init] autorelease]];
[self.backgroundView addSubview:background_view];
}
return self;
}
- (void) setLabelText: (NSString*) label_text{
[my_text_label setText:label_text];
}
- (void) setDetailText: (NSString*) detail_text{
[my_detail_label setText: detail_text];
}
- (void) accessoryButtonTapped{
//call table view delegate's accessoryButtonTappedForRowWithIndexPath method
}
"UIViewContentModeCenter || UIViewContentModeRedraw" is equivalent to 1. It's also not a bitfield. You want UIViewContentModeCenter.
UITableViewCell.imageView is managed by the cell. If you want custom layout, try adding a view to contentView (I'm guessing what you mean by "centered in a 75x75 area"):
UIImageView * iv = [[[UIImageView alloc] initWithImage:image] autorelease];
iv.frame = (CGRect){{0,0},{75,75}};
iv.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin| UIViewAutoresizingFlexibleRightMargin;
iv.contentMode = UIViewContentModeScaleAspectFit;
[holder.contentView addSubview:iv];
try changing the "contentMode" property of imageView to 'UIViewContentModeScaleAspectFit' or 'UIViewContentModeScaleAspectFill'
Create subclass of UITableViewCell:
#interface UITableViewCellSubClass : UITableViewCell
#end
#implementation UITableViewCellSubClass
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.frame = CGRectMake(0,4,32,32);
self.textLabel.frame = CGRectMake(42,4,300,32);
}
#end