IOS waterfall stream View Controls & quot; quilt & quot; usage

1000memories has open-source its iOS waterfall stream View Control "quilt" under the MIT protocol ".

Quilt-display images and media in multiple columns with different aspect ratios is the core of ShoeBox Design Aesthetics for 1000memories websites, iPhones, and Android. It gives users a sense of true album and emphasizes the beauty of old photos.

Okay, the above two paragraphs are excerpted. It's an opening remark. Let's just get started.

Usage of "quilt:

 

1. First download the open source code on github.
2. You will find Several folders in the downloaded code. Drag the six files in the following path to your project (not as much as you add in the demo ):

3. Go to the class you want to implement and add the following code to the header file:
[Csharp]
# Import <UIKit/UIKit. h>
# Import "TMQuiltView. h"
@ Interface WaterFlowVC: UIViewController <TMQuiltViewDataSource, TMQuiltViewDelegate>
{
TMQuiltView * _ tmQuiltView;
NSMutableArray * _ images;
}
@ Property (nonatomic, retain) TMQuiltView * tmQuiltView;
@ Property (nonatomic, retain) NSMutableArray * images;
@ End

# Import <UIKit/UIKit. h>
# Import "TMQuiltView. h"
@ Interface WaterFlowVC: UIViewController <TMQuiltViewDataSource, TMQuiltViewDelegate>
{
TMQuiltView * _ tmQuiltView;
NSMutableArray * _ images;
}
@ Property (nonatomic, retain) TMQuiltView * tmQuiltView;
@ Property (nonatomic, retain) NSMutableArray * images;
@ End
TmQuiltView is the waterfall stream control defined by 1000memories. Similar to tableView (which can be seen from the added protocol), _ images is a data source that stores arrays of images.

4. Go to the. m file to implement the data source and Proxy:
[Csharp]
# Pragma mark-
# Pragma mark TMQuiltViewDataSource
-(NSInteger) quiltViewNumberOfCells :( TMQuiltView *) TMQuiltView
{
Return [self. images count];
}
 
-(TMQuiltViewCell *) quiltView :( TMQuiltView *) quiltView cellAtIndexPath :( NSIndexPath *) indexPath
{
NSString * identifierStr = @ "photoIdentifier ";
TMPhotoQuiltViewCell * cell = (TMPhotoQuiltViewCell *) [quiltView dequeueReusableCellWithReuseIdentifier: identifierStr];
If (! Cell)
{
Cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier: identifierStr] autorelease];
}
Cell. photoView. image = [self imageAtIndexPath: indexPath];
Cell. titleLabel. text = [NSString stringWithFormat: @ "% d", indexPath. row + 1];
Return cell;
}
# Pragma mark-
# Pragma mark TMQuiltViewDelegate
// Number of Columns
-(NSInteger) quiltViewNumberOfColumns :( TMQuiltView *) quiltView
{
Return 2;
}
// Unit height
-(CGFloat) quiltView :( TMQuiltView *) quiltView heightForCellAtIndexPath :( NSIndexPath *) indexPath {

Float height = [self imageAtIndexPath: indexPath]. size. height/[self quiltViewNumberOfColumns: quiltView];
Return height;
}

# Pragma mark-
# Pragma mark TMQuiltViewDataSource
-(NSInteger) quiltViewNumberOfCells :( TMQuiltView *) TMQuiltView
{
Return [self. images count];
}

-(TMQuiltViewCell *) quiltView :( TMQuiltView *) quiltView cellAtIndexPath :( NSIndexPath *) indexPath
{
NSString * identifierStr = @ "photoIdentifier ";
TMPhotoQuiltViewCell * cell = (TMPhotoQuiltViewCell *) [quiltView dequeueReusableCellWithReuseIdentifier: identifierStr];
If (! Cell)
{
Cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier: identifierStr] autorelease];
}
Cell. photoView. image = [self imageAtIndexPath: indexPath];
Cell. titleLabel. text = [NSString stringWithFormat: @ "% d", indexPath. row + 1];
Return cell;
}
# Pragma mark-
# Pragma mark TMQuiltViewDelegate
// Number of Columns
-(NSInteger) quiltViewNumberOfColumns :( TMQuiltView *) quiltView
{
Return 2;
}
// Unit height
-(CGFloat) quiltView :( TMQuiltView *) quiltView heightForCellAtIndexPath :( NSIndexPath *) indexPath {

Float height = [self imageAtIndexPath: indexPath]. size. height/[self quiltViewNumberOfColumns: quiltView];
Return height;
}
The data source and proxy methods need so much. If you have other requirements, you can jump to the class that defines the data source and proxy. In the demo provided
-(NSArray *) images and-(UIImage *) imageAtIndexPath :( NSIndexPath *) indexPath are also written in the data source. Note that these two methods are not the data source method.

TMPhotoQuiltViewCell is a custom unit that I copied directly from the demo. You can change it to your desired appearance as needed.

The proxy method is similar to the proxy of tableview, so it is easy to understand.

 

5. Finally, some variables need to be defined:
[Csharp]
-(Void) viewDidLoad
{
[Super viewDidLoad];
Self. view. backgroundColor = [UIColor blackColor];

_ TmQuiltView = [[TMQuiltView alloc] init];
_ TmQuiltView. frame = CGRectMake (0, 0,320, [[UIScreen mainScreen] bounds]. size. height-20-44 );
_ TmQuiltView. delegate = self;
_ TmQuiltView. dataSource = self;

[Self. view addSubview: _ tmQuiltView];
[_ TmQuiltView reloadData];

NSMutableArray * imageNames = [[NSMutableArray alloc] init];
For (int I = 0; I <kNumberOfCells; I ++)
{
[ImageNames addObject: [NSString stringWithFormat: @ "d.jpeg", I % 10 + 1];
}
Self. images = imageNames;
[ImageNames release];

[_ TmQuiltView reloadData];
}