How to make UITableView cell separator like iOS7? - objective-c

In iOS 7 , default UITableViewCell separator is a little bit cutting from left that can show cell's imageView.
I can change to full size with following codes.
[self.tableViewMain setSeparatorInset:UIEdgeInsetsMake(0, 0, 0, 0)];
And i want to change it when my iPad orientation is Portrait.
So i tried following codes in rotate event
if(UIInterfaceOrientationIsLandscape(self.interfaceOrientation) ||(UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)))
{
[self.tableViewMain setSeparatorInset:UIEdgeInsetsMake(0, 0, 0, 0)];
}
else
{
[self.tableViewMain setSeparatorInset:UIEdgeInsetsMake(15, 0, 0, 0)];
}
I want to do it like iOS7 Cell Separator manually.
How can i do it?

You mean by manually Interface Builder ? if it's the case, click your UITableViewCell in IB and go to the third panel, in Separator insets choose custom and you can put the left and right value.
Edit : if you want to do it by code, see the documentation of UIEdgeInsets structure :
UIEdgeInsets
Defines inset distances for views.
typedef struct {
CGFloat top, left, bottom, right;
} UIEdgeInsets;
Then for example :
self.tableViewMain.separatorInset = UIEdgeInsetsMake (0, 15, 0,0);

Here you go.
[self.tableViewMain setSeparatorInset:UIEdgeInsetsMake(15, 0, 0, 0)];
EDIT:
Above answer is wrong. Adding a custom UIView will solve this.
Your cellForRowAtIndexPath should be lie this
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"cell"];
UIView *lineView;
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"cell"];
lineView = [[UIView alloc] initWithFrame:CGRectMake(15, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];
[cell.contentView setFrame:CGRectMake(0, 0, cell.contentView.frame.size.width, cell.contentView.frame.size.height-1)];
[cell.textLabel setBackgroundColor:[UIColor clearColor]];
lineView.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview:lineView];
[lineView release]; // IGNORE IF USING ARC
}
[cell.textLabel setText:#"YOUR_TEXT"];
return cell;
}

You should negative value in the place of left inset
self.tableView.separatorInset = UIEdgeInsetsMake (0, -15, 0,0);

Related

Unable to create bottom border on UICollectionView Cell

