🎨 Need to create a custom view ?
You don't know how to use Canvas, use MyLittleCanvas instead !
Codes :
dependencies {
compile 'com.github.florent37:mylittlecanvas:2.0.2'
}TODO : NEED TO FILL THOSE DOCUMENTATIONS
| Shapes | link |
|---|---|
| Rect | documentation |
| Circle | documentation |
| Text | documentation |
| Arc | documentation |
| Line | documentation |
| Triangle | documentation |
| Drawable | documentation |
| Path | documentation |
Follow the example of SwitchView
Shape animations are executed by an instance of ShapeAnimator attached to your view
private final ShapeAnimator shapeAnimator = new ShapeAnimator(this);All animated methods of shapes are wrapped into the method .animate()
For example, for a CircleShape, you can animate his position (centerX) using
myCircleShape.animate().centerXTo(15);Then use your ShapeAnimator to execute this animation
shapeAnimator.play(myCircleShape.animate().centerXTo(15))
.setDuration(500)
.start()
This method will change the shape top values, ignoring its previous height
For example, for a Rect [left: 0, top:50, right: 200, bottom:90]
if you use .animate().top(50, 0)
The final values of the Rect will be [left: 0, top:50, right: 200, bottom:90] then [left: 0, top:0, right: 200, bottom:90],
it will not change the bottom of the rect
It's the same as top except it automatically set the first value as the current value
For example, for a Rect [left: 0, top:50, right: 200, bottom:90]
if you use .animate().topTo(0), it will animate the top from 50 to 0
This method will change the shape top value, keeping the shape height
For example, for a Rect [left: 0, top:10, right: 200, bottom:90], the height is 80
if you use .animate().moveTop(0)
The final values of the Rect will be [left: 0, top:0, right: 200, bottom:80],
it will also change the bottom of the rect to keep the height of 80
This method will change the shape top value, ignoring its previous height
Multiplying his top by the values
For example, for a Rect [left: 0, top:10, right: 200, bottom:90]
if you use .animate().topBy(0, 0.5, 1f)
The values of the Rect will be
[left: 0, top:0, right: 200, bottom:90] then
[left: 0, top:5, right: 200, bottom:90] then
[left: 0, top:10, right: 200, bottom:90]
it will not change the bottom of the rect
This method will change the shape top value, ignoring its previous height
Adding his top by the values
For example, for a Rect [left: 0, top:10, right: 200, bottom:90]
if you use .animate().topPlus(0, 10, 0)
The values of the Rect will be
[left: 0, top:10, right: 200, bottom:90] then
[left: 0, top:20, right: 200, bottom:100] then
[left: 0, top:10, right: 200, bottom:90]
it will not change the bottom of the rect
Follow the example of Tree View
User events handling like onClick or onTouch are handled by an instance of ShapeEventManager attached to your view
private final ShapeEventManager shapeAnimator = new ShapeEventManager(this);You can listen for a shape click using shapeEventManager.ifClicked(shape, listener)
shapeEventManager.ifClicked(myShape, clickedShape -> {
//your action
myShape.setColor(Color.BLACK);
});
To handle easier the onTouchEvent, use shapeEventManager.ifClicked(shape, touchSetup)
The touchSetup gives you an item EventHelper, which help you bind an action with an user interaction
Use eventHelper.onDown((event) -> {/* code */}) to execute a custom action to execute on user finger down
Use eventHelper.onMove((event) -> {/* code */}) to execute a custom action to execute on user finger move
Use eventHelper.onUp((event) -> {/* code */}) to execute a custom action to execute on user finger up
EventHelper can automatically bind a shape action to an user interaction
For example, you can move move the CenterX of a shape to the event.x using
.move(myRectShape, RectShape.Pos.CENTER_X, EventPos.X)Please look at implemented RectShape.Pos and CircleShape.Pos
We welcome your contributions to this project.
You can submit any idea or improvement for this project.
The best way to submit a patch is to send us a pull request.
To report a specific problem or feature request, open a new issue on Github.
Author: Florent Champigny
Blog : http://www.tutos-android-france.com/
Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/
Copyright 2018 florent37, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent