🎨Need to create a custom view ? You don't know how to use Canvas, use MyLittleCanvas instead !
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
app
documentation
gradle
medias
mylittlecanvas
.gitignore
LICENSE
README.md
build.gradle
gradle.properties
gradlew
gradlew.bat
publish.sh
settings.gradle

README.md

MyLittleCanvas

🎨 Need to create a custom view ?

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

Examples

arc dots slider tree

Codes :

Download

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

move_center_x

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

tree


.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

tree


.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

tree


.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

tree

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

on_click

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

tree

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 http://www.florentchampigny.com/

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

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

Android app on Google Play Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

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.