I need to add a 1px bottom border to my UICollectionView cells but I can't get it working, I tried the following code but the border doesn't show:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
// Configure the cell
cell.backgroundColor = [UIColor whiteColor];
cell.titolo.text = arrayt[prova];
//create the border
UIView *bottomBorder = [[UIView alloc] initWithFrame:CGRectMake(0, cell.frame.size.height, cell.frame.size.width, 1)];
bottomBorder.backgroundColor = [UIColor redColor];
[cell.contentView addSubview:bottomBorder];
return cell;
}
What could be the problem?
CGRectMake gets (x,y,width,height) as parameter so I can't understand what's wrong on my code
You need to have correct y offset
//create the border
UIView *bottomBorder = [[UIView alloc] initWithFrame:CGRectMake(0, cell.frame.size.height - 1, cell.frame.size.width, 1)];
bottomBorder.backgroundColor = [UIColor redColor];
You should set the frame of the cell to a known (not zero size) value before adding subviews like this. Then, after you have created your view with the correct frame you need to set the autoresizing mask to ensure that the view remains at the bottom of the view (flexible top, flexible width).
This is not the way to solve this, UIInsets are better way, as shown in this post: https://stackoverflow.com/a/22823146/12652 . But if you still want to follow this way, you need to remove these views afterwards or they will be kept adding to UICollectionViewCell. Considering you also have UIImageView as a childview :
UIView *bottomBorder = [[UIView alloc] initWithFrame:CGRectMake(0, cell.frame.size.height - 1, cell.frame.size.width, 1)];
bottomBorder.backgroundColor = [UIColor colorWithRed:162/255.0f green:143/255.0f blue:143/255.0f alpha:1.0f];
for(UIView *view in cell.contentView.subviews){
if([view isKindOfClass:NSClassFromString(#"UIImageView")])
continue;
else{
[view removeFromSuperview];
}
}
[cell.contentView addSubview:bottomBorder];

add project with app delegate

I'm trying to add a dynamic horizontal scroll to a table cell.
I found an example after searching for a while, but since the example project only was the view it was directly connected to the app delegate which contained the majority of the relevant code. Most of it within applicationDidFinishLaunching.
Do any of you know how I am supposed to add this code to my project?
Thanks in advance, Tom
EDIT:
Here's the link to the sample project i downloaded: http://blog.sallarp.com/wp-content/uploads/2008/11/slidemenu.zip
Here's the youtube clip of how it's supposed to work: http://www.youtube.com/watch?v=wFqBNXZ4SHI
EDIT 2 (New code):
"famorables" is declared with 5 one-word-strings
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"MyFamorablesCell";
UITableViewCell *cell;
//Create Cell
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
//Create a UIScroll View
UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)];
scrollview.contentSize = CGSizeMake(self.view.frame.size.width * 2, 80);
scrollview.showsHorizontalScrollIndicator = NO;
float totalButtonWidth = 0.0f;
famorableArray = self.famorables;
for(int i = 0; i < [self.famorables count]; i++){
UIButton *famorableButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[famorableButton setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 30.0f)];
[famorableButton setTitle:[NSString stringWithFormat:#"%#", [famorableArray objectAtIndex:[indexPath row]]] forState:UIControlStateNormal];
// Move the buttons position in the x-demension (horizontal).
CGRect btnRect = famorableButton.frame;
btnRect.origin.x = totalButtonWidth;
[famorableButton setFrame:btnRect];
// Add the button to the scrollview
[scrollview addSubview:famorableButton];
// Add the width of the button to the total width.
totalButtonWidth += famorableButton.frame.size.width;
}
[cell.contentView addSubview:scrollview];
return cell;
}
Okay Try this
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell;
//Create Cell
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
//Create a UIScroll View
UIScrollView scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, (it will be the height of the Cell u want))];
scrollview.contentSize = CGSizeMake(self.view.frame.size.width * 2,(it will be the height of the Cell u want));
scrollview.showsHorizontalScrollIndicator = NO;
/*
Now add every this u might want to add in ur Scroll view.
keep that in mind that the height and width of contentSize and ScrollView will be depandent on ur requirement
Make sure u add every thing u want in the Scroll view will be the part of Scroll View
like for label
//Add Something to Scroll View
[scrollView addSubview:label];
*/
//Add Scroll view to Cell
[cell.contentView addSubview:scrollView];
return cell;
}
This will Work
In case of any queries feel free to ask

How can I custom UITableViewCell like Twitter?

