Android开发：如何实现单行Calendar View并自定义匹配示例图样式

好的，我来帮你搞定这两个问题——实现单行横向的日历视图，以及自定义样式匹配你的示例图。下面分两部分详细说明：

一、实现单行横向Calendar View #

原生的CalendarView是全屏式的，没法直接做单行，所以我们有两种主流实现方式，推荐用第一种，灵活性和复用性都更好：

方法1：用RecyclerView实现横向滚动日期列表 #

这是最常用的方案，步骤清晰且易扩展：

1. 添加横向RecyclerView到布局

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/horizontalCalendarRv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    android:scrollbars="none" /> <!-- 可选：隐藏滚动条 -->

2. 创建日期Item的布局
   我们做一个包含日期数字和星期的简单Item，你可以根据示例图调整布局结构：

<!-- res/layout/item_calendar_date.xml -->
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:gravity="center">

    <TextView
        android:id="@+id/tvDay"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:background="@drawable/calendar_date_bg" /> <!-- 背景选择器 -->

    <TextView
        android:id="@+id/tvWeek"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textColor="@color/gray_600"
        android:textSize="12sp" />
</LinearLayout>

3. 编写日期背景的选择器（处理选中状态）
   创建res/drawable/calendar_date_bg.xml，用来区分选中和未选中的样式：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="oval">
            <solid android:color="@color/your_selected_color" /> <!-- 选中时的背景色 -->
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" /> <!-- 默认透明背景 -->
        </shape>
    </item>
</selector>

4. 编写RecyclerView的Adapter
   负责绑定日期数据，处理选中状态：

class CalendarDateAdapter(
    private val dateList: List<DateModel>,
    private val onDateClick: (DateModel) -> Unit
) : RecyclerView.Adapter<CalendarDateAdapter.ViewHolder>() {

    data class DateModel(
        val day: String,
        val week: String,
        val date: Calendar,
        var isSelected: Boolean = false
    )

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvDay: TextView = itemView.findViewById(R.id.tvDay)
        val tvWeek: TextView = itemView.findViewById(R.id.tvWeek)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val model = dateList[position]
        holder.tvDay.text = model.day
        holder.tvWeek.text = model.week
        holder.tvDay.isSelected = model.isSelected

        // 处理点击事件，切换选中状态
        holder.itemView.setOnClickListener {
            dateList.forEach { it.isSelected = false }
            model.isSelected = true
            notifyDataSetChanged()
            onDateClick(model)
        }
    }

    override fun getItemCount() = dateList.size
}

5. 在Activity/Fragment中生成日期数据并初始化RecyclerView
   这里以生成最近30天的日期为例，你可以根据需求调整范围：

private fun initCalendar() {
    val calendarList = mutableListOf<CalendarDateAdapter.DateModel>()
    val currentCalendar = Calendar.getInstance()

    for (i in 0 until 30) {
        val day = currentCalendar.get(Calendar.DAY_OF_MONTH).toString()
        val week = when (currentCalendar.get(Calendar.DAY_OF_WEEK)) {
            Calendar.SUNDAY -> "周日"
            Calendar.MONDAY -> "周一"
            Calendar.TUESDAY -> "周二"
            Calendar.WEDNESDAY -> "周三"
            Calendar.THURSDAY -> "周四"
            Calendar.FRIDAY -> "周五"
            Calendar.SATURDAY -> "周六"
            else -> ""
        }
        // 默认选中今天的日期
        val isSelected = currentCalendar.timeInMillis == Calendar.getInstance().timeInMillis
        calendarList.add(CalendarDateAdapter.DateModel(day, week, currentCalendar.clone() as Calendar, isSelected))
        currentCalendar.add(Calendar.DAY_OF_MONTH, 1)
    }

    val adapter = CalendarDateAdapter(calendarList) { selectedDate ->
        // 处理日期选中后的逻辑，比如显示该日期的事件
        Toast.makeText(this, "选中了${selectedDate.day}号", Toast.LENGTH_SHORT).show()
    }
    binding.horizontalCalendarRv.adapter = adapter

    // 自动滚动到选中的日期（今天）
    val todayPosition = calendarList.indexOfFirst { it.isSelected }
    if (todayPosition != -1) {
        binding.horizontalCalendarRv.scrollToPosition(todayPosition)
    }
}

方法2：自定义HorizontalScrollView封装 #

如果不想用RecyclerView，也可以自定义一个View继承自HorizontalScrollView，内部用LinearLayout动态添加日期TextView。不过这种方式没有复用机制，日期多了会影响性能，所以更推荐RecyclerView方案。

二、自定义样式匹配示例图 #

虽然看不到你的示例图，但我整理了常见的样式自定义需求和实现方法，你可以对应调整：

• 选中日期的特殊样式：通过上面的背景选择器可以设置圆角、背景色，还可以给选中的日期文本改颜色（在Adapter的onBindViewHolder中判断设置）
• 周末日期高亮：在生成日期数据时，判断如果是周六/周日，给对应的TextView设置特殊颜色（比如红色）
• 添加月份标题：在RecyclerView上方加一个TextView，显示当前月份，比如"2024年8月"
• 日期下方的标记：如果示例图中有圆点/图标标记特定日期，可以在Item布局中添加一个ImageView，在Adapter中根据条件显示/隐藏
• 调整间距和大小：通过Item布局的padding、margin，以及TextView的textSize来匹配示例图的排版
• 整体背景：给RecyclerView的父布局设置背景色或者背景图，和示例图保持一致

小提示 #

• 处理本地化：如果你的App面向多地区用户，建议用DateTimeFormatter（Java 8+）或者SimpleDateFormat来格式化日期和星期，适配不同地区的显示习惯
• 性能优化：如果需要显示一年甚至更久的日期，可以做分页加载，比如每次只加载前后15天的数据，滚动时再动态更新
• 触摸反馈：给Item布局添加android:foreground="?attr/selectableItemBackgroundBorderless"，让点击时有波纹效果，提升用户体验

内容的提问来源于stack exchange，提问作者BlackAndWhite