swift 倒计时库倒计时days

转载

小咪咪 2023-12-04 21:13:42

文章标签 swift 倒计时库 android java apache xml 文章分类 Swift 移动开发

声明：本App仅用于学习，禁止用于一切商业用途。

之前复习了一下Android的基础知识，自己又没有完全开发过一个能用的App，都是写一些小Demo。于是就想写一个简单的App来巩固自己的知识。于是SpecialDay就诞生了。

swift 倒计时库倒计时days_android

一、需求分析

作为一款倒计时的App，最主要的功能就是用户添加提醒事件，然后在App主页面向用户展示事件的剩余天数。

并且有一些事件属于是每年重复或每月重复的事件，用户在添加事件的时候可以选择重复类型。App需要调整重复事件的事件。

对于已有的事件用户也可以进行修改和删除。

二、实现

1.数据库设计

一个事件应该至少有标题，类型(方便后续可分类查看)，日期，重复类型的属性，所以数据库设计如下

列名	类型	注释
id	integer	主键，自增
title	text	标题
type	integer	事件类型，对应于type表格
event_date	date	事件日期
repeat	integer	重复类型，0-不重复，1-每年重复，2-每月重复

同时需要一个type表格存储事件类型

列名	类型	注释
id	integer	主键
name	text	类型名称

2.界面设计

2.1 主页面

在主页面里，需要展示的是标题栏和事件列表。

标题栏用一个RelativeLayout实现即可，这里排列的是三张图片，源于网络。而事件列表的展示我选用了RecyclerView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/main_menu"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        tools:ignore="UselessParent"
        android:gravity="center">

        <ImageView
            android:id="@+id/setting"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@drawable/setting"
            android:layout_gravity="center_vertical"
            android:background="@color/white"/>

        <ImageView
            android:id="@+id/title"
            android:layout_width="150dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/title"
            android:layout_toEndOf="@id/setting"
            android:layout_toRightOf="@id/setting" />


        <ImageView
            android:id="@+id/add"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/add"
            android:layout_toRightOf="@id/title"
            android:layout_toEndOf="@id/title"
            />
    </RelativeLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_menu">

    </androidx.recyclerview.widget.RecyclerView>

</RelativeLayout>

而RecyclerView具体的item也是用RelativeLayout和LinearLayout搭配使用实现布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="10dp"
    android:layout_height="wrap_content">


    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginBottom="15dp"
        android:src="@drawable/calendar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            >

            <LinearLayout
                android:id="@+id/date_layout"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:text="123"
                    android:textSize="20sp"
                    android:textColor="@color/black"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"/>

                <TextView
                    android:id="@+id/tv_date"
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:text="2021-01-04"
                    android:textSize="15sp"
                    android:paddingLeft="10dp"/>


            </LinearLayout>


            <TextView
                android:id="@+id/tv_countDown"
                android:layout_width="180dp"
                android:layout_height="match_parent"
                android:paddingRight="10dp"
                android:paddingTop="5dp"
                android:text="就在今天"
                android:textSize="20dp"
                android:gravity="end"
                android:paddingVertical="10dp"
                android:textColor="#3FBFBF"
                android:layout_toRightOf="@id/date_layout"
                android:layout_toEndOf="@id/date_layout"/>


        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="5dp"
            android:background="#000000"
            android:layout_marginStart="5dp" />

    </LinearLayout>


</LinearLayout>

这样主页面的布局就完成了。

2.2 添加事件页面

先看一下效果。

swift 倒计时库倒计时days_swift 倒计时库_02

