Android实现简单日历

叶落呱呱

已于 2022-11-09 17:44:04 修改

阅读量5.5k

点赞数 16

文章标签： android java

于 2022-06-01 19:21:54 首次发布

本文链接：https://blog.csdn.net/weixin_43955048/article/details/125087407

版权

Android实现简单打卡日历

日历
GitHub地址

日历

主要通过ViewPager2+GridView实现打卡日历

需求

服务器记录用户一年打卡状态,返回数据给客户端,客户端根据数据来显示用户近一年打卡日历.并且日历高度要自适应

解决方法

1.ViewPager2高度不能自适应,需要测量ViewPager2当前位置的高度,然后再进行设置高度。
2.GridView的高度不能自适应,日历肯定是7列,计算出有多少行,用行数*GridView item的高度,得到GridView高度
3.ViewPager2+GridView来日历展示

效果图

在这里插入图片描述

代码实现

activity_main布局

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="39dp">

        <ImageView
            android:id="@+id/arrow_left"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginStart="28dp"
            android:layout_marginTop="12dp"
            android:src="@mipmap/icon_arrow_pink"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <TextView
            android:id="@+id/date_tv"
            android:layout_width="wrap_content"
            android:layout_height="22dp"
            android:layout_marginTop="9dp"
            android:fontFamily="sans-serif-medium"
            android:textColor="#FE6484"
            android:textSize="14dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/arrow_right"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="28dp"
            android:src="@mipmap/icon_arrow_grey"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FFE8E9" />

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="16dp"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="日"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="16dp"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="一"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="16dp"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="二"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="三"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="四"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="五"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="六"
            android:textColor="#FFB3BB"
            android:textSize="12dp"
            android:textStyle="normal" />
    </LinearLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vpContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FFE8E9" />


</LinearLayout>

布局效果图

在这里插入图片描述

MainActivity

数据:
通过Calendar类得到当天年月日,通过 calendar.add(Calendar.MONTH, -i) 并且通过ArrayList来记录1年内的Calendar

public class MainActivity extends AppCompatActivity {
    private ViewPager2 viewPager2;
    private CalendarAdapter calendarAdapter;
    private TextView dateTv;
    private ImageView arrowLeftImg, arrowRightImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        initData();
    }

    private void init() {
        viewPager2 = findViewById(R.id.vpContainer);
        //viewPager2的适配器
        calendarAdapter = new CalendarAdapter();
        viewPager2.setAdapter(calendarAdapter);
        dateTv = findViewById(R.id.date_tv);
        arrowLeftImg = findViewById(R.id.arrow_left);
        arrowRightImg = findViewById(R.id.arrow_right);
    }

    private void initData() {
        List<Calendar> data = new ArrayList<>();
        //
        for (int i = 11; i >= 0; i--) {
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.MONTH, -i);
            data.add(calendar);
        }

        calendarAdapter.refreshData(data);
        viewPager2.setCurrentItem(11, false);
        dateTv.setText(data.get(data.size() - 1).get(Calendar.YEAR) + "-" + (data.get(data.size() - 1).get(Calendar.MONTH) + 1));

        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                int year = data.get(position).get(Calendar.YEAR);
                int month = data.get(position).get(Calendar.MONTH) + 1;
                dateTv.setText(year + "-" + month);
                RecyclerView recyclerView = (RecyclerView) viewPager2.getChildAt(0);
                View view = recyclerView.getLayoutManager().findViewByPosition(position);
                if (view != null)
                    updatePagerHeightForChild(view, viewPager2);

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }

            public void updatePagerHeightForChild(View view, ViewPager2 pager) {
                view.post(() -> {
                    int weightMeasureSpec = View.MeasureSpec.makeMeasureSpec(view.getWidth(), View.MeasureSpec.EXACTLY);
                    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    view.measure(weightMeasureSpec, heightMeasureSpec);
                    if (pager.getLayoutParams().height != view.getMeasuredHeight()) {
                        ViewGroup.LayoutParams layoutParams = pager.getLayoutParams();
                        layoutParams.height = view.getMeasuredHeight();
                        pager.setLayoutParams(layoutParams);
                    }
                });

            }
        });
        
        
        arrowRightImg.setOnClickListener(V -> {
            arrowRightImg.post(() -> {
                if (viewPager2.getCurrentItem() != 11)
                    viewPager2.setCurrentItem(viewPager2.getCurrentItem() + 1, false);
            });
        });
        arrowLeftImg.setOnClickListener(V -> {
            arrowLeftImg.post(() -> {
                if (viewPager2.getCurrentItem() != 0)
                    viewPager2.setCurrentItem(viewPager2.getCurrentItem() - 1, false);
            });
        });
       

    }

