Android自定义日历视图：实现打卡功能

本文将指导您创建一个自定义日历视图，用于在Android应用中显示日历并实现打卡功能。

1. 创建CalendarView类

创建一个名为CalendarView的新类，该类继承自LinearLayout。此类将包含日历视图的逻辑和UI组件。javaimport android.content.Context;import android.graphics.Color;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.AdapterView;import android.widget.GridView;import android.widget.LinearLayout;import android.widget.TextView;

import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Calendar;import java.util.Date;import java.util.HashSet;import java.util.List;import java.util.Locale;import java.util.Set;

public class CalendarView extends LinearLayout { private Context context; private GridView gridView; private TextView tvMonth; private CalendarAdapter adapter; private Calendar currentDate = Calendar.getInstance(); private SimpleDateFormat dateFormat = new SimpleDateFormat('MMMM yyyy', Locale.getDefault()); private Set markedDates = new HashSet<>(); private OnDateClickListener onDateClickListener;

public CalendarView(Context context) {        super(context);        this.context = context;        initialize();    }

public CalendarView(Context context, AttributeSet attrs) {        super(context, attrs);        this.context = context;        initialize();    }

public CalendarView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.context = context;        initialize();    }

private void initialize() {        LayoutInflater inflater = LayoutInflater.from(context);        inflater.inflate(R.layout.calendar_view, this);

    gridView = findViewById(R.id.gridview);        tvMonth = findViewById(R.id.tv_month);

    findViewById(R.id.btn_prev).setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                currentDate.add(Calendar.MONTH, -1);                updateCalendar();            }        });

    findViewById(R.id.btn_next).setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                currentDate.add(Calendar.MONTH, 1);                updateCalendar();            }        });

    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                if (onDateClickListener != null) {                    Date date = (Date) parent.getItemAtPosition(position);                    onDateClickListener.onDateClick(date);                }            }        });

    updateCalendar();    }

public void setOnDateClickListener(OnDateClickListener listener) {        this.onDateClickListener = listener;    }

public void markDate(Date date) {        markedDates.add(date);        adapter.notifyDataSetChanged();    }

private void updateCalendar() {        List<Date> dates = getDates();        adapter = new CalendarAdapter(context, dates, currentDate, markedDates);        gridView.setAdapter(adapter);        tvMonth.setText(dateFormat.format(currentDate.getTime()));    }

private List<Date> getDates() {        List<Date> dates = new ArrayList<>();        Calendar calendar = (Calendar) currentDate.clone();        calendar.set(Calendar.DAY_OF_MONTH, 1);        int firstDayOfWeek = calendar.get(Calendar.DAY_OF_WEEK) - 1;        calendar.add(Calendar.DAY_OF_MONTH, -firstDayOfWeek);

    while (dates.size() < 42) {            dates.add(calendar.getTime());            calendar.add(Calendar.DAY_OF_MONTH, 1);        }

    return dates;    }

public interface OnDateClickListener {        void onDateClick(Date date);    }}

2. 创建CalendarView布局

创建一个名为calendar_view.xml的新布局文件，并将以下代码添加到其中。此布局将显示日历的月份、年份、上一个月和下一个月的按钮以及一个GridView来显示日期。xml

<LinearLayout        android:layout_width='match_parent'        android:layout_height='wrap_content'        android:orientation='horizontal'>

    <Button            android:id='@+id/btn_prev'            android:layout_width='wrap_content'            android:layout_height='wrap_content'            android:text='Prev' />

    <TextView            android:id='@+id/tv_month'            android:layout_width='0dp'            android:layout_height='wrap_content'            android:layout_weight='1'            android:gravity='center'            android:textSize='20sp' />

    <Button            android:id='@+id/btn_next'            android:layout_width='wrap_content'            android:layout_height='wrap_content'            android:text='Next' />

</LinearLayout>

<GridView        android:id='@+id/gridview'        android:layout_width='match_parent'        android:layout_height='wrap_content'        android:numColumns='7'        android:verticalSpacing='1dp'        android:horizontalSpacing='1dp'        android:stretchMode='columnWidth' />

3. 创建CalendarAdapter类

创建一个名为CalendarAdapter的新类，该类继承自BaseAdapter。此适配器将用于在GridView中显示日期。javaimport android.content.Context;import android.graphics.Color;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;

import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.util.List;import java.util.Locale;import java.util.Set;

public class CalendarAdapter extends BaseAdapter { private Context context; private List dates; private Calendar currentDate; private SimpleDateFormat dateFormat = new SimpleDateFormat('dd', Locale.getDefault()); private Set markedDates;

public CalendarAdapter(Context context, List<Date> dates, Calendar currentDate, Set<Date> markedDates) {        this.context = context;        this.dates = dates;        this.currentDate = currentDate;        this.markedDates = markedDates;    }

@Override    public int getCount() {        return dates.size();    }

@Override    public Object getItem(int position) {        return dates.get(position);    }

@Override    public long getItemId(int position) {        return position;    }

@Override    public View getView(int position, View convertView, ViewGroup parent) {        View view = convertView;

    if (view == null) {            LayoutInflater inflater = LayoutInflater.from(context);            view = inflater.inflate(R.layout.calendar_item, parent, false);        }

    TextView tvDate = view.findViewById(R.id.tv_date);        Date date = dates.get(position);        tvDate.setText(dateFormat.format(date));

    if (date.getMonth() != currentDate.getTime().getMonth()) {            tvDate.setTextColor(Color.GRAY);        } else {            tvDate.setTextColor(Color.BLACK);        }

    if (markedDates.contains(date)) {            tvDate.setBackgroundResource(R.drawable.circle_background); // 设置已打卡日期的背景样式        } else {            tvDate.setBackground(null); // 清除未打卡日期的背景样式        }

    return view;    }}

4. 创建Calendar Item布局

创建一个名为calendar_item.xml的新布局文件，并将以下代码添加到其中。此布局将用于GridView中的每个日期项。xml

5. 在主活动中使用CalendarView

在主活动的布局文件中添加CalendarView控件：xml<com.example.myapplication.CalendarView android:id='@+id/calendar_view' android:layout_width='match_parent' android:layout_height='wrap_content' />

然后在主活动的Java代码中找到CalendarView控件并设置监听器：javaCalendarView calendarView = findViewById(R.id.calendar_view);calendarView.setOnDateClickListener(new CalendarView.OnDateClickListener() { @Override public void onDateClick(Date date) { handleDateClick(date); }});

在handleDateClick()方法中处理日期点击事件，例如更新UI、保存选中的日期等：javaprivate void handleDateClick(Date date) { // 更新UI SimpleDateFormat dateFormat = new SimpleDateFormat('yyyy-MM-dd', Locale.getDefault()); String selectedDate = dateFormat.format(date); textView.setText(selectedDate);

// 保存选中的日期    // ...}

最后，在主活动中调用markDate()方法来标记已打卡的日期：javaCalendarView calendarView = findViewById(R.id.calendar_view);calendarView.markDate(new Date()); // 标记今天为已打卡

通过以上步骤，你就可以在CalendarView中实现打卡功能了。已打卡的日期会以特定的样式显示在日历中，未打卡的日期则没有特殊样式。你可以根据需要来自定义已打卡日期的样式。