同样是通过RelativeLayout和LinearLayout就能实现这个布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".AddEventActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        tools:ignore="UselessParent">

        <ImageView
            android:id="@+id/icon_return"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@drawable/icon_return"
            android:layout_gravity="center_vertical"
            android:background="@color/white"/>

        <ImageView
            android:id="@+id/title"
            android:layout_width="150dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/title"
            android:layout_toRightOf="@id/icon_return"
            android:layout_toEndOf="@id/icon_return"/>


        <ImageView
            android:id="@+id/submit"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/submit"
            android:layout_toRightOf="@id/title"
            android:layout_toEndOf="@id/title"
            />
    </RelativeLayout>

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="50dp"
        >

        <TextView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:text="标题"
            android:textSize="15sp"
            android:gravity="center"
            android:textColor="@color/black"/>

        <EditText
            android:id="@+id/add_et_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:layout_marginRight="40dp"
            android:layout_marginEnd="40dp"
            android:gravity="end"
            android:maxLines="1"
            android:maxLength="15"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:text="日期"
            android:textSize="15sp"
            android:gravity="center"
            android:textColor="@color/black"/>

        <TextView
            android:id="@+id/add_tv_date"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:layout_marginRight="40dp"
            android:layout_marginEnd="40dp"
            android:gravity="end"
            android:maxLines="1"
            android:textSize="15sp"
            android:paddingTop="8dp"
            android:text="2022-1-4"
            android:textColor="@color/black"
            />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:text="分类"
            android:textSize="15sp"
            android:gravity="center"
            android:textColor="@color/black"/>

        <Spinner
            android:id="@+id/select_type"
            android:layout_width="140dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="140dp"
            android:layout_marginStart="140dp"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:text="重复"
            android:textSize="15sp"
            android:gravity="center"
            android:textColor="@color/black"/>

        <Spinner
            android:id="@+id/select_repeat"
            android:layout_marginLeft="140dp"
            android:layout_width="140dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="140dp" />

    </LinearLayout>

    
</LinearLayout>

3.具体实现

3.1 EventItemAdapter

RecyclerView需要Adapter去填充数据，这里Adapter主要做的事情就是把数据绑定到UI控件上去。

class EventItemAdapter(private val list: List<EventItem>) : RecyclerView.Adapter<EventItemAdapter.ItemViewHolder>() {


    inner class ItemViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val icon: ImageView = view.findViewById(R.id.iv_icon)
        val title: TextView = view.findViewById(R.id.tv_title)
        val date: TextView = view.findViewById(R.id.tv_date)
        val countDown: TextView = view.findViewById(R.id.tv_countDown)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.special_day_item, parent, false)
        return ItemViewHolder(view)
    }

    @SuppressLint("SetTextI18n", "SimpleDateFormat")
    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val event = list[position]
        holder.title.text = event.title
        holder.date.text = event.date
        val day = DateUtil.getCountDown(event.date)
        if (day > 0) {
            holder.countDown.text = "还有 $day 天"
            holder.countDown.setTextColor(android.graphics.Color.BLUE)
        } else if (day == 0) {
            holder.countDown.text = "就在今天!"
        } else if (day < -365){
            holder.countDown.text = "已经过了 ${abs(day/365)} 年"
            holder.countDown.setTextColor(android.graphics.Color.RED)
        } else {
            holder.countDown.text = "已经过了 ${abs(day)} 天"
            holder.countDown.setTextColor(android.graphics.Color.RED)
        }
    }

    override fun getItemCount(): Int = list.size
    

}

其中需要用到一个工具类去计算目标时间和系统时间相差的天数。由于用毫秒相减的方式对于需求来说并不适合，这里计算的方法是硬算有多少天。

