How to Customize the Look of ShareKit

ShareKit's UI consists mainly of UITableViews. These are highly customizable using the same methods you are already using.

Sections:

Simple Customization

There are a few properties you can change to make ShareKit fit better with the look of your app without having to subclass anything.

Open SHKConfig.h and scroll to the UI Configuration : Basic section. There you'll be able to modify the UIBarStyle used in ShareKit, the background color of the tableviews, and font colors.

Advanced Customization

ShareKit's UI is entirely made up of subclasses of UITableViewController and UITableViewCells. If you are familiar with customizing UITableViews, you should have no problem customizing ShareKit.

There are two main table view controllers in ShareKit: SHKFormController and SHKShareMenu. To avoid having to redo your work everytime you update ShareKit, there are a set of proxy classes you should use instead of directly editing these controllers:

SHKCustomFormController

Subclass of SHKFormController, UITableViewController.

This table controller controls the two types of forms within ShareKit: Logins and Editing. A login form is presented to a user when a service requires credentials to share to.

You can subclass any method from UITableViewController to customize SHKCustomFormController.

See tips on common customizations below for examples.

SHKCustomFormFieldCell

Subclass of UITableViewCell

This is the table cell used by SHKFormController. It is made up of 2 parts:

  • A label
  • A form element (either a UITextField or a UISwitch)

The UITextField is where a user can enter a response (for example a username). The switch is for users to set an option on or off (like whether or not something should be private).

To modify the label, edit the cell's textLabel property as you normally would on any UITableViewCell.

To modify the text field, you can access the textField property of SHKCustomFormFieldCell. This is a UITextField and can be modified as such. For example, say you wanted to make the text field's color be red. You would subclass SHKCustomFormController's cellForRowAtIndexPath method and modify the cell:

- (UITableViewCell *)tableView:(UITableView *)tableView
 cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{    
    SHKCustomFormFieldCell *cell = [super tableView:tableView
                              cellForRowAtIndexPath:indexPath];
    
    cell.textField.textColor = [UIColor redColor];
    
    return cell;
}

For more advanced customization, you may want to modify the SHKCustomShareMenuCell class itself.

If your app already has it's own UITableViewCell subclass that you use through out the app, you can simply change the SHKFormFieldCell's header to inherhit from your class instead of UITableViewCell:

// change:
@interface SHKFormFieldCell : UITableViewCell 

//to
@interface SHKFormFieldCell : MyTableViewCellSubclass

SHKCustomShareMenu

Subclass of SHKShareMenu, UITableViewController.

This table controller controls the full menu of sharing services. In normal mode it displays all of the actions and services available to a user. Clicking one opens that service. In editing mode, the user is able to toggle services on or off.

You can subclass any method from UITableViewController to customize SHKCustomShareMenu.

See tips on common customizations below for examples.

SHKCustomShareMenuCell

Subclass of UITableViewCell

This is the table cell used by SHKShareMenu. It has no custom features and is a standard UITableViewCell. It has been subclassed to make it easier for you to customize.

To modify edit the cell as you normally would on any UITableViewCell.

For more advanced customization, you may want to modify the SHKCustomShareMenuCell class itself.

If your app already has it's own UITableViewCell subclass that you use through out the app, you can simply change the SHKShareMenuCells's header to inherhit from your class instead of UITableViewCell:

// change:
@interface SHKShareMenuCell : UITableViewCell 

//to
@interface SHKShareMenuCell : MyTableViewCellSubclass

Common Customizations

Here is an example subclass of SHKCustomFormController.m that makes changes to:

  • background color of the view
  • color of each cell
  • border color of each cell
  • color of the cell's label
  • footer label color

The default view (on the left) and the result (on the right):

Sorry about the wonky spacing in this example. It was hard to fit with in this column width.


- (void)viewDidLoad
{
   [super viewDidLoad];

   // Change the background color to something yellow/paperishy
   self.tableView.backgroundColor = [UIColor colorWithRed:233.0/255.0
                                                    green:231.0/255.0
                                                    blue:214.0/255.0
                                                    alpha:1];

   // Change the cell border color to match
   self.tableView.separatorColor = [UIColor colorWithRed:207.0/255.0
                                                    green:204.0/255.0
                                                    blue:199.0/255.0
                                                    alpha:1];	

}

// Customize the look of the cell
- (UITableViewCell *)tableView:(UITableView *)tableView
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{    
    SHKCustomFormFieldCell *cell = 
		(SHKCustomFormFieldCell *)[super tableView:tableView
                              cellForRowAtIndexPath:indexPath];
	
	// lighter color
	cell.textLabel.textColor = [UIColor lightGrayColor];
	
	// smaller font
	cell.textLabel.font = [UIFont boldSystemFontOfSize:13];
	
	// more subtle cell background
	cell.backgroundColor = [UIColor colorWithRed:234.0/255.0
                                             green:234.0/255.0
                                             blue:234.0/255.0
                                             alpha:1];
    
    return cell;
}

// Create a custom footer label so we can style it
- (UIView *)tableView:(UITableView *)tableView 
  viewForFooterInSection:(NSInteger)section
{
	NSString *footerTitle = [self tableView:tableView 
                                  titleForFooterInSection:section];
	if (footerTitle != nil)
	{
		// Create a view to put the label in so we have some padding
	     CGRect wrapperFrame = CGRectMake(0,0,tableView.frame.size.width,50);
		UIView *wrapper = [[UIView alloc] initWithFrame:wrapperFrame];
		wrapper.autoresizesSubviews = YES;
		wrapper.autoresizingMask = UIViewAutoresizingFlexibleWidth;
		
		// Create the label
		CGRect labelFrame = CGRectMake(
                                       round(tableView.frame.size.width/2-300/2),
                                       0,
                                       300,
                                       50);
		UILabel *label = [[UILabel alloc] initWithFrame:labelFrame];
		label.backgroundColor = [UIColor clearColor];
		label.opaque = NO;
		label.textColor = [UIColor grayColor];
		label.font = [UIFont systemFontOfSize:13];
		
		label.textAlignment = UITextAlignmentCenter;
		label.lineBreakMode = UILineBreakModeWordWrap;
		label.numberOfLines = 0;
		
		label.text = footerTitle;
		
		label.autoresizesSubviews = YES;
		label.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | 
                                 UIViewAutoresizingFlexibleRightMargin;
		
		[wrapper addSubview:label];
		[label release];
		
		return [wrapper autorelease];
	}
	
	return nil;
}

// Set the height of our label (when we have one to display)
- (CGFloat)tableView:(UITableView *)tableView 
   heightForFooterInSection:(NSInteger)section
{
	NSString *footerTitle = [self tableView:tableView 
                            titleForFooterInSection:section];
	if (footerTitle != nil)
		return 50;
	
	return 0;
}