Kotlin+MVVM 构建todo App 应用

作者：易科

项目介绍

使用Kotlin+MVVM实现的todo app，功能界面参考微软的Todo软件（只实现了核心功能，部分功能未实现）。

功能模块介绍

1. 项目模块：添加/删除项目，项目负责管理todo任务
2. 任务模块：添加/删除任务，标记任务完成情况，标记任务为重要，标记为我的一天，设置提醒时间（发送前台通知），设置过期时间。
3. 搜索模块：依据任务名称模糊搜索。

效果截图

技术栈

• Kotlin
• ViewModel + LiveData + Room + AlarmManager + WorkerManager
• navigation + DiaLog + 前台通知

功能设计与实现

1. 项目模块设计实现

在项目模块中，分为固定模块和自定义模块。其中固定模块分为以下几个模块：

• 我的一天：可以查看当天需要完成的任务列表；
• 重要：可以查看标记为重要的任务列表；
• 计划内：( 未实现
• 已分配：（未实现
• 任务：可以查看未完成的所有任务列表；

而自定义项目模块是提供给用户来将任务归类到项目的功能。

项目模块主要显示：icon + 项目名称 + 包含的任务列表数量

（没啥好说的，简单的recyclerView实现即可

2. 任务列表页面的动态更新

点击项目进入项目后可创建任务，任务是由Recyclerview生成的，由于想要在任务添加/删除时出现列表滑动的效果，所以任务的apater实现了ListAdapter。

class TasksAdapter(val viewModel: TasksViewModel)
    : ListAdapter<Task, TasksAdapter.ViewHolder>(DIFF_CALLBACK) {
        //...
    }

2.1 任务列表页的操作

另外在搜索页面上也会用到跟任务列表一样的UI，所以将任务列表的UI用fragment实现，方便复用。

2.1.1 任务列表Fragment化

• TasksFragment.kt

class TasksFragment: BaseFragment() {
​
    override fun getResourceId() = R.layout.fragment_task_list
​
    lateinit var taskViewModel : TasksViewModel
    private var projectId = 0L
    private var projectName = ""
    private var projectSign : ProjectSign? = null
​
    private lateinit var adapter: TasksAdapter
    private lateinit var taskRecyclerView: RecyclerView
​
    private var previousList : List<Task>? = null
    private lateinit var baseActivity: BaseTaskActivity
​
    // 搜索参数
    var searchName = ""
    var isSearchPage = false
​
    override fun initView(rootView: View) {
        // 判断当前fragment的Activty是哪个，方便做特殊操作
        baseActivity = if (activity is TasksMainActivity) {
            activity as TasksMainActivity
        }else {
            isSearchPage = true
            activity as SearchMainActivity
        }
        taskViewModel = ViewModelProvider(baseActivity)[TasksViewModel::class.java]
​
        projectId = baseActivity.intent.getLongExtra(Constants.PROJECT_ID, 0L)
        projectName = baseActivity.intent.getStringExtra(Constants.PROJECT_NAME).toString()
        val serializable = baseActivity.intent.getSerializableExtra(Constants.PROJECT_SIGN)
        if (serializable != null) {
            projectSign = serializable as ProjectSign
        }
​
        Log.d(Constants.TASK_PAGE_TAG, "projectId = $projectId, projectName= $projectName")
        refreshList("onCreate")
​
        adapter = TasksAdapter(taskViewModel)
        taskRecyclerView = rootView.findViewById(R.id.task_recycle_view)
        taskRecyclerView.layoutManager = LinearLayoutManager(baseActivity)
        taskRecyclerView.adapter = adapter
​
        // 下拉刷新
        val swipeRefreshTask: SwipeRefreshLayout = rootView.findViewById(R.id.swipe_refresh_task)
        swipeRefreshTask.setOnRefreshListener {
            refreshList("refresh")
            swipeRefreshTask.isRefreshing = false   // 取消刷新状态
        }
        
        override fun initEvent(rootView: View) {
            initClickListener()
​
            initObserve()
        }
    }

2.1.2 任务item操作的封装

对任务的item操作有三个点击事件，分别是标记完成、点击item进入详情页编辑、标记为重要。故构建出TaskItem用来封装item的三个操作

class TaskItem(private val nameText: MaterialTextView?,
               private val checkTaskBtn : ImageButton,
               private val setTaskStartBtn: ImageButton,
               val task: Task) {
​
    var nameTextEdit: EditText? = null
    var curTaskName : String? = null
    
    fun initItem() {
        flushItemUI()
    }
​
    fun initClickListener(viewModel: TasksViewModel) {
        // 标记完成按钮
        checkTaskBtn.setOnClickListener {
            val upState = if (task.state == TaskState.DONE) {
                TaskState.DOING
            } else  {
                Log.d(Constants.TASK_PAGE_TAG,"播放动画")
                TaskState.DONE
            }
            task.state = upState
            viewModel.updateTask(task)
            flushItemUI()
            Log.d(Constants.TASK_PAGE_TAG,"update task state id= ${task.id} state for $upState")
        }
        // 标记重要按钮
        setTaskStartBtn.setOnClickListener {
            val isStart = !FlagHelper.containsFlag(task.flag, Task.IS_START)
            if (isStart) {
                task.flag = FlagHelper.addFlag(task.flag, Task.IS_START)
            }else {
                task.flag = FlagHelper.removeFlag(task.flag,Task.IS_START)
            }
            viewModel.setStart(task.id, task.flag)
            updateStartUI()
            Log.d(Constants.TASK_PAGE_TAG,"update task start id= ${task.id} isStart for $isStart")
        }
    }
​
​
    fun flushItemUI() {
        updateNameUI()
        updateStartUI()
    }
​
    fun updateNameUI() {
        /**
         * 从task中获取到名字 或者从输入框获取到名字
         */
        if (curTaskName == null) {
            curTaskName = task.name
        }else {
            curTaskName = if (nameText?.visibility == View.VISIBLE) {
                nameText.text.toString()
            } else {
                nameTextEdit?.text.toString()
            }
        }
​
        /**
         * checkTaskBtn
         */
        var resId = R.drawable.ic_select
        if (task.state == TaskState.DONE) {
            val spannableString = SpannableString(curTaskName)
            spannableString.setSpan(
                StrikethroughSpan(),
                0,
                spannableString.length,
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
            )
            if (nameText?.visibility == View.VISIBLE) {
                nameText.text = spannableString
            } else {
                nameTextEdit?.setText(spannableString) /** 划线的效果 **/
            }
            resId = R.drawable.ic_select_check
        }else {
            if (nameText?.visibility == View.VISIBLE) {
                nameText.text = curTaskName
            } else {
                nameTextEdit?.setText(curTaskName)
            }
        }
        checkTaskBtn.setImageResource(resId)
    }
​
    fun updateStartUI() {
        var startResId = R.drawable.ic_shoucang
        if (FlagHelper.containsFlag(task.flag, Task.IS_START)) {
            startResId = R.drawable.ic_shoucang_check
        }
        setTaskStartBtn.setImageResource(startResId)
    }
}

3. 任务详情页的编辑操作

3.1 任务的状态设计

任务详情页主要的操作包括：任务item的操作（标记完成、修改任务名、标记为重要），标记为我的一天，任务提醒，添加截止日期，重复（未实现），添加附件（未实现） 等。

扫描二维码关注公众号，回复： 17009582 查看本文章

任务item的操作同样封装在上面的 TaskItem中，直接调用即可，无需再实现

这里的有几个标记功能，标记为我的一天，标记为重要。因为不想新增一个字段来表示0或1的存储，这里将这两个属性为归为同一个字段flag，用int存储，用不同的位来表示对应字段的值，如：

• 当字段值为 1 时，说明标记为重要的；（01)
• 当字段值为 2 时，说明标记为我的一天；（10）
• 当字段值为 3 时，说明标记为重要的且是我的一天；（11）

/**
 * Flag 常量
 */
companion object {
    /** 设为重要的 **/
    const val IS_START = 1
    /** 设为我的一天 **/
    const val IN_ONE_DAY = 2
}

其实就是位运算的一种，用二进制的位来表示不同状态下的真或假。判断也就比较简单了，通过与，或运算即可：

object FlagHelper {
​
    /**
     * 添加标识
     */
    fun addFlag(flag: Int, newFlag : Int) : Int {
        return flag.or(newFlag)
    }
​
    /**
     * 移除标识
     */
    fun removeFlag(flag: Int, newFlag: Int) : Int {
        return flag.and(newFlag.inv())
    }
​
    /**
     * 判断是否包含该标识
     */
    fun containsFlag(flag: Int, checkFlag: Int) : Boolean {
        return flag.and(checkFlag) == checkFlag
    }
}

接下来只要用 FlagHelper.containsFlag(task.flag, Task.IN_ONE_DAY) 来判断该任务是否该状态，添加/删除也是同理调用该帮助类即可。

3.2 提醒功能的设计

3.2.1 UI设计

提醒功能的UI是这样的，日期和时间有对应的DiaLog实现，也有Picker实现，那么只需要通过Button点击切换两个UI即可实现。

我这里采用DiaLogFragment实现的，通过自定义的DtPickerDiaLogFragment 来管理Button与两个时间Picker组件。遇到的难点在于在两个时间Picker组件选择好时间后，该怎么跟DiaLogFrament做通信呢。这里使用了EventBus来做DiaLogFrament和两个时间picker组件对应的fragment做通信。实现如下：

• 日期选择器：DatePickerFragment.kt

class DatePickerFragment : BaseFragment() {
​
    private lateinit var dp : DatePicker
    lateinit var localDate : LocalDate
​
    override fun getResourceId() = R.layout.fragment_datepicker
​
    override fun initView(rootView: View) {
        dp = rootView.findViewById(R.id.datePicker)
    }
​
    override fun initEvent(rootView: View) {
        /**
         * The month that was set (0-11) for compatibility with java.util.Calendar.
         */
       dp.setOnDateChangedListener { view, year, monthOfYear, dayOfMonth ->
           localDate = LocalDate.of(year, monthOfYear + 1, dayOfMonth)
           EventBus.getDefault().post(DateTimeMessage(localDate))
           findNavController().navigate(R.id.switchTime)
       }
    }
​
​
}

• 时间选择器：TimePickerFragment.kt

class TimePickerFragment : BaseFragment() {
    override fun getResourceId() = R.layout.fragment_timepicker
​
    private lateinit var tp : TimePicker
    private lateinit var localTime: LocalTime
​
    override fun initView(rootView: View) {
        tp = rootView.findViewById(R.id.timePicker)
    }
​
    override fun initEvent(rootView: View) {
        tp.setOnTimeChangedListener { view, hourOfDay, minute ->
            localTime = LocalTime.of(hourOfDay,minute)
            EventBus.getDefault().post(DateTimeMessage(localTime))
        }
    }
}

• 日期和时间的选择器弹窗：DtPickerDiaLogFragment.kt

class DtPickerDiaLogFragment(private val dateTimeClick: DateTimeClickListener) : DialogFragment() {
​
    private var chooseDate: LocalDate? = null
    private var chooseTime: LocalTime? = null
    private var chooseDateTime : LocalDateTime? = null
​
​
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
​
        Log.d("DtPickerDiaLogFragment","onCreateView")
        val curView = inflater.inflate(R.layout.dialog_datetime_picker, null)
​
        val navHostFragment : FragmentContainerView = curView.findViewById(R.id.fragment_container_view)
        val switchCalendar : Button = curView.findViewById(R.id.switchCalendar)
        val switchTime : Button = curView.findViewById(R.id.switchTime)
        val cancelDialog : TextView = curView.findViewById(R.id.cancelDialog)
        val saveDateTime : TextView = curView.findViewById(R.id.saveDateTime)
​
        switchCalendar.setOnClickListener {
            switchCalendar.setTextColor(ContextCompat.getColor(MyToDoApplication.context, R.color.light_blue))
            switchTime.setTextColor(ContextCompat.getColor(MyToDoApplication.context, R.color.gray))
            navHostFragment.findNavController().navigate(R.id.switchCalendar)
        }
​
        switchTime.setOnClickListener {
            switchCalendar.setTextColor(ContextCompat.getColor(MyToDoApplication.context, R.color.gray))
            switchTime.setTextColor(ContextCompat.getColor(MyToDoApplication.context, R.color.light_blue))
            navHostFragment.findNavController().navigate(R.id.switchTime)
        }
​
        cancelDialog.setOnClickListener {
            dialog?.dismiss()
        }
​
        saveDateTime.setOnClickListener {
            chooseDateTime = if (chooseDate == null && chooseTime == null) {
                LocalDateTime.now()
            }else if (chooseDate == null) {
                LocalDateTime.of(LocalDate.now(), chooseTime)
            }else if (chooseTime == null) {
                LocalDateTime.of(chooseDate, LocalTime.now())
            } else {
                LocalDateTime.of(chooseDate, chooseTime)
            }
            Log.d("","选中的时间为：$chooseDateTime")
            dateTimeClick.onSaveDateTimeClick(chooseDateTime!!)
            dialog?.dismiss()
        }
​
        // 注册
        EventBus.getDefault().register(this)
        return curView
    }
​
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        initWindow()
    }