@SuppressLint("SimpleDateFormat")
    fun getCountDown(date: String): Int {
        val nowYear = getYear()
        val nowDay = getDayOfYear()
        val target = Calendar.getInstance()
        val ft = SimpleDateFormat("yyyy-MM-dd")
        val targetDate:Date?
        try {
            targetDate = ft.parse(date)!!
        }catch (e: ParseException) {
            e.printStackTrace()
            return 0
        }
        target.time = targetDate
        val targetYear = target.get(Calendar.YEAR)
        val targetDay = target.get(Calendar.DAY_OF_YEAR)
        if (nowYear == targetYear) {
            return targetDay - nowDay
        } else if (targetYear < nowYear) {
            return (targetYear - nowYear) * 365
        } else {
            var days = 0
            for (i in nowYear..targetYear) {
                if (i == nowYear) {
                    days += if(GregorianCalendar().isLeapYear(nowYear)) {
                        365 - nowDay
                    } else {
                        366 - nowDay
                    }
                } else if (i == targetYear) {
                    days += targetDay
                } else {
                    days += if(GregorianCalendar().isLeapYear(i)) {
                        365
                    } else {
                        366
                    }
                }
            }
            return days
        }
    }

3.2 MainActivity

这是整个app的主界面。他要做的工作如下（这里其实应该使用MVVM的方式，但是因为还没有深入了解过MVVM框架，这些事暂时由Activity完成）：

在启动app的时候，判断一下是否有需要修改的事件日期。比如昨天的一个事件是每月重复，就需要先更新。
然后去数据库里读取数据，把数据传递给Adapter。
给控件添加点击事件

class MainActivity : AppCompatActivity() , View.OnClickListener{

    var width: Int = 0
    lateinit var myHelper: MyDatabaseHelper
    private val databaseName = "specialDay.db"
    private lateinit var db: SQLiteDatabase

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.activity_main)
        setting.setOnClickListener(this)
        add.setOnClickListener(this)
        width = DeviceUtils.getScreenWidth(this)
        myHelper = MyDatabaseHelper(this, databaseName, 1)
        db = myHelper.writableDatabase
        checkRepeat()
        initContent()
    }

    override fun onClick(v: View) {
        when (v.id) {
            R.id.setting -> {
                val sql = "delete from event"
                db.execSQL(sql)
                Toast.makeText(this, "11111", Toast.LENGTH_SHORT).show()
                Log.d("MainActivity", width.toString())
            }
            R.id.add -> {
                val intent = Intent(this, AddEventActivity::class.java)
                startActivity(intent)
                finish()
            }
        }
    }

    private fun initContent() {
        val fakeData = getData()
        Log.d("MainActivity", fakeData.size.toString())
        val adapter = EventItemAdapter(fakeData)
        val manager = LinearLayoutManager(this)
        rv_content.layoutManager = manager
        rv_content.adapter = adapter
    }

    @SuppressLint("SimpleDateFormat")
    private fun getData(): List<EventItem>{

        val sql = "select * from event order by event_date"
        val cursor = db.rawQuery(sql, null)
        val expired = ArrayList<EventItem>()
        val unExpired = ArrayList<EventItem>()
        val ft = SimpleDateFormat("yyyy-MM-dd")
        if (cursor.moveToFirst()) {
            val calendar = Calendar.getInstance()
            do {
                val id = cursor.getInt(0)
                val title = cursor.getString(1)
                val type = cursor.getInt(2)
                val date = cursor.getString(3)
                val time = ft.parse(date)!!
                calendar.time = time
                val repeat = cursor.getInt(4)
                val year = calendar.get(Calendar.YEAR)
                val day = calendar.get(Calendar.DAY_OF_YEAR)
                if (year < DateUtil.getYear() ||
                        (year == DateUtil.getYear() && day < DateUtil.getDayOfYear())) {
                    expired.add(0, EventItem(id, title, type, date, repeat))
                } else {
                    unExpired.add(EventItem(id, title, type, date, repeat))
                }
            }while (cursor.moveToNext())
        }
        cursor.close()
        return unExpired + expired
    }

    @SuppressLint("SimpleDateFormat")
    private fun checkRepeat() {
        val nowDate = "${DateUtil.getYear()}-${DateUtil.getMonth()}-${DateUtil.getDayOfMonth()}"
        val sql = "select * from event where event_date < ? and repeat != 0"
        val db = myHelper.writableDatabase
        val cursor = db.rawQuery(sql, arrayOf(nowDate))
        if (cursor.moveToFirst()) {
            val calendar = Calendar.getInstance()
            val ft = SimpleDateFormat("yyyy-MM-dd")
            do {
                val id = cursor.getInt(0)
                val repeat = cursor.getInt(4)
                Log.d("MainActivity", repeat.toString())
                val date = cursor.getString(3)
                Log.d("MainActivity", "date:   $date")
                Log.d("MainActivity", "id:   $id")
                val time = ft.parse(date)!!
                calendar.time = time
                var year = calendar.get(Calendar.YEAR)
                var month = calendar.get(Calendar.MONTH) + 1
                val day = calendar.get(Calendar.DAY_OF_MONTH)
                if (repeat == 1) {
                    year += 1
                } else if (repeat == 2) {
                    month += 1
                    Log.d("MainActivity", "月份+1")
                }
                val newDate = "$year-$month-$day"
                Log.d("MainActivity", "newDate   $newDate")
                val updateSql = "update event set event_date = ? where id = ?"
                db.execSQL(updateSql, arrayOf(newDate, id))
            } while (cursor.moveToNext())
        }
        cursor.close()
    }

