A flat view inspired by Google Material Design's Paper theme.
Please see included CHANGELOG file.
Now with smoother animations and more public properties for even easier customization!
Also New: Tap-Handler blocks!
BFPaperView is a subclass of UIView that behaves much like the new paper views from Google's Material Design Labs. All animation are asynchronous and are performed on sublayers. BFPaperViews work right away with pleasing default behaviors, however they can be easily customized! Almost every aspect about this view is customizable!
BFPaperViews come in 2 flavors, Flat or Raised. Flat BFPaperViews have no shadow and will remain flat through all animations. Flat views can be transparent, in which case the background will also fade a little when tapped. Raised BFPaperViews have a drop shadow that animates along with a tap, giving it the feeling of raising up with your touch. Raised BFPaperViews do not look good with a clear background color since it will expose their shadow layer underneath.
By default, BFPaperViews use "Smart Color" which will match the tap-circle and background fade colors to the color of the
You can turn off Smart Color by setting the property,
NO. If you disable Smart Color, a gray color will be used by default for both the tap-circle and the background color fade.
You can set your own colors via:
.backgroundFadeColor. Note that setting these disables Smart Color.
The UIColor for the shadow of a raised button. An alpha value of 1 is recommended as shadowOpacity overwrites the alpha of this color.
A CGFLoat representing the opacity of the shadow of RAISED buttons when they are lowered (idle). Default is
A CGFLoat representing the radius of the shadow of RAISED buttons when they are lowered (idle). Default is
A CGSize representing the offset of the shadow of RAISED buttons when they are lowered (idle). Default is
A CGFLoat representing the opacity of the shadow of RAISED buttons when they are lifted (on touch down). Default is
A CGFLoat representing the radius of the shadow of RAISED buttons when they are lifted (on touch down). Default is
A CGSize representing the offset of the shadow of RAISED buttons when they are lifted (on touch down). Default is
A CGFLoat representing the duration of the animations which take place on touch DOWN! Default is
0.25fseconds. (Go Steelers)
A CGFLoat representing the duration of the animations which take place on touch UP! Default is
2 * touchDownAnimationDurationseconds.
A CGFLoat representing the diameter of the tap-circle as soon as it spawns, before it grows. Default is
The CGFloat value representing the Diameter of the tap-circle. By default it will be the result of
tapCircleDiameterFullwill calculate a circle that always fills the entire view. Any value less than or equal to
tapCircleDiameterFullwill result in default being used. The constants:
tapCircleDiameterSmallare also available for use.
The CGFloat value representing how much we should increase the diameter of the tap-circle by when we burst it. Default is
The corner radius which propagates through to the sub layers. Default is
The UIColor to use for the circle which appears where you tap. NOTE: Setting this defeats the "Smart Color" ability of the tap circle. Alpha values less than
The UIColor to fade clear backgrounds to. NOTE: Setting this defeats the "Smart Color" ability of the background fade. Alpha values less than
A flag to set to
YESto have the tap-circle ripple from point of touch. If this is set to
NO, the tap-circle will always ripple from the center of the view. Default is
A flag to set to
YESto have the tap-circle ripple beyond the bounds of the view. If this is set to
NO, the tap-circle will be clipped to the view's bounds. Default is
(nonatomic, copy) void (^tapHandler)(CGPoint location)
A block to run on touch up, if the touch up is witin the bounds of the view. Basically turning the view into a button.
A flag to set to
YESto CHANGE a flat view to raised, or set to
NOto CHANGE a raised view to flat. If you used one of the provided custom initializers, you should probably leave this parameter alone. If you instantiated via storyboard or IB and want to CHANGE from riased to flat, this is the parameter for you! Default is
Notes on RAISED vs FLAT:
Has a shadow, so a clear background will look silly. It has only a tap-circle color. No background-fade.
Has no shadow, therefore clear backgrounds look fine. If the background is clear, it also has a background-fade color to help visualize the view and its frame.
Add the BFPaperView header and implementation file to your project. (.h & .m)
Creating a Flat BFPaperView
BFPaperView *flatPaperView = [[BFPaperView alloc] initWithFrame:rect raised:NO];
Creating a Raised BFPaperView
BFPaperView *raisedPaperView = [[BFPaperView alloc] initWithFrame:rect raised:YES];
Creating a Raised BFPaperView with a Tap-Handler block (could also be flat, just change raised flag to NO)
BFPaperView *raisedPaperViewWithATapHanlder = [[BFPaperView alloc] initWithFrame:rect raised:YES tapHandlerBlock:someBlockToRunOnTapUp];
BFPaperView *paperView = [[BFPaperView alloc] initWithFrame:CGRectMake(116, 468, 86, 86) raised:YES tapHandlerBlock:someBlockToRunOnTapUp]; paperView.backgroundColor = [UIColor colorWithRed:0.3 green:0 blue:1 alpha:1]; paperView.tapCircleColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.6]; // Setting this color overrides "Smart Color". paperView.cornerRadius = paperView.frame.size.width / 2; paperView.rippleFromTapLocation = NO; paperView.rippleBeyondBounds = YES; paperView.tapCircleDiameter = MAX(paperView.frame.size.width, paperView.frame.size.height) * 1.3; [self.view addSubview:paperView];
CocoaPods are the best way to manage library dependencies in Objective-C projects. Learn more at http://cocoapods.org
Add this to your podfile to add BFPaperView to your project.
platform :ios, '7.0' pod 'BFPaperView'
BFPaperView uses the MIT License:
Please see included LICENSE file.