​
    override fun onDestroy() {
        EventBus.getDefault().unregister(this)  // 注销
        super.onDestroy()
    }
​
    fun initWindow() {
        val window = dialog?.window
        window?.attributes?.width = 800 // 单位px
        window?.attributes?.height = 1450 // 单位px
        window?.attributes?.gravity = Gravity.CENTER    // 居中
    }
​
    fun getChooseTime() = chooseDateTime
​
​
    @Subscribe(threadMode = ThreadMode.MAIN)
    fun receiveDateTime(dateTimeMessage: DateTimeMessage) {
        if (dateTimeMessage.localDate != null) {
            chooseDate = dateTimeMessage.localDate!!
        }
        if (dateTimeMessage.localTime != null) {
            chooseTime = dateTimeMessage.localTime!!
        }
        Log.d("","接收到event消息，chooseDate=$chooseDate,chooseTime=$chooseTime")
    }
​
}

3.2.2 提醒功能设计

提醒功能是采用WorkerManager + AlarmManager实现的，实现流程如下：、

1. 当选择好时间保存后就会提交一次性的后台任务；
2. Worker后台接收到任务后，检查提醒时间，没过期的话检查当前任务是否已经存在闹钟，有的话则取消；
3. 使用AlarmManager设置闹钟，保存当前任务和闹钟id的关系，方便下一次设置时取消该闹钟；
4. 保存下一个闹钟的提醒id，防止PendingIntent 的requestCode重复导致任务提醒失败。

