MyLittleCanvas

? Need to create a custom view ?

You don't know how to use Canvas, use MyLittleCanvas instead !

Examples

Codes :

• Animated arcs
• Animated dots
• Custom Slider
• Tree
• Custom Switch
• Custom RadioButton

Download

dependencies {
    compile 'com.github.florent37:mylittlecanvas:2.0.2'
}

Available shapes

TODO : NEED TO FILL THOSE DOCUMENTATIONS

Shapes	link
Rect	documentation
Circle	documentation
Text	documentation
Arc	documentation
Line	documentation
Triangle	documentation
Drawable	documentation
Path	documentation

Animation

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()

Difference between animated methods

---

.top(values)

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

---

.topTo(values)

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

---

.moveTopTo(values)

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

---

.topBy(values)

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

---

.topPlus(values)

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

Event handling

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);

Listen click event

You can listen for a shape click using shapeEventManager.ifClicked(shape, listener)

shapeEventManager.ifClicked(myShape, clickedShape -> {
    //your action
    myShape.setColor(Color.BLACK);
});

Listen touch

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

Custom Actions

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

Bound Actions

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

How to Contribute

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.

Credits

Author: Florent Champigny

Blog : http://www.tutos-android-france.com/

Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/

License

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.