您的位置: 首页  >  文章  >  仿小米日历功能，Android week view

仿小米日历功能，Android week view

分类: 文章 • 2022-10-04 17:48:33

前言

最近由于项目需求，要做一个仿小米日历的功能，下面显示一天的日程，header以周为单位进行滑动，github上找了很久也没有找到合适的，但找到一相近的开源项目Android-week-view，它不是我们项目所需要的效果，但是它帮我们实现的Event的添加和事件的处理，这让我们省了不少工作，Android-week-view效果如下图


仿小米日历功能，Android week view

      废话不多说，先看看我项目中的效果

仿小米日历功能，Android week view

仿小米日历功能，Android week view

            主要包括两个核心的类，两个定义控件，上面的WeekHeaderView和下面的WeekDayView，都是继承的view，然后计算位置，将上面的week label 和下面的Day text 画上去，通过Scroller和 GestureDetector控制滑动和处理各种事件。废话不多说，直接教大家怎么用。
      首先是布局文件，大家可以通过属性去控件文字的大小，背影颜色、焦点颜色等等。
[html] view plain copy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     tools:context=".MainActivity">  
  7.   
  8.     <TextView  
  9.         android:id="@+id/tv_date"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="30dp"  
  12.         android:background="#455964"  
  13.         android:gravity="center"  
  14.         android:text="2015年1月"  
  15.         android:textColor="#ffffff"  
  16.         android:textSize="16sp"/>  
  17.   
  18.     <com.guojunustb.library.WeekHeaderView  
  19.         android:id="@+id/weekheaderview"  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="wrap_content"  
  22.         android:layout_below="@+id/tv_date"  
  23.         app:firstDayOfWeek2="sunday"  
  24.         app:headerBackgroundColor="#455964"  
  25.         app:headerDayLabelNormalTextColor="#ffffff"  
  26.         app:headerDayLabelTextSize="20sp"  
  27.         app:headerDayLabelTodayTextColor="@android:color/holo_red_dark"  
  28.         app:headerFocusBackgroundColor="#ffffff"  
  29.         app:headerFocusSameDayBackgroundColor="#ffffff"  
  30.         app:headerFocusSameDayTextColor="#000000"  
  31.         app:headerFocusTextColor="#000000"  
  32.         app:headerPaddingTop="20dp"  
  33.         app:headerRowGap="40dp"  
  34.         app:headerWeekLabelTextColor="#ffffff"  
  35.         app:headerWeekLabelTextSize="16sp" />  
  36.   
  37.     <com.guojunustb.library.WeekDayView  
  38.         android:id="@+id/weekdayview"  
  39.         android:layout_width="match_parent"  
  40.         android:layout_height="match_parent"  
  41.         android:layout_below="@+id/weekheaderview"  
  42.         android:visibility="visible"  
  43.         app:columnGap="8dp"  
  44.         app:dayBackgroundColor="#ffffffff"  
  45.         app:eventTextColor="@android:color/white"  
  46.         app:headerColumnBackground="#ffffffff"  
  47.         app:headerColumnPadding="8dp"  
  48.         app:headerColumnTextColor="@color/toolbar_text"  
  49.         app:headerRowBackgroundColor="#465a65"  
  50.         app:headerRowPadding="12dp"  
  51.         app:hourHeight="60dp"  
  52.         app:noOfVisibleDays="1"  
  53.         app:textSize="12sp"  
  54.         app:todayBackgroundColor="#1848adff"  
  55.         app:todayHeaderTextColor="@color/accent" />  
  56. </RelativeLayout>  
         java代码
