Android 极简倒计时应用
一个简洁优雅的Android倒计时应用,采用Material Design设计风格,提供直观的时间设置和倒计时显示功能。
功能特性
🎯 核心功能
- 时间设置:使用NumberPicker组件设置小时、分钟和秒
- 精确计时:实现精确的倒计时功能,支持小时、分钟、秒的显示
- 圆形进度显示:自定义圆形进度条直观展示倒计时进度
- 基本控制:提供开始、暂停、继续和重置功能
- 结束提醒:倒计时结束时显示弹窗提醒并播放动画效果
- 状态保持:暂停后可以继续之前的倒计时
🎨 UI设计特点
- Material Design:遵循Google Material Design设计规范
- 响应式布局:使用ConstraintLayout确保在不同屏幕尺寸下的良好显示
- 平滑动画:圆形进度条平滑动画和倒计时结束缩放动画
- 智能切换:开始倒计时后自动隐藏时间设置器,显示倒计时器
技术实现
架构组件
- Kotlin:使用Kotlin作为主要开发语言
- ViewBinding:使用ViewBinding进行视图绑定
- Material Components:使用Material Design组件库
- 自定义View:实现自定义圆形进度条组件
核心类说明
MainActivity.kt
主活动类,负责:
- 时间设置器的初始化和配置
- 倒计时逻辑的实现
- UI状态的管理和切换
- 用户交互的处理
CircularProgressView.kt
自定义圆形进度条组件,特性:
- 平滑的进度动画
- 可配置的颜色和样式
- 高性能的绘制实现
布局设计
关键布局特点
- 固定容器:使用FrameLayout作为主内容容器,确保切换时布局稳定
- 居中对齐:所有主要元素都相对于屏幕中心定位
- 响应式间距:使用dp单位确保在不同密度屏幕上的一致显示
UI状态管理
- 初始状态:显示时间设置器,隐藏倒计时器
- 运行状态:隐藏时间设置器,显示倒计时器和圆形进度条
- 结束状态:显示完成弹窗,自动重置到初始状态
项目结构
app/
├── src/main/
│ ├── java/com/example/simpletimer/
│ │ ├── MainActivity.kt # 主活动
│ │ └── CircularProgressView.kt # 自定义圆形进度条
│ ├── res/
│ │ ├── layout/
│ │ │ └── activity_main.xml # 主布局文件
│ │ ├── values/
│ │ │ ├── colors.xml # 颜色定义
│ │ │ ├── strings.xml # 字符串资源
│ │ │ └── themes.xml # 主题样式
│ │ └── drawable/
│ │ ├── button_primary.xml # 主按钮样式
│ │ └── button_secondary.xml # 次按钮样式
│ └── AndroidManifest.xml
├── build.gradle # 应用级构建配置
└── proguard-rules.pro # 代码混淆规则
构建和运行
环境要求
- Android Studio Arctic Fox (2020.3.1) 或更高版本
- Android SDK API 24 (Android 7.0) 或更高版本
- Kotlin 1.9.10 或更高版本
构建步骤
- 克隆或下载项目代码
- 在Android Studio中打开项目
- 等待Gradle同步完成
- 连接Android设备或启动模拟器
- 点击"Run"按钮构建并运行应用
依赖库
- androidx.core:core-ktx:1.12.0
- androidx.appcompat:appcompat:1.6.1
- com.google.android.material:material:1.11.0
- androidx.constraintlayout:constraintlayout:2.1.4
- androidx.lifecycle:lifecycle-viewmodel-ktx:2.7.0
使用说明
- 设置时间:使用三个数字选择器分别设置小时、分钟和秒
- 开始倒计时:点击"开始"按钮启动倒计时
- 暂停/继续:在倒计时过程中可以暂停和继续
- 重置:点击"重置"按钮回到初始状态
- 完成提醒:倒计时结束时会显示弹窗提醒
自定义和扩展
颜色主题
可以在colors.xml
中修改应用的颜色主题:
primary_color
:主题色progress_foreground
:进度条颜色text_primary
:主要文字颜色
动画效果
可以在CircularProgressView.kt
和MainActivity.kt
中调整动画参数:
- 进度条动画持续时间
- 结束时的缩放动画效果
- 弹窗的显示动画