Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Customize table view cell border and highlights

branch: master
README.md

StyledTableViewCell for iOS

Customize table view cell border and highlight colors.
Only supports UITableViewStylePlain

Features

  • Custom highlight colors for table view cells
  • Highlights supports gradient of multiple colors and directions

Usage

1) Subclass StyledTableViewCell

2) Set UITableView separator to none to hide the default separator

[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

3) Use setDashWidth:dashGap:dashStroke: to configure custom cell separators

e.g. dashes for separators

[self setDashWidth:5 dashGap:3 dashStroke:1];

e.g. dotted-lines for separators

[self setDashWidth:1 dashGap:3 dashStroke:1];

4) Set UITableView separator color to set the custom separator color

[self.tableView setSeparatorColor:[UIColor colorWithWhite:0.7 alpha:1]];

5) Use setStyledTableViewCellSelectionStyle: to set background colors of cell when selected, using preset colors

[self setStyledTableViewCellSelectionStyle:StyledTableViewCellSelectionStylePurple];

6) Use setSelectedBackgroundGradientColors: to set background colors of cell when selected, using custom gradients

e.g. gradient of 2 colors

NSMutableArray *colors = [NSMutableArray array];
[colors addObject:(id)[[UIColor colorWithRed:255/255.0 green:234/255.0 blue:0 alpha:1] CGColor]];
[colors addObject:(id)[[UIColor colorWithRed:255/255.0 green:174/255.0 blue:0 alpha:1] CGColor]];
[self setSelectedBackgroundViewGradientColors:colors];

e.g. gradient of 3 colors

NSMutableArray *colors = [NSMutableArray array];
[colors addObject:(id)[[UIColor colorWithRed:255/255.0 green:174/255.0 blue:0 alpha:1] CGColor]];
[colors addObject:(id)[[UIColor colorWithRed:255/255.0 green:234/255.0 blue:0 alpha:1] CGColor]];
[colors addObject:(id)[[UIColor colorWithRed:255/255.0 green:174/255.0 blue:0 alpha:1] CGColor]];
[self setSelectedBackgroundViewGradientColors:colors];

7) Use setSelectionGradientDirection: to set direction of gradient when cell is selected

e.g. horizontal gradient

[self setSelectionGradientDirection:StyledTableViewCellSelectionGradientDirectionHorizontal];

e.g. diagonally from bottom left to top right

[self setSelectionGradientDirection:StyledTableViewCellSelectionGradientDirectionDiagonalBottomLeftToTopRight];

e.g. diagonally from top left to bottom right

[self setSelectionGradientDirection:StyledTableViewCellSelectionGradientDirectionDiagonalTopLeftToBottomRight];

Supports

Only supports UITableViewStylePlain.

Requirements

  • QuartzCore framework
  • This project uses ARC. If you are not using ARC in your project, add '-fobjc-arc' as a compiler flag for all the files in this project.
  • XCode 4.4 and newer (auto-synthesis required)

Contact

twitter.com/honcheng
honcheng.com

Something went wrong with that request. Please try again.