From 9b42da1aca698d0ce274b645285475639cdb26bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9mence=20Roumy?= Date: Fri, 23 Jun 2023 16:43:33 +0200 Subject: [PATCH 1/2] slide to change month --- multiDatePicker/build.gradle | 4 +- .../multidatepicker/MultiDatePicker.kt | 60 ++++++++++++++++--- 2 files changed, 54 insertions(+), 10 deletions(-) diff --git a/multiDatePicker/build.gradle b/multiDatePicker/build.gradle index 8f3eef2..760ae1c 100644 --- a/multiDatePicker/build.gradle +++ b/multiDatePicker/build.gradle @@ -43,10 +43,10 @@ dependencies { // COMPOSE implementation platform("androidx.compose:compose-bom:2022.12.00") - implementation("androidx.activity:activity-compose:1.6.1") + implementation("androidx.activity:activity-compose:1.7.2") implementation("androidx.compose.ui:ui") implementation("androidx.compose.foundation:foundation") - implementation("androidx.compose.material3:material3:1.0.1") + implementation("androidx.compose.material3:material3:1.1.1") implementation("androidx.compose.material:material-icons-extended") testImplementation 'junit:junit:4.13.2' diff --git a/multiDatePicker/src/main/java/com/playmoweb/multidatepicker/MultiDatePicker.kt b/multiDatePicker/src/main/java/com/playmoweb/multidatepicker/MultiDatePicker.kt index 73484a4..5c8df11 100644 --- a/multiDatePicker/src/main/java/com/playmoweb/multidatepicker/MultiDatePicker.kt +++ b/multiDatePicker/src/main/java/com/playmoweb/multidatepicker/MultiDatePicker.kt @@ -8,26 +8,41 @@ import androidx.compose.animation.fadeOut import androidx.compose.animation.with import androidx.compose.foundation.background import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.gestures.detectDragGestures +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.ChevronLeft import androidx.compose.material.icons.rounded.ChevronRight import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text -import androidx.compose.material3.TextButton -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.MutableState +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.text.font.FontWeight @@ -35,10 +50,16 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.playmoweb.multidatepicker.models.MultiDatePickerColors -import com.playmoweb.multidatepicker.utils.* +import com.playmoweb.multidatepicker.utils.Operation import com.playmoweb.multidatepicker.utils.extensions.toMonthYear import com.playmoweb.multidatepicker.utils.extensions.toShortDay -import java.util.* +import com.playmoweb.multidatepicker.utils.innerPadding +import com.playmoweb.multidatepicker.utils.mediumRadius +import com.playmoweb.multidatepicker.utils.smallRadius +import com.playmoweb.multidatepicker.utils.xsmallPadding +import com.playmoweb.multidatepicker.utils.xxsmallPadding +import java.util.Calendar +import java.util.Date @OptIn(ExperimentalAnimationApi::class) @Composable @@ -61,6 +82,8 @@ fun MultiDatePicker( val isSelectYear = remember { mutableStateOf(false) } val yearScrollState = rememberLazyListState() val pickerHeight = remember { mutableStateOf(0.dp) } + var offsetX by remember { mutableStateOf(0f) } + var isSliding by remember { mutableStateOf(false) } LaunchedEffect(isSelectYear.value) { if (isSelectYear.value) { @@ -69,6 +92,18 @@ fun MultiDatePicker( } } + LaunchedEffect(isSliding) { + if(!isSliding) { + if(offsetX > 1) { + // Remove a month + currDate.value = calendar.value.apply { add(Calendar.MONTH, -1) }.time + } else if(offsetX < -1) { + // Add a month + currDate.value = calendar.value.apply { add(Calendar.MONTH, 1) }.time + } + } + } + @Composable fun MonthPickerIcon(operation: Operation) { return Icon( @@ -136,7 +171,7 @@ fun MultiDatePicker( } else { fadeIn() with fadeOut() } - } + }, label = "" ) { showYearSelector -> if (showYearSelector) { /** @@ -194,6 +229,15 @@ fun MultiDatePicker( * BODY */ Column( + modifier = Modifier.pointerInput(Unit) { + detectDragGestures( + onDragStart = { isSliding = true }, + onDragEnd = { isSliding = false }, + ) { change, dragAmount -> + change.consume() + offsetX = dragAmount.x + } + }, verticalArrangement = Arrangement.spacedBy(xxsmallPadding), ) { val daysNumber: IntRange = (1..calendar.value.getActualMaximum(Calendar.DAY_OF_MONTH)) From 6970d4b633ea6dd0db919f90b1e83a45a49ec6f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9mence=20Roumy?= Date: Fri, 23 Jun 2023 16:53:31 +0200 Subject: [PATCH 2/2] update readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 8d46fa7..0c964b6 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ dependencies { - [x] Range date picker (start date to end date) - [x] Customizable colors - [x] Quickly select year by clicking on the month/year title +- [x] Quickly change month by sliding on the days # Usage