Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teddko/draggablecardstack
A Jetpack 🚀 Compose library 📚 that provides a customizable draggable card stack with smooth animations and gestures.
https://github.com/teddko/draggablecardstack
android cardstack jetpack-compose kotlin kotlin-android
Last synced: 3 months ago
JSON representation
A Jetpack 🚀 Compose library 📚 that provides a customizable draggable card stack with smooth animations and gestures.
- Host: GitHub
- URL: https://github.com/teddko/draggablecardstack
- Owner: TeddKo
- License: apache-2.0
- Created: 2024-10-29T05:12:28.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-10-31T06:06:10.000Z (3 months ago)
- Last Synced: 2024-10-31T07:17:37.742Z (3 months ago)
- Topics: android, cardstack, jetpack-compose, kotlin, kotlin-android
- Language: Kotlin
- Homepage:
- Size: 255 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Draggable Card Stack
A Jetpack Compose library for customizable draggable card stacks with smooth animations.
## Features
- 🎯 Smooth spring-based animations
- 🔄 Vertical and horizontal swiping
- 📱 Responsive design
- 🎨 Customizable card alignment & spacing
- 💫 Dynamic elevation & scale animations
- âš¡ Velocity-based swipe detection
- 🔄 Automatic card reordering
## Installation
```kotlin
dependencies {
implementation("io.github.teddko:cardstack:1.0.1")
}
```
## Basic Usage
```kotlin
@Composable
fun CardStackDemo() {
val items = remember { listOf("Card 1", "Card 2", "Card 3") }
DraggableCardStack(
initialItems = items,
height = 200.dp,
cardSpacingRatio = 0.1f,
cardAlignment = CardAlignment.BOTTOM,
dragAlignment = DragAlignment.HORIZONTAL
) { item ->
Card(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text(
text = item,
modifier = Modifier.padding(16.dp)
)
}
}
}
```
## Advanced Usage
```kotlin
data class CardItem(
val title: String,
val description: String,
val imageUrl: String
)
@Composable
fun AdvancedCardStack() {
val items = remember {
listOf(
CardItem("Title 1", "Description 1", "url1"),
CardItem("Title 2", "Description 2", "url2"),
CardItem("Title 3", "Description 3", "url3")
)
}
DraggableCardStack(
initialItems = items,
height = 200.dp,
cardSpacingRatio = 0.1f,
cardAlignment = CardAlignment.BOTTOM,
dragAlignment = DragAlignment.HORIZONTAL
) { item ->
Card(modifier = Modifier.fillMaxSize()) {
Row(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
AsyncImage(
modifier = Modifier
.size(100.dp)
.clip(CircleShape),
model = item.imageUrl,
contentDescription = item.description,
contentScale = ContentScale.Crop,
)
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text(text = item.title)
Text(text = item.description)
}
}
}
}
}
```
## Customization
### Card Alignment
```kotlin
CardAlignment.BOTTOM // Bottom center
CardAlignment.BOTTOM_START // Bottom left
CardAlignment.BOTTOM_END // Bottom right
CardAlignment.TOP // Top center
CardAlignment.TOP_START // Top left
CardAlignment.TOP_END // Top right
CardAlignment.START // Center left
CardAlignment.END // Center right
```
### Drag Alignment
```kotlin
DragAlignment.VERTICAL // Vertical only
DragAlignment.HORIZONTAL // Horizontal only
DragAlignment.NONE // All directions
```