I found that the iPad twitter.app UITableViewCell's border have two pixel line, it looks beautiful and professional,how can I do that? Thank you!
Because UITableViewCell inherits from UIView, a cell has a content view. You can add your own subviews (the labels and textfields) to that contentView and lay them out programmatically or using the Interface Builder.
There are a lot of online tutorials on how to accomplish that. Just search with google for "uitableviewcell interface builder tutorial".
Check out this pretty good tutorial Custom UITableViewCell Using Interface Builder.
Finally,I customed UITableViewCell use code,and I think it looks well. : )
MenuViewController.m file:
- (id)initWithFrame:(CGRect)frame {
if (self = [super init]) {
[self.view setFrame:frame];
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
[_tableView setDelegate:self];
[_tableView setDataSource:self];
[_tableView setBackgroundColor:[UIColor clearColor]];
[_tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
UIView* footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)];
[_tableView setTableFooterView:footerView];
[footerView release];
[self.view addSubview:_tableView];
}
return self;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
DoubleSeparatorCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[DoubleSeparatorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
}
NSString *text;
UIColor *upperLineColor,*lowerLineColor,*viewColor;
upperLineColor = RGBA(255, 255, 255, 30);
lowerLineColor = RGBA(0, 0, 0, 50);
viewColor = RGBA(0,0,0,5);
if ([indexPath row] == 0) {
text = NSLocalizedString(#"...", nil);
} else if ([indexPath row] == 1) {
text = NSLocalizedString(#"...", nil);
} else if ([indexPath row] == 2) {
text = NSLocalizedString(#"...", nil);
} else {
text = NSLocalizedString(#"...", nil);
}
[cell.textLabel setText:text];
[cell.textLabel setTextColor:RGBA(170, 170, 170, 100)];
[cell.textLabel setShadowColor:[UIColor blackColor]];
[cell.textLabel setShadowOffset:CGSizeMake(1, 1)];
[cell.upperLine setBackgroundColor:upperLineColor];
[cell.lowerLine setBackgroundColor:lowerLineColor];
[cell.contentView setBackgroundColor:viewColor];
return cell;
}
DoubleSeparatorCell.h
#interface DoubleSeparatorCell : UITableViewCell {
UIView *upperLine;
UIView *lowerLine;
}
#property (nonatomic ,retain) UIView *upperLine;
#property (nonatomic ,retain) UIView *lowerLine;
#end
DoubleSeparatorCell.m
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.upperLine = [[UIView alloc] init];
self.lowerLine = [[UIView alloc] init];
[self.contentView addSubview:self.upperLine];
[self.contentView addSubview:self.lowerLine];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
[self.upperLine setFrame:CGRectMake(0, 0, self.contentView.frame.size.width, 1)];
[self.lowerLine setFrame:CGRectMake(0, self.contentView.frame.size.height - 1, self.frame.size.width, 1)];
}
Srikar has already showed you the right path. By the way i just want to add the following:
You can cutomize your cell programmatically which can be done by inheriting the native class UITableViewCell.
Then by, create the instance of table view cell class and add it to the UITableView.
Now the cell is yours.
Happy Coding,
Arun
I'd point out that those cells you screenshot appear to have a light gray top border of 1 point and a dark gray bottom border of 1 point (or maybe they are pixels - sorry my eyes aren't that good :-) ).
So it may be kind of a hack (go on, savage me people), but you could:
Create a UILabel topBorder with frame CGRect(0,0,cell.contentView.frame.size,width,1)
Create a UILabel bottomBorder with frame CGRect (0,cell.contentView.frame.size.height - 1,cell.contentView.frame.size.width,1)
Set color of topBorder to UIColor lightGrayColor (or tweak for exact colors)
Set color of bottomBorder to UIColor darkGrayColor (ditto)
Add both subViews to cell.contentView
Note that you do not have to subclass UITableCellView - simply add these steps to your tableView:cellForRowAtIndexPath: method and they will appear.
Enjoy,
Damien
Override drawRect method and draw lines as you need.
- (void)drawRect:(CGRect)rect
{
CGRect bounds = [self bounds];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 1.0);
CGContextSetStrokeColorWithColor(context, [topColor CGColor]);
// border top
CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y);
CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y);
CGContextStrokePath(context);
// border bottom
CGContextSetLineWidth(context, 1.0);
CGContextSetStrokeColorWithColor(context, [lowerColor CGColor]);
CGContextMoveToPoint(context, bounds.origin.x, bounds.origin.y+1);
CGContextAddLineToPoint(context, bounds.origin.x+bounds.size.width, bounds.origin.y+1);
CGContextStrokePath(context);
}

Put a UIButton inside a UITableView

