-
Notifications
You must be signed in to change notification settings - Fork 945
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Ink] Update Readme to use the script generator and move migration gu…
…ide. (#7370) Ink readme wasn't using the script generator and ready templates we already use in our other components. This fixes that and moves the migration guide from Ripple to Ink.
- Loading branch information
Showing
7 changed files
with
283 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # Ink | ||
|
|
||
| <!-- badges --> | ||
|
|
||
| The Ink component provides a radial action in the form of a visual ripple expanding outward from | ||
| the user's touch. | ||
|
|
||
| <img src="docs/assets/ink.gif" alt="An animation showing a Material ink ripple on multiple surfaces." width="210"> | ||
|
|
||
| <!-- design-and-api --> | ||
|
|
||
| <!-- toc --> | ||
|
|
||
| - - - | ||
|
|
||
| ## Overview | ||
|
|
||
| Ink is a material design implementation of touch feedback. | ||
|
|
||
| ## Installation | ||
|
|
||
| - [Typical installation](../../../docs/component-installation.md) | ||
|
|
||
| ## Usage | ||
|
|
||
| - [Typical use](typical-use.md) | ||
|
|
||
| ## Migration guides | ||
|
|
||
| - [Migration guide: Ink to Ripple](migration-guide-ink-to-ripple.md) |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| The Ink component exposes two interfaces that you can use to add material-like | ||
| feedback to the user: | ||
|
|
||
| 1. `MDCInkView` is a subclass of `UIView` that draws and animates ink ripples | ||
| and can be placed anywhere in your view hierarchy. | ||
| 2. `MDCInkTouchController` bundles an `MDCInkView` instance with a | ||
| `UITapGestureRecognizer` instance to conveniently drive the ink ripples from the | ||
| user's touches. | ||
|
|
||
| ### MDCInkTouchController | ||
|
|
||
| The simplest method of using ink in your views is to use a | ||
| `MDCInkTouchController`: | ||
|
|
||
| <!--<div class="material-code-render" markdown="1">--> | ||
| #### Swift | ||
| ```swift | ||
| let myButton = UIButton(type: .system) | ||
| myButton.setTitle("Tap Me", for: .normal) | ||
| let inkTouchController = MDCInkTouchController(view: myButton) | ||
| inkTouchController.addInkView() | ||
| ``` | ||
|
|
||
| #### Objective-C | ||
| ```objc | ||
| UIButton *myButton = [UIButton buttonWithType:UIButtonTypeSystem]; | ||
| [myButton setTitle:@"Tap me" forState:UIControlStateNormal]; | ||
| MDCInkTouchController *inkTouchController = [[MDCInkTouchController alloc] initWithView:myButton]; | ||
| [inkTouchController addInkView]; | ||
| ``` | ||
| <!--</div>--> | ||
| The `MDCInkTouchControllerDelegate` gives you control over aspects of the | ||
| ink/touch relationship, such as how the ink view is created, where it is | ||
| inserted in view hierarchy, etc. For example, to temporarily disable ink | ||
| touches, the following code uses the delegate's | ||
| `inkTouchController:shouldProcessInkTouchesAtTouchLocation:` method: | ||
| <!--<div class="material-code-render" markdown="1">--> | ||
| #### Swift | ||
| ```swift | ||
| class MyDelegate: NSObject, MDCInkTouchControllerDelegate { | ||
| func inkTouchController(_ inkTouchController: MDCInkTouchController, shouldProcessInkTouchesAtTouchLocation location: CGPoint) -> Bool { | ||
| // Determine if we want to display the ink | ||
| return true | ||
| } | ||
| } | ||
| ... | ||
| let myButton = UIButton(type: .system) | ||
| myButton.setTitle("Tap Me", for: .normal) | ||
| let myDelegate = MyDelegate() | ||
| let inkTouchController = MDCInkTouchController(view: myButton) | ||
| inkTouchController.delegate = myDelegate | ||
| inkTouchController.addInkView() | ||
| ``` | ||
|
|
||
| #### Objective-C | ||
| ```objc | ||
| @interface MyDelegate: NSObject <MDCInkTouchControllerDelegate> | ||
| @end | ||
|
|
||
| @implementation MyDelegate | ||
|
|
||
| - (BOOL)inkTouchController:(MDCInkTouchController *)inkTouchController | ||
| shouldProcessInkTouchesAtTouchLocation:(CGPoint)location { | ||
| return YES; | ||
| } | ||
|
|
||
| @end | ||
|
|
||
| ... | ||
|
|
||
| UIButton *myButton = [UIButton buttonWithType:UIButtonTypeSystem]; | ||
| [myButton setTitle:@"Tap me" forState:UIControlStateNormal]; | ||
| MyDelegate *myDelegate = [[MyDelegate alloc] init]; | ||
| MDCInkTouchController *inkTouchController = [[MDCInkTouchController alloc] initWithView:myButton]; | ||
| inkTouchController.delegate = myDelegate; | ||
| [inkTouchController addInkView]; | ||
| ``` | ||
| <!--</div>--> | ||
| **NOTE:** The ink touch controller does not keep a strong reference to the view to which it is attaching the ink view. | ||
| An easy way to prevent the ink touch controller from being deallocated prematurely is to make it a property of a view controller (like in these examples.) | ||
| ### MDCInkView | ||
| Alternatively, you can use MCDInkView directly to display ink ripples using your | ||
| own touch processing: | ||
| <!--<div class="material-code-render" markdown="1">--> | ||
| #### Swift | ||
| ```swift | ||
| let myCustomView = MyCustomView(frame: CGRect.zero) | ||
| let inkView = MDCInkView() | ||
| inkView.inkColor = UIColor.red | ||
| myCustomView.addSubview(inkView) | ||
| ... | ||
| // When the touches begin, there is one animation | ||
| inkView.startTouchBeganAnimation(at: touchPoint, completion: nil) | ||
| ... | ||
| // When the touches end, there is another animation | ||
| inkView.startTouchEndedAnimation(at: touchPoint, completion: nil) | ||
| ``` | ||
|
|
||
| #### Objective-C | ||
| ```objc | ||
| MyCustomView *myCustomView = [[MyCustomView alloc] initWithFrame:CGRectZero]; | ||
| MDCInkView *inkView = [[MDCInkView alloc] init]; | ||
| inkView.inkColor = [UIColor redColor]; | ||
| [myCustomView addSubview:inkView]; | ||
| ... | ||
| // When the touches begin, there is one animation | ||
| [inkView startTouchBeganAnimationAtPoint:touchPoint completion:nil]; | ||
| ... | ||
| // When the touches end, there is another animation | ||
| [inkView startTouchEndedAnimationAtPoint:touchPoint completion:nil]; | ||
| ``` | ||
| <!--</div>--> |
Oops, something went wrong.