I'm stuck up with a very basic thing right now. I want to make a
screen similar to the Add Contact screen in Iphone. Ive been able to
replicate the all the rows other than the first one, which has a Add
Photo frame on the left side and table cell which shows the name. Any
thoughts on how to code that would prove to be really helpfull.
I believe changing the width of the cell drawn would allow me to place
a UIImageView for the photograph but i cant seem to change the cell
width.
Have you tried changing the indentation of that particular cell and placing an imageView to the left of it? You may have to make a new subclass of UITableViewCell to do so, however.
ok, i just the refernce for UITableViewCell and there are two properties related to indentationLevel and indentationWidth .
My question is now , whats their relation and when and how do i set them?
indentationWidth is the distance that the cell will indent for each level of indentation - for example, if you set the indentationWidth as 10, and your indentationLevel as 2, then your cell will be indented by 20.
yeah, that's probably the best way - then subclass the layoutSubviews method of the UITableViewCell to position all the text fields, image views, and the like within the cell's area.
I've never created a cell like this personally, but I have a suspicion that indenting the cell may also indent the cell's content view, but I think you'll be alright - you may have to set a negative x value for the origin of the imageview to get it positioned to the left of the cell like that - just play around with it for a while.
I know you said you've tried "tableHeaderView" but what happened when you did?
From the look of the screenshot (spacing between rows) it doesn't look part of the actual table view. It looks like it's in it's own view above the table view.
well actually thats what ive been thinking as well , the tableHeaderView draws a header on top of the cell (i returned a UIImage from the view, and the image got drawn in a stretched form)
Ive subclassed UITableViewCell , set the indentation level in it but all in vain.
Ive tried setting up the table view with a rect (100,20,220,480) but still i dnt get any space on the left side of the first row.
I was able to accomplish the same look by using a custom backgroundView. A table view cell can have a background view. In fact it turns out that the background view is what gives the table view cell the rounded rectangle look. When creating the header cell I use the following code.
Sorry that I was not clear enough. The headerCell can be a plan old UIHeaderViewCell or a custom UIHeaderViewCell. In my case it is a custom header cell, but that is because I am also trying to figure out how to make the text wrap.
Sorry I did not need to include the header title part of the code. The header title is a reference to the UITextView that contains the text in the table cell.
The table cell contains both the image and the text widgets. The backgroundView is simply used to draw the rounded rectangle behind the table cell.
The implementation code for my HeaderBackgroundView.m is below.
Code:
@implementation HeaderBackgroundView
@synthesize indent;
@synthesize foregroundColor;
- (id)initWithFrame:(CGRect)frame indent:(NSInteger)value
{
if (self = [super initWithFrame:frame])
{
self.backgroundColor = [UIColor clearColor];
indent = value;
}
return self;
}
- (id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor clearColor];
self.foregroundColor = nil;
indent = 0;
}
return self;
}
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
if(self.foregroundColor == nil)
{
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
}
else
{
[self.foregroundColor setFill];
}
CGContextSetRGBStrokeColor(context, 0.67, 0.67, .67, 1.0);
CGRect rrect = self.bounds;
rrect.origin.x = indent;
rrect.size.width -= indent;
CGFloat r= 10;
// NOTE: At this point you may want to verify that your radius is no more than half
// the width and height of your rectangle, as this technique degenerates for those cases.
// In order to draw a rounded rectangle, we will take advantage of the fact that
// CGContextAddArcToPoint will draw straight lines past the start and end of the arc
// in order to create the path from the current position and the destination position.
// In order to create the 4 arcs correctly, we need to know the min, mid and max positions
// on the x and y lengths of the given rectangle.
CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
// Next, we will go around the rectangle in the order given by the figure below.
// minx midx maxx
// miny 2 3 4
// midy 1 9 5
// maxy 8 7 6
// Which gives us a coincident start and end point, which is incidental to this technique, but still doesn't
// form a closed path, so we still need to close the path to connect the ends correctly.
// Thus we start by moving to point 1, then adding arcs through each pair of points that follows.
// You could use a similar tecgnique to create any shape with rounded corners.
// Start at 1
CGContextMoveToPoint(context, minx, midy);
// Add an arc through 2 to 3
CGContextAddArcToPoint(context, minx, miny, midx, miny, r);
// Add an arc through 4 to 5
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, r);
// Add an arc through 6 to 7
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, r);
// Add an arc through 8 to 9
CGContextAddArcToPoint(context, minx, maxy, minx, midy, r);
// Close the path
CGContextClosePath(context);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
}
- (void)dealloc
{
[super dealloc];
}
@end
I'm really sorry to bother you again, but there is no such thing as UIHeaderViewCell... maybe u mean UITableViewCell or am i missing out something here?
For wrapping texts u need to have UILabels added in the content view of the cell. maybe this post will help u out
with your help i was able to set the indentation of the cell right, just one more question, the "Add Photo" image on the left side, i need to detect if thats been touched so that i could show the phone album? How did u accomplish that?
I'm thinking that i need to Subclass a UIImageView and add it to the cell's content view and when touched that subclass could pass control onto the ImagePicker controller.
Thoughts?
Also i think i would need to subclass my UITableViewCell, since i need to to display text in it. Actually wrapped text
The problem im facing is when i click the white(cell) part the wole cell gets highlighted which includes the Add Photo part as well...which it shouldn't.
Problem mimicking add new contact screen
Linear Mode
