Skip to content

Commit

Permalink
Now uses background colour instead of alpha channel to implement fade…
Browse files Browse the repository at this point in the history
…. Updated README with details of the new example.
  • Loading branch information
Jim Dovey committed Aug 16, 2010
1 parent a012e99 commit d40dd2f
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 5 deletions.
4 changes: 2 additions & 2 deletions Examples/ExpanderDemo/Classes/ExpandingGridViewController.m
Expand Up @@ -90,7 +90,7 @@ - (void) expandCellsFromRect: (CGRect) rect ofView: (UIView *) aView
// ensure these bits aren't animated
[UIView setAnimationsEnabled: NO];

self.gridView.alpha = 0.0;
self.gridView.backgroundColor = [UIColor clearColor];

// collect the visible cells' original locations in a new array
NSArray * cells = [self.gridView visibleCells];
Expand Down Expand Up @@ -131,7 +131,7 @@ - (void) viewDidAppear: (BOOL) animated
[UIView beginAnimations: @"Expansion" context: NULL];
[UIView setAnimationDuration: 1.0];

self.gridView.alpha = 1.0;
self.gridView.backgroundColor = [UIColor blackColor];

for ( NSUInteger i = 0; i < [_expandedLocations count]; i++ )
{
Expand Down
4 changes: 2 additions & 2 deletions Examples/ExpanderDemo/ExpanderDemo.xcodeproj/jim.pbxuser
Expand Up @@ -86,8 +86,8 @@
PBXFileDataSource_Warnings_ColumnID,
);
};
PBXPerProjectTemplateStateSaveDate = 303665122;
PBXWorkspaceStateSaveDate = 303665122;
PBXPerProjectTemplateStateSaveDate = 303668474;
PBXWorkspaceStateSaveDate = 303668474;
};
sourceControlManager = 389A5BC212198FEB00B87185 /* Source Control */;
userBuildSettings = {
Expand Down
12 changes: 11 additions & 1 deletion README.textile
Expand Up @@ -93,4 +93,14 @@ h3. SpringBoard

This is a new demo which shows how to use gesture recognizers to implement a manual reordering interface similar to that used by the iPad springboard. If you tap and hold on a cell for half a second, it will pop out of the grid, whereupon you can drag it around and drop it in a new position by letting go. The rest of the cells move out of the way as you drag your chosen cell around.

Additionally, it shows how to use the left and right insets to force the grid view to create the desired number of columns. In portrait mode, we want four columns, and the default width of 768 divides by four nicely, so we leave the insets at zero. In landscape mode we want five columns, and so we inset left & right by two pixels each to reduce the grid's _layout_ width to 1020 pixels, which is cleanly divisible by 5. As a result, rotating to landscape mode results in five columns being visible.
Additionally, it shows how to use the left and right insets to force the grid view to create the desired number of columns. In portrait mode, we want four columns, and the default width of 768 divides by four nicely, so we leave the insets at zero. In landscape mode we want five columns, and so we inset left & right by two pixels each to reduce the grid's _layout_ width to 1020 pixels, which is cleanly divisible by 5. As a result, rotating to landscape mode results in five columns being visible.

h3. ExpanderDemo

This demo shows how to make a new grid view instance expand into existence from a single point. The *ExpanderDemoViewController* implements a basic grid view with a single cell. When this cell is tapped, it creates a new instance of *ExpandingGridViewController*, which then expands its image cells into view (only using those cells which would be visible, not ALL cells).

The expansion is triggered by calling the <code>-expandCellsFromRect:ofView:</code> method of ExpandingGridViewController. Before calling this, you must set the expanding grid view's frame (so it can figure out what cells should be visible at what indices) and add it to a superview (so the passed rectangle can be mapped across). Afterward you should ensure that you call the new controller's <code>-viewDidAppear:</code>. This last function implements the last part of the expansion algorithm.

In <code>-expandCellsFromRect:ofView:</code>, the controller converts the source rectangle into its own view's coordinate space and caches it. It also goes through the grid view's cell list and stores their existing frames ready to animate them later. Lastly, it sets its view's background colour to clear. Then in <code>-viewDidAppear:</code> it first moves all the visible cells to the saved starting rectangle, then in an animation block it restores its background colour and moves the cells to their original positions.

Also: Yes, this example contains a memory leak, and doesn't go in reverse. The only exemplary code is in the two methods discussed above.

0 comments on commit d40dd2f

Please sign in to comment.