测量ViewPager2的高度
ViewPager2的主要通过RecyclerView进行实现,通过得到RecyclerView的位置,来得到相应ViewPager2当前位置的View

RecyclerView recyclerView = (RecyclerView) viewPager2.getChildAt(0);
View view = recyclerView.getLayoutManager().findViewByPosition(position);

通过对ViewPager2监听,来得到当前位置j的view,然后要等view绘制完毕,来计算高度

    public void updatePagerHeightForChild(View view, ViewPager2 pager) {
                view.post(() -> {
                    int weightMeasureSpec = View.MeasureSpec.makeMeasureSpec(view.getWidth(), View.MeasureSpec.EXACTLY);
                    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    view.measure(weightMeasureSpec, heightMeasureSpec);
                    if (pager.getLayoutParams().height != view.getMeasuredHeight()) {
                        ViewGroup.LayoutParams layoutParams = pager.getLayoutParams();
                        layoutParams.height = view.getMeasuredHeight();
                        pager.setLayoutParams(layoutParams);
                    }
                });

            }

ViewPager2的适配器


public class CalendarAdapter extends RecyclerView.Adapter<CalendarView> {
    private List<Calendar> calendar = new ArrayList<>();

    public CalendarAdapter() {

    }

    @NonNull
    @Override
    public CalendarView onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new CalendarView(LayoutInflater.from(parent.getContext()).inflate(R.layout.calender_view, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull CalendarView holder, int position) {
        if (calendar.size() != 0)
            holder.initData(calendar.get(position));
    }

    @Override
    public int getItemCount() {
        return calendar.size();
    }

    public void refreshData(List<Calendar> data) {
        for (int i = 0; i < data.size(); i++) {
            calendar.add(data.get(i));
        }
        notifyDataSetChanged();

    }
}

CalenderView(主要是Grid View）

布局

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

    <GridView
        android:id="@+id/wgvCalendar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="7"
        android:stretchMode="columnWidth" />
</LinearLayout>

逻辑

主要是GridView的处理
主要是通过Calendar得到每个月第一天为星期几和每个月有几天,通过集合对每个月数据进行添加,通过每个月第一天为星期几,来判断需要填充多少天空白数据

    public void initData(Calendar calendar) {
        ArrayList<DateBean> data = new ArrayList<>();
        //获取第一天是星期几然后计算出需要填充的空白数据
        for (int i = 0; i < getMonthOneDayWeek(calendar); i++) {
            //填充空白的
            data.add(new DateBean(0, 0, 0));
        }

        //填充数据
        for (int i = 0; i < getMonthMaxData(calendar); i++) {
            data.add(new DateBean(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH) + 1, i + 1));
        }
        calendarDateAdapter = new CalendarDateAdapter(context, data);
        gridView.setAdapter(calendarDateAdapter);
        setGridViewHeight(gridView, data.size());

    }

    //获取每个月第一天为星期几
    private int getMonthOneDayWeek(Calendar calendar) {
        calendar.set(Calendar.DAY_OF_MONTH, 1);
        return calendar.get(Calendar.DAY_OF_WEEK) - 1;
    }

    //获取当月有几天
    private int getMonthMaxData(Calendar calendar) {
        return calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
    }

DateBean

public class DateBean {
    int year;
    int month;
    int day;

    public DateBean(int year, int month, int day) {
        this.year = year;
        this.month = month;
        this.day = day;

    }

    public int getYear() {
        return year;
    }

    public int getMonth() {
        return month;
    }

    public int getDay() {
        return day;
    }


}

GridView高度测量

通过得到item的高度*行数计算出GridView高度

  public static void setGridViewHeight(GridView gridView, int size) {
        // 获取listview的adapter
        ListAdapter listAdapter = gridView.getAdapter();
        if (listAdapter == null) {
            return;
        }
        int col = 7;
        int totalHeight = 0;
        int hang;
        if (size % col == 0) {
            hang = size / col;
        } else {
            hang = size / col + 1;
        }
        View listItem = listAdapter.getView(8, null, gridView);
        listItem.measure(0, 0);
        totalHeight = listItem.getMeasuredHeight() * hang;
        ViewGroup.LayoutParams params = gridView.getLayoutParams();
        params.height = totalHeight;
        gridView.setLayoutParams(params);
    }

完整代码

public class CalendarView extends RecyclerView.ViewHolder {
    private GridView gridView;
    private int year = 0;
    private int month = 0;
    private CalendarDateAdapter calendarDateAdapter;
    private Context context;