实现如下：

class RemindWorker(context: Context, params: WorkerParameters) : Worker(context, params)  {
​
    companion object {
        val Tag = "RemindWorker"
    }
​
    private lateinit var alarmManager: AlarmManager
​
    @RequiresApi(Build.VERSION_CODES.S)
    override fun doWork(): Result {
        val taskByte = inputData.getByteArray(Constants.TASK_BYTE)
        val task = taskByte?.toObject() as Task
        val projectName = inputData.getString(Constants.PROJECT_NAME)
        alarmManager = applicationContext.getSystemService(Context.ALARM_SERVICE) as AlarmManager
​
        Log.d(Tag,"需要提醒的任务为：task=$task, projectName=$projectName")
        if (LocalDateTime.now().isBefore(task.remindTime)) { // 未执行，发起广播
            alarmTask(task, projectName)
        }
​
        return Result.success()
    }
​
    private fun alarmTask(task: Task, projectName: String?) {
        val bundle = Bundle()
        bundle.putByteArray(Constants.TASK, task.toByteArray())
        bundle.putString(Constants.PROJECT_NAME, projectName)
        val intent = Intent(applicationContext, RemindAlarmReceiver::class.java).apply {
            putExtras(bundle)
        }
        val oldAlarmId = Repository.getInteger4Broad(task.id.toString())   // 找到旧的请求id，如果有值的话说明需要重设，取消旧闹钟
        var pi : PendingIntent
        if (oldAlarmId != 0 && LocalDateTime.now().isAfter(task.remindTime)) {
            // 取消闹钟，重设
            pi = PendingIntent.getBroadcast(applicationContext, oldAlarmId, intent, 0)
            alarmManager.cancel(pi)
        }
        var alarmId = Repository.getInteger4Alarm(Constants.ALARM_ID, 0)
        pi = PendingIntent.getBroadcast(applicationContext, alarmId, intent, 0)
        val triggerAtMillis = task.remindTime!!.atZone(ZoneId.systemDefault()).toInstant().toEpochMilli()
        alarmManager.set(AlarmManager.RTC_WAKEUP, triggerAtMillis , pi)
​
        Repository.setInteger4Broad(task.id.toString(), alarmId)
        Repository.setInteger4Alarm(Constants.ALARM_ID, ++alarmId)
        Log.d(Tag,
            "闹钟设置成功;taskName=${task.name};remindTime=${task.remindTime};;now=${System.currentTimeMillis()}"
        )
    }
​
}

