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;
}
