VENSeparatorView

Jagged border separators on UIViews used in the Venmo app.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

383

Maintenance

Last Commit

7yrs ago

Contributors

3

Package

Dependencies

0

License

MIT

Categories

Readme

VENSeparatorView

Build Status

VENSeparatorView makes it easy create custom separators on iOS. It's used in the Venmo app to represent transfer stories.

alt text - alt text

Installation

The easiest way to get started is to use CocoaPods. Just add the following line to your Podfile:

pod 'VENSeparatorView', '~> 1.0.0'

General Usage

Import VENSeparatorView.h

Create an instance of UISeparatorView or a UISeparatorView subclass using its initWithFrame:topLineSeparatorType:bottomLineSeparatorType initializer and add it as a subview.

VENSeparatorType options are:

UITableViewCell Provider

Making jagged cells in a UITableView is simple using the included VENSeparatorTableViewCellProvider

Import #import "VENSeparatorTableViewCellProvider.h" in your UITableViewDataSource and conform this class to the VENSeparatorTableViewCellProviderDelegate protocol isCellJaggedAtIndexPath: method.

Example:

// Specifies that all cells with odd row index are jagged.
- (BOOL)isCellJaggedAtIndexPath:(NSIndexPath *)indexPath
{
    return (indexPath.row % 2);
}

Set your UITableView's separatorStyle property to UITableViewCellSeparatorStyleNone

Create a VENSeparatorTableViewCellProvider property:

@property (nonatomic, strong) VENSeparatorTableViewCellProvider *separatorProvider;

In this class's init method, or in the viewDidLoad method if this class is a UIViewController subclass, instantiate the VENSeparatorTableViewCellProvider property using its initWithStrokeColor:fillColor:delegate: method.

self.separatorProvider = [[VENSeparatorTableViewCellProvider alloc] initWithStrokeColor:[UIColor grayColor]
                                                                              fillColor:[UIColor lightGrayColor]
                                                                               delegate:self];

At the end of your data source's tableView:cellForRowAtIndexPath: method apply separators to the UITableViewCell with the VENSeparatorTableViewCellProvider's applySeparatorsToCell:atIndexPath:inTableView:cellHeight:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell;
    // ...

    [self.separatorProvider applySeparatorsToCell:cell atIndexPath:indexPath inTableView:tableView cellHeight:0];
    return cell;
}

Sample Project

Check out the sample project in this repo for sample usage.

Contributing

We'd love to see your ideas for improving this library! The best way to contribute is by submitting a pull request. We'll do our best to respond to your patch as soon as possible. You can also submit a new Github issue if you find bugs or have questions. :octocat:

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100