3.3 AddEventActivity

添加事件方面，有选择日期和选择类型、是否重复的选项。

3.3.1 选择日期

选择日期主要用到了DatePicker控件，然后利用AlertDialog弹出一个对话框的形式，效果如下：

swift 倒计时库倒计时days_xml_03

首先，我们要先获取当前系统时间，用全局变量存储。

private fun initDateTime() {
        year = DateUtil.getYear()
        month = DateUtil.getMonth()
        day = DateUtil.getDayOfMonth()
    }

然后添加点击事件弹出对话框。

private fun chooseDate() {
        val dateStr = StringBuffer()
        val dialogView = View.inflate(this, R.layout.dialog_date, null)
        val datePicker: DatePicker = dialogView.findViewById(R.id.datePicker)!!
        datePicker.init(year, month - 1, day, this)
        AlertDialog.Builder(this).apply {
            setPositiveButton("设置") {dialog, _ ->
                mDate = dateStr.append(year.toString()).append("-")
                    .append(month.toString()).append("-").append(day.toString()).toString()
                add_tv_date.text = mDate
                dialog.dismiss()
            }
            setNegativeButton("取消") {dialog, _ ->
                dialog.dismiss()
            }
            setTitle("选择日期")
            create()
            setView(dialogView)
            show()
        }
    }

同时还需要实现接口DatePicker.OnDateChangedListener，重写方法onDateChanged

override fun onDateChanged(view: DatePicker?, year: Int, monthOfYear: Int, dayOfMonth: Int) {
        this.year = year
        this.month = monthOfYear + 1
        this.day = dayOfMonth
    }

3.3.2 选择类型和是否重复

这两个都是用了下拉框Spinner实现。

后续类型应该是从数据库中读取，方便用户自定义类型。不过这里一开始是写死的。在arrays.xml里写死了两个Spinner的数据。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <string-array name="repeat">
        <item>不重复</item>
        <item>每年</item>
        <item>每月</item>
    </string-array>

    <string-array name="type">
        <item>事件</item>
        <item>生日</item>
        <item>爱情</item>
        <item>生活</item>
        <item>节日</item>
        <item>娱乐</item>
        <item>学习</item>
        <item>工作</item>
    </string-array>
</resources>

然后写两个内部类实现接口AdapterView.OnItemSelectedListener来监听选择的内容

inner class RepeatSelectListener: AdapterView.OnItemSelectedListener {
        override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
            repeat = position
        }

        override fun onNothingSelected(parent: AdapterView<*>?) {
            repeat = 0
        }
    }

    inner class TypeSelectListener: AdapterView.OnItemSelectedListener {
        override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
            mType = position
        }

        override fun onNothingSelected(parent: AdapterView<*>?) {
            mType = 0
        }
    }