闹钟时间到了后，通过broadcast广播。所以还需要用Recevier去接收，接收到广播后。发起前台通知即实现了任务提醒功能。

class RemindAlarmReceiver: BroadcastReceiver() {
​
    private val channelId = "remind"
    private val channelName = "任务提醒"
​
    override fun onReceive(context: Context, intent: Intent) {
        Log.d("RemindAlarmReceiver", "请求收到了.")
        val taskByteArray = intent.getByteArrayExtra(Constants.TASK)
        val task = taskByteArray?.toObject() as Task
        val projectName = intent.getStringExtra(Constants.PROJECT_NAME)
        Log.d("RemindAlarmReceiver","接收到任务 task=$task,projectName=$projectName")
        val manager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        // 创建渠道
        // Android8.0 以上才有下面的API
        val channel = NotificationChannel(channelId, channelName, NotificationManager.IMPORTANCE_DEFAULT)
        manager.createNotificationChannel(channel)
        
        val intent = Intent(context, EditTaskActivity::class.java).apply {
                putExtra(Constants.TASK, task)
                putExtra(Constants.PROJECT_NAME, projectName)
                setPackage("com.example.mytodo")
          }
           val alarmId = Repository.getAndSet4Alarm(Constants.ALARM_ID, 0)
           val pi = PendingIntent.getActivity(context, alarmId, intent, PendingIntent.FLAG_IMMUTABLE)
           val notification = NotificationCompat.Builder(context, channelId)   // 必须传入已经创建好的渠道ID
                .setContentTitle("提醒")
                .setContentText(task.name)
                .setSmallIcon(R.drawable.todo)
                .setColor(Color.BLUE)
                .setBadgeIconType(NotificationCompat.BADGE_ICON_SMALL)
                .setContentIntent(pi)       // 设置内容点击的Intent
                .setAutoCancel(true)        // 点击后自动关闭
                .build()
​
           manager.notify(1, notification)
           Log.d("RemindAlarmReceiver", "通知发送成功；task=$task")
    }
}

