Skip to content

Latest commit

 

History

History
192 lines (168 loc) · 8.53 KB

README.md

File metadata and controls

192 lines (168 loc) · 8.53 KB
Raw

Puck


Make Composables Draggable.


Including in your project

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation 'com.github.Shivamdhuria:puck:Version'
}

Usage

        setContent {
            // this keeps parents size
            val parentSize = remember { mutableStateOf(Size.Zero) } 
            PuckTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Box(modifier = Modifier
                        .onGloballyPositioned { coordinates ->
                            //Set parents Size
                            parentSize.value = coordinates.size.toSize()
                        }
                        .fillMaxSize()
                    ) {
                        //Adding puck to Card Composable
                        Card(
                            modifier = Modifier
                                .puck(parentSize, behaviour = FreeForm), backgroundColor = PINK200
                        ) {
                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                Image(
                                    painterResource(drawable.zoid),
                                    contentDescription = "",
                                    contentScale = ContentScale.Crop,
                                    modifier = Modifier
                                        .height(70.dp)
                                        .width(70.dp)
                                )
                                Text(text = "Card Composable", fontSize = 24.sp, modifier = Modifier.padding(10.dp))
                            }
                        }
                        //Adding puck to Button Composable
                        Button(onClick = { }, modifier = Modifier.puck(parentSize, behaviour = FreeForm, animationDuration = 700)) {
                            Text(text = "Button Composable", fontSize = 24.sp)
                        }
                        
                       //Adding puck to FAB Composable
                        FloatingActionButton(
                            onClick = {},
                            modifier = Modifier
                                .puck(parentSize, FreeForm, animationDuration = 700)
                                .width(90.dp)
                                .height(90.dp),
                        ) {
                            Image(
                                painterResource(drawable.pencil),
                                contentDescription = "",
                                modifier = Modifier
                                    .height(50.dp)
                                    .width(50.dp)
                            )
                        }
                    }
                }
            }

Behaviours

Currently Puck supports three behaviours

  • Freeform
  • Sticky
  • Gravity

FreeForm

Freeform makes Composable draggable anywhere in the screen. If the user drags a composable out of screen area, it is coerced within the bounds of the screen.

For adding Freeform behaviour to any composable, do -

FloatingActionButton(onClick = {},
                            modifier = Modifier
                                .puck(parentSize, behaviour = FreeForm)
                                .width(90.dp)
                                .height(90.dp)) {
                            //Image or anything
                        }

Sticky

You can also make Composables stick to the edges or corners of the screen. Simple flick the Composable in the direction you want it to stick and it will follow the trajectory and stick there. To use stick you need to pass a parameter (EDGES, CORNERS,VERTICAL EDGsE HORIZONATL EDGES). Puck will automatically make the set parameter "sticky".

FloatingActionButton(onClick = {},
                           modifier = Modifier
                                .puck(parentSize, behaviour = Sticky(Corners), animationDuration = 500)
                                .width(90.dp)
                                .height(90.dp),
                            backgroundColor = WHITE200
                        ) {
                            Image()
                        }

Gravity

We can define gravity points with center and radius. Any composable that falls within this circle's gravity field will "zap" towards this center. Note: The circle isn't actualy drawn as above while using puck. I have shown the circle only for demonstration purposes.

val circle = Circle(800f, 1800f, 500f)
FloatingActionButton(onClick = {},
                           modifier = Modifier
                                .puck(parentSize,behaviour = Gravity(circle), animationDuration = 500)
                                .width(90.dp)
                                .height(90.dp),
                            backgroundColor = WHITE200
                        ) {
                            Image()
                        }

Attributes

  • isPointsTowardsCenter - Currently this only works for Sticky(Edges) mode. Composable will always point towards center by using rotation animation. When a composable is dragged, the rotation value is set to default (0f), after the drag ends and the commposable sticks to any of the edges, the composable rotates according and points towards center.

  • animationDuration - This is time taken in milli seconds for the drag animation. The lesser the time the quicker the animation. (Note: When the behaviour is set to Freeform, a composable is draggable without any animation.)

  • focusedSizeMultiplier - When a composable is in pressed state, its size increases by this factor. You can set it to 1, if you don't want to increase it's size when in pressed date

  • onOffsetChanged - This returns the latest int offset of the composable's position after the drag ends. You should ideally use it to save the latest offset in shared preferences/ datastore to use it again and position the composable when the app restarts again.

Code & Issues

If you are a developer and you wish to contribute to the app please raise an issue, discuss, fork and submit a pull request. Follow Github Flow for collaboration!

Find this repository useful? ❤️

Support it by joining starring this repository. ⭐
And follow me on Medium, Github and Twitter

Project Maintainers

This project is founded and actively maintained by Shivam Dhuria.

License

Copyright 2021 Shivam Dhuria

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.