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

本文将指导您创建一个自定义日历视图，您可以将其集成到您的Android应用程序中以实现打卡功能。

1. 创建布局文件

首先，我们需要创建三个布局文件：

calendar_view.xml: 此文件定义了日历视图的整体布局，包括月份标题、上一个月/下一个月的按钮以及显示日期的网格视图。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' />

calendar_item.xml: 此文件定义了单个日期单元格的布局，该单元格将显示在网格视图中。xml

circle_background.xml (可选): 此可选文件定义了标记日期的背景可绘制对象。您可以自定义此可绘制对象以实现所需的外观。xml

2. 创建日历视图类

创建一个名为CalendarView的新类，该类扩展了LinearLayout。此类将处理日历逻辑和用户交互。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);    }}

3. 创建日历适配器类

创建一个名为CalendarAdapter的新类，该类扩展了BaseAdapter。此类将负责在网格视图中显示日期。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;