搜索功能

搜索功能的UI跟任务列表的UI大体相似，只是多了一个搜索栏。前面将任务列表fragment化了，直接复用。

实现简单就不说了。

最后

这是本人在学完Android后搞得第一个练手项目，其中很多编码方式不一定规范，有些功能也未实现（如帐号管理，任务云同步，项目可移动，任务可重新分组，任务可细分步骤等功能）。

想说下Kotlin真的好用hh（比起Java)，比如扩展函数的特性。在这个app开发中，有个功能是当编辑框出现的时候，要自动弹出输入法。这里直接用扩展函数把View扩展，EditText这个组件就能直接用了，真方便。

/**
 * 显示软键盘
 * postDelayed：避免界面还没绘制完毕就请求焦点导致不弹出键盘
 */
fun View.showSoftInput(flags: Int = InputMethodManager.SHOW_IMPLICIT) {
    postDelayed({
        requestFocus()
        val inManager = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        inManager.showSoftInput(this, flags)
    },100)
}
​
/**
 * 隐藏软键盘
 */
fun View.hideSoftInputFromWindow(flags: Int = 0) {
    val inManager = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
    inManager.hideSoftInputFromWindow(this.windowToken, flags)
}
​
// 直接调用，看起来真优雅
editTaskName.showSoftInput()

Android 学习笔录

Android 性能优化篇：https://qr18.cn/FVlo89
Android 车载篇：https://qr18.cn/F05ZCM
Android 逆向安全学习笔记：https://qr18.cn/CQ5TcL
Android Framework底层原理篇：https://qr18.cn/AQpN4J
Android 音视频篇：https://qr18.cn/Ei3VPD
Jetpack全家桶篇（内含Compose）：https://qr18.cn/A0gajp
Kotlin 篇：https://qr18.cn/CdjtAF
Gradle 篇：https://qr18.cn/DzrmMB
OkHttp 源码解析笔记：https://qr18.cn/Cw0pBD
Flutter 篇：https://qr18.cn/DIvKma
Android 八大知识体：https://qr18.cn/CyxarU
Android 核心笔记：https://qr21.cn/CaZQLo
Android 往年面试题锦：https://qr18.cn/CKV8OZ
2023年最新Android 面试题集：https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题：https://qr18.cn/FTlyCJ
音视频面试题锦：https://qr18.cn/AcV6Ap