11 12 月, 2023
By: LiHan
Jetpack Compose Custom DatePicker
Use Calendar API Create Week DatePicker
Step1
- now : 產生一個今天的日期時間,set(Calendar.DAY_OF_WEEK,Calendar.SUNDAY)是設定這週的第一天為星期天
- dateTitles : 一週顯示的日期(SUN~SAT)
- counter : 為了切換 下一週 或者 前一週 的計數器
- selected : 這是用來標記使用者點擊哪一個日期的變數
var now by remember {
mutableStateOf(
Calendar.getInstance().apply {
set(Calendar.DAY_OF_WEEK, Calendar.SUNDAY)
}
)
}
val dateTitles by remember {
mutableStateOf(listOf(
"SUN","MON","TUE","WED","THU","FRI","SAT"
))
}
var counter by remember {
mutableIntStateOf(0)
}
var selected by remember {
mutableIntStateOf(0)
}
Step2
- sdf : 日期格式轉換類別
- currentDate : 用來克隆now這個變數,給打印日期用 roll 可以讓他換週
- dates : 來產生那一週的所有天數
val sdf = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
|
val currentDate = (now.clone() as Calendar)
val dates = arrayListOf<String>()
for (i in 0 until 7) {
dates.add(sdf.format(currentDate.time))
currentDate.roll(Calendar.DAY_OF_MONTH, 1)
} |
Step3
UI
Column(
modifier = modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
val localDate = sdf.format(Calendar.getInstance().time)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
dates.forEachIndexed { index, date ->
Box(modifier = Modifier
.background(
shape = RoundedCornerShape(8.dp),
color = if (selected == index) Color.Red.copy(alpha = 0.2f) else Color.White
)
.clip(RoundedCornerShape(8.dp))
){
Column(
modifier = Modifier
.padding(4.dp)
.clickable {
selected = index
},
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = dateTitles[index])
Spacer(modifier = Modifier.height(4.dp))
Text(
text = date.split("-")[2],
color = if (localDate == date ) Color.Red else Color.Black
)
}
}
}
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
) {
IconButton(onClick = {
counter -=1
now = Calendar.getInstance().apply {
set(Calendar.DAY_OF_WEEK, Calendar.SUNDAY)
add(Calendar.WEEK_OF_MONTH,counter)
}
}) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
Spacer(modifier = Modifier.width(16.dp))
IconButton(onClick = {
counter +=1
now = Calendar.getInstance().apply {
set(Calendar.DAY_OF_WEEK, Calendar.SUNDAY)
add(Calendar.WEEK_OF_MONTH,counter)
}
}) {
Icon(
imageVector = Icons.Default.ArrowForward,
contentDescription = null
)
}
}
Spacer(modifier = Modifier.height(8.dp))
Text(text = "Selected : ${dates[selected]}")
} |