    public CalendarView(@NonNull View itemView) {
        super(itemView);
        gridView = itemView.findViewById(R.id.wgvCalendar);
        gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
        context = itemView.getContext();
        initEvent();
    }

    private void initEvent() {
        gridView.getSelectedItem();
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                for (int i = 0; i < adapterView.getCount(); i++) {
                    View v = adapterView.getChildAt(i);
                    if (i == position) {
                        view.setBackgroundColor(Color.parseColor("#F3F3F3"));
                    } else {
                        v.setBackground(null);
                    }
                }
            }
        });
    }

    public void initData(Calendar calendar) {
        ArrayList<DateBean> data = new ArrayList<>();
        //获取第一天是星期几然后计算出需要填充的空白数据
        for (int i = 0; i < getMonthOneDayWeek(calendar); i++) {
            //填充空白的
            data.add(new DateBean(0, 0, 0));
        }

        //填充数据
        for (int i = 0; i < getMonthMaxData(calendar); i++) {
            data.add(new DateBean(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH) + 1, i + 1));
        }
        calendarDateAdapter = new CalendarDateAdapter(context, data);
        gridView.setAdapter(calendarDateAdapter);
        setGridViewHeight(gridView, data.size());

    }

    //获取第一天为星期几
    private int getMonthOneDayWeek(Calendar calendar) {
        calendar.set(Calendar.DAY_OF_MONTH, 1);
        return calendar.get(Calendar.DAY_OF_WEEK) - 1;
    }

    //获取当月有几天
    private int getMonthMaxData(Calendar calendar) {
        return calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
    }

    public static void setGridViewHeight(GridView gridView, int size) {
        // 获取listview的adapter
        ListAdapter listAdapter = gridView.getAdapter();
        if (listAdapter == null) {
            return;
        }
        int col = 7;
        int totalHeight = 0;
        int hang;
        if (size % col == 0) {
            hang = size / col;
        } else {
            hang = size / col + 1;
        }
        View listItem = listAdapter.getView(8, null, gridView);
        listItem.measure(0, 0);
        totalHeight = listItem.getMeasuredHeight() * hang;
        ViewGroup.LayoutParams params = gridView.getLayoutParams();
        params.height = totalHeight;
        gridView.setLayoutParams(params);
    }


}

GridView的Item的适配器

ublic class CalendarDateAdapter extends BaseAdapter {
    private Context context;
    private List<DateBean> mData;


    public CalendarDateAdapter(Context context, List<DateBean> mData) {
        this.context = context;
        this.mData = mData;
    }

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

    @Override
    public Object getItem(int i) {
        return mData.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder viewHolder = null;
        if (view == null) {
            view = View.inflate(context, R.layout.calender_data_item, null);
            viewHolder = new ViewHolder();
            viewHolder.dateTv = view.findViewById(R.id.date_tv);
            viewHolder.heartState = view.findViewById(R.id.heart_state);
            view.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) view.getTag();
        }
        DateBean data = mData.get(i);
        if (data.getDay() != 0) {
            viewHolder.dateTv.setText("" + data.getDay());
        } else {
            viewHolder.dateTv.setText("");
            viewHolder.heartState.setVisibility(View.GONE);
        }

        //选中日期 表示为今天
        Calendar calendar = Calendar.getInstance();
        if (data.getYear() == calendar.get(Calendar.YEAR) && data.getMonth() == (calendar.get(Calendar.MONTH) + 1) && data.getDay() == calendar.get(Calendar.DAY_OF_MONTH)) {
            viewHolder.dateTv.setText("今天");
        }


        return view;

    }

    static class ViewHolder {
        public TextView dateTv;
        public ImageView heartState;
    }
}

Item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="48dp"
    android:layout_height="62dp">

    <ImageView
        android:id="@+id/heart_state"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@mipmap/nest_icon_calender_heart_highlight"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        />

    <TextView
        android:id="@+id/date_tv"
        android:layout_width="wrap_content"
        android:layout_height="18dp"
        android:textColor="#FFB3BB"
        android:text="5.1"
        android:textSize="14dp"
        android:layout_marginTop="4dp"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>