2359media / stxdynamictableview Goto Github PK

Rebuilding of Instagram's dynamic table view

Home Page: http://engineering.2359media.net/blog/2014/04/16/rebuilding-instagram-feed-table-view/

License: MIT License

Ruby 0.41% Objective-C 99.20% Shell 0.38%

stxdynamictableview's Introduction

STXDynamicTableView

STXDynamicTableView is designed to solve the common use case to display a feed of photos with their corresponding likes, caption, and comments. It's inspired by Instagram feed table view.

Example Project

We're using cocoapods to update the existing 3rd party libraries (Pods) in the sample code:

$ pod install

Then, open STXDynamicTableViewExample.xcworkspace to build and run.

Usage

Import the whole STXDynamicTableView source files into your project, and import the main header file:

 #import "STXDynamicTableView.h"

Supply your table view in the view controller, then set the delegate and data source:

STXFeedTableViewDataSource *dataSource = [[STXFeedTableViewDataSource alloc] initWithController:self tableView:self.tableView];
self.tableView.dataSource = dataSource;
self.tableViewDataSource = dataSource;

STXFeedTableViewDelegate *delegate = [[STXFeedTableViewDelegate alloc] initWithController:self];
self.tableView.delegate = delegate;
self.tableViewDelegate = delegate;

Populate your data models to the table view data source:

NSDictionary *instagramPopularMediaDictionary = jsonObject;
if (instagramPopularMediaDictionary) {
    id data = [instagramPopularMediaDictionary valueForKey:@"data"];
    NSArray *mediaDataArray = data;
    
    NSMutableArray *posts = [NSMutableArray array];
    for (NSDictionary *mediaDictionary in mediaDataArray) {
        STXPost *post = [[STXPost alloc] initWithDictionary:mediaDictionary];
        [posts addObject:post];
    }
    
    self.tableViewDataSource.posts = [posts copy];
    
    [self.tableView reloadData];
}

Your data models need to conform to STXPostItem, STXCommentItem, and STXUserItem to be able to use the built-in table view data source and delegate.

Background

Read Rebuilding Instagram feed table view to understand the challenges, difficulties, and how do we solve the issue of rebuilding the table view style popularized by Instagram app with Auto Layout.

TODO

Migrate to Swift with better value types for data models and protocols
Using alternative architecture such as AsyncDisplayKit, ComponentKit, or React Native.

Disclaimer

STXDynamicTableView is simply a reusable code that you can use in your own project for any purpose as outlined in the LICENSE file. It's not a fully-fledged library, although we're taking steps to go there as time allows.

##Feedback We'd love to hear feedback. Create Github issues, pull requests, or hit us up on Twitter.

Credits

This project uses the following 3rd party libraries:

Tyler Fox for PureLayout
Mattt Thompson for AFNetworking and TTTAttributedLabel
Krzysztof Zabłocki for KZPropertyMapper
Bobby Williams for MHPrettyDate
Urban Apps for UALogger

License

STXDynamicTableView is available under the MIT license. See the LICENSE file for more info.

stxdynamictableview's People

Contributors

Stargazers

Watchers

stxdynamictableview's Issues

Content not showing correct in iOS7

Why you don't use JSON Serializaion library in place of NSCoding?

create podspec and publish on Cocoapods

Number of rows issue when no comments

Hi, first thx for the great work.

The code works perfectly in case there is an important number of comments for a post (> 5) but isn't there a problem if the number of comments is < 5?

In the cellForRowAtIndexPath method, the if condition to return a commentCell is
(indexPath.row > CAPTION_CELL_ROW && indexPath.row < commentsRowLimit)

with commentRowLimit = 9. So if comments < 5, the action row will never get returned.

Commenter name not displayed in CommentLabel

I'm quite new to TTTAttributedLabel so apologies if my question is obvious, but I dont understand why the commenter is an argument of function below (comments don't start with the commenter name). Would it be possible to add the the commenter name at the beginning of the comment?

(void)setCommentLabel:(STXAttributedLabel *)commentLabel text:(NSString *)text commenter:(NSString *)commenter
{
NSMutableArray *textCheckingResults = [NSMutableArray array];
[commentLabel setText:text afterInheritingLabelAttributesAndConfiguringWithBlock:^NSMutableAttributedString *(NSMutableAttributedString *mutableAttributedString) {
NSRange searchRange = NSMakeRange(0, [mutableAttributedString length]);

NSRange currentRange = [[mutableAttributedString string] rangeOfString:commenter options:NSLiteralSearch range:searchRange];
NSTextCheckingResult *textCheckingResult = [NSTextCheckingResult linkCheckingResultWithRange:currentRange URL:nil];
[textCheckingResults addObject:textCheckingResult];

NSError *error;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:HashTagAndMentionRegex
                                                                       options:NSRegularExpressionCaseInsensitive
                                                                         error:&error];
if (error) {
    NSLog(@"%@", error);
}

[regex enumerateMatchesInString:[mutableAttributedString string] options:0 range:NSMakeRange(0, [mutableAttributedString length]) usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
    [textCheckingResults addObject:result];
}];

return mutableAttributedString;

}];

for (NSTextCheckingResult *result in textCheckingResults) {
[commentLabel addLinkWithTextCheckingResult:result];
}
}

not showing comment and like cell in iOS 8.

Hello i am using this tableview in my app. it is working great in iOS 7. But when i deploy it on iOS 8 likes, caption and comment label are not visible. Please help.

Don't show Photo area if...

thx first for this awesome project!

I would like to hide and move up the text area if there's no Photo. How can I do that?

File is missing

libPods-STXDynamicTableViewExample.a file not present

cancel image if block

Hi seems nice example. For which purposes we use this if block below?

if (cell.indexPath != nil && cell.indexPath.section != indexPath.section) { [cell cancelImageLoading]; }

Cell disappearance / layout issues.

Hi Jesse,

Thanks again for your wonderful work on this project, much appreciated.

Currently, there are a lot of issues with the layout of these comment and caption cells; in iOS7, the cells would sometimes disappear and not reload on cell recycling. This is reproducible by scrolling the example provided all the way to the bottom then to the top again. In iOS8, the cells would stop appearing altogether and throw UILabelContent Layer errors.

I understand that you're probably busy with projects, but if you could spare some time to take a look that'd be awesome.

Aside from the issue, everything else has been superb. Thanks again!