[java] view plain copy
  1. package com.guojunutb.weekview;  
  2.   
  3. import android.app.Activity;  
  4. import android.graphics.RectF;  
  5. import android.os.Bundle;  
  6. import android.widget.TextView;  
  7. import android.widget.Toast;  
  8.   
  9. import com.guojunustb.library.DateTimeInterpreter;  
  10. import com.guojunustb.library.WeekDayView;  
  11. import com.guojunustb.library.WeekHeaderView;  
  12. import com.guojunustb.library.WeekViewEvent;  
  13.   
  14. import java.text.SimpleDateFormat;  
  15. import java.util.ArrayList;  
  16. import java.util.Calendar;  
  17. import java.util.List;  
  18. import java.util.Locale;  
  19.   
  20. /** 
  21.  * 
  22.  */  
  23. public class MainActivity extends Activity implements WeekDayView.MonthChangeListener,  
  24.         WeekDayView.EventClickListener, WeekDayView.EventLongPressListener,WeekDayView.EmptyViewClickListener,WeekDayView.EmptyViewLongPressListener,WeekDayView.ScrollListener {  
  25.     //view  
  26.     private WeekDayView mWeekView;  
  27.     private WeekHeaderView mWeekHeaderView;  
  28.     private TextView mTv_date;  
  29.   
  30.     List<WeekViewEvent> mNewEvent = new ArrayList<WeekViewEvent>();  
  31.     @Override  
  32.     protected void onCreate(Bundle savedInstanceState) {  
  33.         super.onCreate(savedInstanceState);  
  34.         setContentView(R.layout.activity_main);  
  35.         assignViews();  
  36.     }  
  37.   
  38.     private void assignViews() {  
  39.         mWeekView = (WeekDayView) findViewById(R.id.weekdayview);  
  40.         mWeekHeaderView= (WeekHeaderView) findViewById(R.id.weekheaderview);  
  41.         mTv_date =(TextView)findViewById(R.id.tv_date);  
  42.         //init WeekView  
  43.         mWeekView.setMonthChangeListener(this);  
  44.         mWeekView.setEventLongPressListener(this);  
  45.         mWeekView.setOnEventClickListener(this);  
  46.         mWeekView.setScrollListener(this);  
  47.         mWeekHeaderView.setDateSelectedChangeListener(new WeekHeaderView.DateSelectedChangeListener() {  
  48.             @Override  
  49.             public void onDateSelectedChange(Calendar oldSelectedDay, Calendar newSelectedDay) {  
  50.                 mWeekView.goToDate(newSelectedDay);  
  51.             }  
  52.         });  
  53.         mWeekHeaderView.setScrollListener(new WeekHeaderView.ScrollListener() {  
  54.             @Override  
  55.             public void onFirstVisibleDayChanged(Calendar newFirstVisibleDay, Calendar oldFirstVisibleDay) {  
  56.                 mWeekView.goToDate(mWeekHeaderView.getSelectedDay());  
  57.             }  
  58.         });  
  59.         setupDateTimeInterpreter(false);  
  60.   
  61.     }  
  62.   
  63.   
  64.     /** 
  65.      * Set up a date time interpreter which will show short date values when in week view and long 
  66.      * date values otherwise. 
  67.      * 
  68.      * @param shortDate True if the date values should be short. 
  69.      */  
  70.     private void setupDateTimeInterpreter(final boolean shortDate) {  
  71.         final String[] weekLabels={"日","一","二","三","四","五","六"};  
  72.         mWeekView.setDateTimeInterpreter(new DateTimeInterpreter() {  
  73.             @Override  
  74.             public String interpretDate(Calendar date) {  
  75.                 SimpleDateFormat weekdayNameFormat = new SimpleDateFormat("EEE", Locale.getDefault());  
  76.                 String weekday = weekdayNameFormat.format(date.getTime());  
  77.                 SimpleDateFormat format = new SimpleDateFormat("d", Locale.getDefault());  
  78.                 return format.format(date.getTime());  
  79.             }  
  80.   
  81.             @Override  
  82.             public String interpretTime(int hour) {  
  83.                 return String.format("%02d:00", hour);  
  84.   
  85.             }  
  86.   
  87.             @Override  
  88.             public String interpretWeek(int date) {  
  89.                 if(date>7||date<1){  
  90.                     return null;  
  91.                 }  
  92.                 return weekLabels[date-1];  
  93.             }  
  94.         });  
  95.     }  
  96.   
  97.     @Override  
  98.     public List<WeekViewEvent> onMonthChange(int newYear, int newMonth) {  
  99.   
  100.         // Populate the week view with some events.  
  101.         List<WeekViewEvent> events = new ArrayList<WeekViewEvent>();  
  102.   
  103.         Calendar startTime = Calendar.getInstance();  
  104.         startTime.set(Calendar.HOUR_OF_DAY, 3);  
  105.         startTime.set(Calendar.MINUTE, 0);  
  106.         startTime.set(Calendar.MONTH, newMonth - 1);  
  107.         startTime.set(Calendar.YEAR, newYear);  
  108.         Calendar endTime = (Calendar) startTime.clone();  
  109.         endTime.add(Calendar.HOUR, 1);  
  110.         endTime.set(Calendar.MONTH, newMonth - 1);  
  111.         WeekViewEvent event = new WeekViewEvent(1, "This is a Event!!", startTime, endTime);  
  112.         event.setColor(getResources().getColor(R.color.event_color_01));  
  113.         events.add(event);  
  114.   
  115.         startTime = Calendar.getInstance();  
  116.         startTime.set(Calendar.HOUR_OF_DAY, 3);  
  117.         startTime.set(Calendar.MINUTE, 30);  
  118.         startTime.set(Calendar.MONTH, newMonth - 1);  
  119.         startTime.set(Calendar.YEAR, newYear);  
  120.         endTime = (Calendar) startTime.clone();  
  121.         endTime.set(Calendar.HOUR_OF_DAY, 4);  
  122.         endTime.set(Calendar.MINUTE, 30);  
  123.         endTime.set(Calendar.MONTH, newMonth - 1);  
  124.         event = new WeekViewEvent(10, getEventTitle(startTime), startTime, endTime);  
  125.         event.setColor(getResources().getColor(R.color.event_color_02));  
  126.         events.add(event);  
  127.   
  128.         startTime = Calendar.getInstance();  
  129.         startTime.set(Calendar.HOUR_OF_DAY, 4);  
  130.         startTime.set(Calendar.MINUTE, 20);  
  131.         startTime.set(Calendar.MONTH, newMonth - 1);  
  132.         startTime.set(Calendar.YEAR, newYear);  
  133.         endTime = (Calendar) startTime.clone();  
  134.         endTime.set(Calendar.HOUR_OF_DAY, 5);  
  135.         endTime.set(Calendar.MINUTE, 0);  
  136.         event = new WeekViewEvent(10, getEventTitle(startTime), startTime, endTime);  
  137.         event.setColor(getResources().getColor(R.color.event_color_03));  
  138.         events.add(event);  
  139.   
  140.         startTime = Calendar.getInstance();  
  141.         startTime.set(Calendar.HOUR_OF_DAY, 5);  
  142.         startTime.set(Calendar.MINUTE, 30);  
  143.         startTime.set(Calendar.MONTH, newMonth - 1);  
  144.         startTime.set(Calendar.YEAR, newYear);  
  145.         endTime = (Calendar) startTime.clone();  
  146.         endTime.add(Calendar.HOUR_OF_DAY, 2);  
  147.         endTime.set(Calendar.MONTH, newMonth - 1);  
  148.         event = new WeekViewEvent(2, getEventTitle(startTime), startTime, endTime);  
  149.         event.setColor(getResources().getColor(R.color.event_color_02));  
  150.         events.add(event);  
  151.         startTime = Calendar.getInstance();  
  152.         startTime.set(Calendar.HOUR_OF_DAY, 5);  
  153.         startTime.set(Calendar.MINUTE, 30);  
  154.         startTime.set(Calendar.MONTH, newMonth - 1);  
  155.         startTime.set(Calendar.YEAR, newYear);  
  156.         endTime = (Calendar) startTime.clone();  
  157.         endTime.add(Calendar.HOUR_OF_DAY, 2);  
  158.         endTime.set(Calendar.MONTH, newMonth - 1);  
  159.         event = new WeekViewEvent(2, "dddd", startTime, endTime);  
  160.         event.setColor(getResources().getColor(R.color.event_color_01));  
  161.         events.add(event);  
  162.         startTime = Calendar.getInstance();  
  163.         startTime.set(Calendar.HOUR_OF_DAY, 5);  
  164.         startTime.set(Calendar.MINUTE, 0);  
  165.         startTime.set(Calendar.MONTH, newMonth - 1);  
  166.         startTime.set(Calendar.YEAR, newYear);  
  167.         startTime.add(Calendar.DATE, 1);  
  168.         endTime = (Calendar) startTime.clone();  
  169.         endTime.add(Calendar.HOUR_OF_DAY, 3);  
  170.         endTime.set(Calendar.MONTH, newMonth - 1);  
  171.         event = new WeekViewEvent(3, getEventTitle(startTime), startTime, endTime);  
  172.         event.setColor(getResources().getColor(R.color.event_color_03));  
  173.         events.add(event);  
  174.   
  175.         startTime = Calendar.getInstance();  
  176.         startTime.set(Calendar.DAY_OF_MONTH, 15);  
  177.         startTime.set(Calendar.HOUR_OF_DAY, 3);  
  178.         startTime.set(Calendar.MINUTE, 0);  
  179.         startTime.set(Calendar.MONTH, newMonth - 1);  
  180.         startTime.set(Calendar.YEAR, newYear);  
  181.         endTime = (Calendar) startTime.clone();  
  182.         endTime.add(Calendar.HOUR_OF_DAY, 3);  
  183.         event = new WeekViewEvent(4, getEventTitle(startTime), startTime, endTime);  
  184.         event.setColor(getResources().getColor(R.color.event_color_04));  
  185.         events.add(event);  
  186.   
  187.         startTime = Calendar.getInstance();  
  188.         startTime.set(Calendar.DAY_OF_MONTH, 1);  
  189.         startTime.set(Calendar.HOUR_OF_DAY, 3);  
  190.         startTime.set(Calendar.MINUTE, 0);  
  191.         startTime.set(Calendar.MONTH, newMonth - 1);  
  192.         startTime.set(Calendar.YEAR, newYear);  
  193.         endTime = (Calendar) startTime.clone();  
  194.         endTime.add(Calendar.HOUR_OF_DAY, 3);  
  195.         event = new WeekViewEvent(5, getEventTitle(startTime), startTime, endTime);  
  196.         event.setColor(getResources().getColor(R.color.event_color_01));  
  197.         events.add(event);  
  198.   
  199.         startTime = Calendar.getInstance();  
  200.         startTime.set(Calendar.DAY_OF_MONTH, startTime.getActualMaximum(Calendar.DAY_OF_MONTH));  
  201.         startTime.set(Calendar.HOUR_OF_DAY, 15);  
  202.         startTime.set(Calendar.MINUTE, 0);  
  203.         startTime.set(Calendar.MONTH, newMonth - 1);  
  204.         startTime.set(Calendar.YEAR, newYear);  
  205.         endTime = (Calendar) startTime.clone();  
  206.         endTime.add(Calendar.HOUR_OF_DAY, 3);  
  207.         event = new WeekViewEvent(5, getEventTitle(startTime), startTime, endTime);  
  208.         event.setColor(getResources().getColor(R.color.event_color_02));  
  209.         events.add(event);  
  210.         events.addAll(mNewEvent);  
  211.         return events;  
  212.     }  
  213.   
  214.     private String getEventTitle(Calendar time) {  
  215.         return String.format("Event of %02d:%02d %s/%d", time.get(Calendar.HOUR_OF_DAY), time.get(Calendar.MINUTE), time.get(Calendar.MONTH) + 1, time.get(Calendar.DAY_OF_MONTH));  
  216.     }  
  217.   
  218.     @Override  
  219.     public void onEventClick(WeekViewEvent event, RectF eventRect) {  
  220.         Toast.makeText(MainActivity.this, "Clicked " + event.getName(), Toast.LENGTH_SHORT).show();  
  221.     }  
  222.   
  223.     @Override  
  224.     public void onEventLongPress(WeekViewEvent event, RectF eventRect) {  
  225.         Toast.makeText(MainActivity.this, "Long pressed event: " + event.getName(), Toast.LENGTH_SHORT).show();  
  226.     }  
  227.   
  228.   
  229.     @Override  
  230.     public void onEmptyViewClicked(Calendar time) {  
  231.         Toast.makeText(MainActivity.this, "Empty View clicked " + time.get(Calendar.YEAR) + "/" + time.get(Calendar.MONTH) + "/" + time.get(Calendar.DAY_OF_MONTH), Toast.LENGTH_LONG).show();  
  232.     }  
  233.   
  234.     @Override  
  235.     public void onEmptyViewLongPress(Calendar time) {  
  236.         Toast.makeText(MainActivity.this, "Empty View long  clicked " + time.get(Calendar.YEAR) + "/" + time.get(Calendar.MONTH) + "/" + time.get(Calendar.DAY_OF_MONTH), Toast.LENGTH_LONG).show();  
  237.   
  238.     }  
  239.   
  240.     @Override  
  241.     public void onFirstVisibleDayChanged(Calendar newFirstVisibleDay, Calendar oldFirstVisibleDay) {  
  242.   
  243.     }  
  244.   
  245.     @Override  
  246.     public void onSelectedDaeChange(Calendar selectedDate) {  
  247.         mWeekHeaderView.setSelectedDay(selectedDate);  
  248.         mTv_date.setText(selectedDate.get(Calendar.YEAR)+"年"+(selectedDate.get(Calendar.MONTH)+1)+"月");  
  249.     }  
  250. }  

WeekHeaderView 和WeekDayView相互监听对方的滑动才能实现联动。第一次写博客，就说这么多了，有兴趣的朋友可以去github,下载源码看看，我就不再献丑了，

相关推荐