I am trying to put a UIButton inside a UITableViewCell.
The UITableView also has cells containing UILabels and and the cells have gradient backgrounds being drawn into them. The problem I am seeing is that my UIButton is just a filled black cell with no text display, and changing both the color and background color properties does not appear to do anything.
Here's the code I use to create the button:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"InAppViewController, doing this - width= %f", self.wdth);
static NSString *ProductTableIdentifier = #"ProductTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ProductTableIdentifier];
if (cell == nil)
{
if (self.wdth >= 700) {
CGRect cellFrame = CGRectMake(0, 0, (self.wdth - 100), 40);
cell = [[[UITableViewCell alloc] initWithFrame:cellFrame reuseIdentifier: ProductTableIdentifier] autorelease];
// Set up some labels...
CGRect seenValueRect = CGRectMake(self.wdth-320, 0, 100, 40);
UIButton *seenValue = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[seenValue setBackgroundColor:[UIColor greenColor]];
seenValue.tag = kSeenValueTag;
seenValue.frame = seenValueRect;
[seenValue setTitle:#"I'm a clone" forState:UIControlStateNormal];
[cell.contentView addSubview:seenValue];
[seenValue release];
// Continue setting up cell...
The pastebin link contains the code to the entire cellForRowAtIndexPath() function (for the UITableView in question).
http://pastebin.com/bpEyfruE
Maybe the problem is that you're releasing the UIButton innitialized with convenience initializer [UIButton buttonWithType:(UIButtonType)]. Try removing the [button release]
It can't even be that you have to do [cell addSubview:seenValue]; instead of [cell.contentView addSubview:seenValue];
You could also try to do CGRectMake(110, 11, 185, 30) instead of CGRectMake(self.wdth-320, 0, 100, 40): I use it and it works well but I don't know if it what you need

How to create these kind of badges?

I sketched this prototype: http://dl.dropbox.com/u/3630641/3-%20Todolist%20Main.jpg
The number at the left is the item priority and list is re-orderable so the values will change. How to create these left-located badges? I prefer a code approach if possible, not PNG images.
Update:
Would you please have a look:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
CGRect priorityLabelRect = CGRectMake(10, 5, 20, 30);
UILabel *priorityLabel = [[UILabel alloc] initWithFrame:priorityLabelRect];
priorityLabel.layer.cornerRadius = 5.0f;
priorityLabel.layer.backgroundColor = [[UIColor grayColor] CGColor];
priorityLabel.tag = kPriorityValueTag;
[cell.contentView addSubview:priorityLabel];
[priorityLabel release];
CGRect meatLabelRect = CGRectMake(80, 5, 300, 30);
UILabel *meatLabel = [[UILabel alloc] initWithFrame:meatLabelRect];
meatLabel.tag = kMeatValueTag;
[cell.contentView addSubview:meatLabel];
[meatLabel release];
cell.showsReorderControl = YES;
}
// Configure the cell.
[self configureCell:cell atIndexPath:indexPath];
return cell;
}
But No grey area is shown around the priority.
If I add a new one, a grey area appears for less than a second around the priority but it disappears immediately. Not to mention that the priority value isn't located at the center for the grey area.
Any idea what I'm doing wrong?
Add a UILabel to the cell and format it to your liking. For the rounded corners, set label.layer.cornerRadius.
Create a UIView for the badge.
look here it will explaine how to draw what ever you want the badge to look like. and draw the number :
http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
create a variable that will receive the cell number and draw it in the cell.
It should look something like that -
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(10,10,40,40);
CGContextAddRect(context, rectangle);
CGContextStrokePath(context);
CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
CGContextFillRect(context, rectangle);
CGPoint point =CGPointMake(20,20);
[self.cellNumber drawAtPoint:point withFont:font];
}
4 add the BadgeView to your cell and in the CellForRawAtIndexPath pass the number to the badge view.
good luck
You could make a combination control. It's a UIImageView with a UIImage and a UILabel as subviews.
A regular object that has a UIImageView.image with the gray rectangle and then a UILabel for the white number. Then just change the value of the label's text.
If you start with a UIImageView and subclass that, you will be able to just stick it directly into the regular UITableViewCells since they already have a space for a UIImageView.