基于Android week view仿小米和iphone日历效果

前言

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

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

       主要包括两个核心的类，两个定义控件，上面的weekheaderview和下面的weekdayview，都是继承的view，然后计算位置，将上面的week label 和下面的day text 画上去，通过scroller和 gesturedetector控制滑动和处理各种事件。废话不多说，直接教大家怎么用。

      首先是布局文件，大家可以通过属性去控件文字的大小，背影颜色、焦点颜色等等。

<relativelayout 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" 
  tools:context=".mainactivity"> 
 
  <textview 
    android:id="@+id/tv_date" 
    android:layout_width="match_parent" 
    android:layout_height="30dp" 
    android:background="#455964" 
    android:gravity="center" 
    android:text="2015年1月" 
    android:textcolor="#ffffff" 
    android:textsize="16sp"/> 
 
  <com.guojunustb.library.weekheaderview 
    android:id="@+id/weekheaderview" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/tv_date" 
    app:firstdayofweek2="sunday" 
    app:headerbackgroundcolor="#455964" 
    app:headerdaylabelnormaltextcolor="#ffffff" 
    app:headerdaylabeltextsize="20sp" 
    app:headerdaylabeltodaytextcolor="@android:color/holo_red_dark" 
    app:headerfocusbackgroundcolor="#ffffff" 
    app:headerfocussamedaybackgroundcolor="#ffffff" 
    app:headerfocussamedaytextcolor="#000000" 
    app:headerfocustextcolor="#000000" 
    app:headerpaddingtop="20dp" 
    app:headerrowgap="40dp" 
    app:headerweeklabeltextcolor="#ffffff" 
    app:headerweeklabeltextsize="16sp" /> 
 
  <com.guojunustb.library.weekdayview 
    android:id="@+id/weekdayview" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_below="@+id/weekheaderview" 
    android:visibility="visible" 
    app:columngap="8dp" 
    app:daybackgroundcolor="#ffffffff" 
    app:eventtextcolor="@android:color/white" 
    app:headercolumnbackground="#ffffffff" 
    app:headercolumnpadding="8dp" 
    app:headercolumntextcolor="@color/toolbar_text" 
    app:headerrowbackgroundcolor="#465a65" 
    app:headerrowpadding="12dp" 
    app:hourheight="60dp" 
    app:noofvisibledays="1" 
    app:textsize="12sp" 
    app:todaybackgroundcolor="#1848adff" 
    app:todayheadertextcolor="@color/accent" /> 
</relativelayout> 

java代码

package com.guojunutb.weekview; 
 
import android.app.activity; 
import android.graphics.rectf; 
import android.os.bundle; 
import android.widget.textview; 
import android.widget.toast; 
 
import com.guojunustb.library.datetimeinterpreter; 
import com.guojunustb.library.weekdayview; 
import com.guojunustb.library.weekheaderview; 
import com.guojunustb.library.weekviewevent; 
 
import java.text.simpledateformat; 
import java.util.arraylist; 
import java.util.calendar; 
import java.util.list; 
import java.util.locale; 
 
/** 
 * 
 */ 
public class mainactivity extends activity implements weekdayview.monthchangelistener, 
    weekdayview.eventclicklistener, weekdayview.eventlongpresslistener,weekdayview.emptyviewclicklistener,weekdayview.emptyviewlongpresslistener,weekdayview.scrolllistener { 
  //view 
  private weekdayview mweekview; 
  private weekheaderview mweekheaderview; 
  private textview mtv_date; 
 
  list<weekviewevent> mnewevent = new arraylist<weekviewevent>(); 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    assignviews(); 
  } 
 
  private void assignviews() { 
    mweekview = (weekdayview) findviewbyid(r.id.weekdayview); 
    mweekheaderview= (weekheaderview) findviewbyid(r.id.weekheaderview); 
    mtv_date =(textview)findviewbyid(r.id.tv_date); 
    //init weekview 
    mweekview.setmonthchangelistener(this); 
    mweekview.seteventlongpresslistener(this); 
    mweekview.setoneventclicklistener(this); 
    mweekview.setscrolllistener(this); 
    mweekheaderview.setdateselectedchangelistener(new weekheaderview.dateselectedchangelistener() { 
      @override 
      public void ondateselectedchange(calendar oldselectedday, calendar newselectedday) { 
        mweekview.gotodate(newselectedday); 
      } 
    }); 
    mweekheaderview.setscrolllistener(new weekheaderview.scrolllistener() { 
      @override 
      public void onfirstvisibledaychanged(calendar newfirstvisibleday, calendar oldfirstvisibleday) { 
        mweekview.gotodate(mweekheaderview.getselectedday()); 
      } 
    }); 
    setupdatetimeinterpreter(false); 
 
  } 
 
 
  /** 
   * set up a date time interpreter which will show short date values when in week view and long 
   * date values otherwise. 
   * 
   * @param shortdate true if the date values should be short. 
   */ 
  private void setupdatetimeinterpreter(final boolean shortdate) { 
    final string[] weeklabels={"日","一","二","三","四","五","六"}; 
    mweekview.setdatetimeinterpreter(new datetimeinterpreter() { 
      @override 
      public string interpretdate(calendar date) { 
        simpledateformat weekdaynameformat = new simpledateformat("eee", locale.getdefault()); 
        string weekday = weekdaynameformat.format(date.gettime()); 
        simpledateformat format = new simpledateformat("d", locale.getdefault()); 
        return format.format(date.gettime()); 
      } 
 
      @override 
      public string interprettime(int hour) { 
        return string.format("%02d:00", hour); 
 
      } 
 
      @override 
      public string interpretweek(int date) { 
        if(date>7||date<1){ 
          return null; 
        } 
        return weeklabels[date-1]; 
      } 
    }); 
  } 
 
  @override 
  public list<weekviewevent> onmonthchange(int newyear, int newmonth) { 
 
    // populate the week view with some events. 
    list<weekviewevent> events = new arraylist<weekviewevent>(); 
 
    calendar starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 3); 
    starttime.set(calendar.minute, 0); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    calendar endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour, 1); 
    endtime.set(calendar.month, newmonth - 1); 
    weekviewevent event = new weekviewevent(1, "this is a event!!", starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_01)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 3); 
    starttime.set(calendar.minute, 30); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.set(calendar.hour_of_day, 4); 
    endtime.set(calendar.minute, 30); 
    endtime.set(calendar.month, newmonth - 1); 
    event = new weekviewevent(10, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_02)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 4); 
    starttime.set(calendar.minute, 20); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.set(calendar.hour_of_day, 5); 
    endtime.set(calendar.minute, 0); 
    event = new weekviewevent(10, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_03)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 5); 
    starttime.set(calendar.minute, 30); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 2); 
    endtime.set(calendar.month, newmonth - 1); 
    event = new weekviewevent(2, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_02)); 
    events.add(event); 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 5); 
    starttime.set(calendar.minute, 30); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 2); 
    endtime.set(calendar.month, newmonth - 1); 
    event = new weekviewevent(2, "dddd", starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_01)); 
    events.add(event); 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.hour_of_day, 5); 
    starttime.set(calendar.minute, 0); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    starttime.add(calendar.date, 1); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 3); 
    endtime.set(calendar.month, newmonth - 1); 
    event = new weekviewevent(3, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_03)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.day_of_month, 15); 
    starttime.set(calendar.hour_of_day, 3); 
    starttime.set(calendar.minute, 0); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 3); 
    event = new weekviewevent(4, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_04)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.day_of_month, 1); 
    starttime.set(calendar.hour_of_day, 3); 
    starttime.set(calendar.minute, 0); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 3); 
    event = new weekviewevent(5, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_01)); 
    events.add(event); 
 
    starttime = calendar.getinstance(); 
    starttime.set(calendar.day_of_month, starttime.getactualmaximum(calendar.day_of_month)); 
    starttime.set(calendar.hour_of_day, 15); 
    starttime.set(calendar.minute, 0); 
    starttime.set(calendar.month, newmonth - 1); 
    starttime.set(calendar.year, newyear); 
    endtime = (calendar) starttime.clone(); 
    endtime.add(calendar.hour_of_day, 3); 
    event = new weekviewevent(5, geteventtitle(starttime), starttime, endtime); 
    event.setcolor(getresources().getcolor(r.color.event_color_02)); 
    events.add(event); 
    events.addall(mnewevent); 
    return events; 
  } 
 
  private string geteventtitle(calendar time) { 
    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)); 
  } 
 
  @override 
  public void oneventclick(weekviewevent event, rectf eventrect) { 
    toast.maketext(mainactivity.this, "clicked " + event.getname(), toast.length_short).show(); 
  } 
 
  @override 
  public void oneventlongpress(weekviewevent event, rectf eventrect) { 
    toast.maketext(mainactivity.this, "long pressed event: " + event.getname(), toast.length_short).show(); 
  } 
 
 
  @override 
  public void onemptyviewclicked(calendar time) { 
    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(); 
  } 
 
  @override 
  public void onemptyviewlongpress(calendar time) { 
    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(); 
 
  } 
 
  @override 
  public void onfirstvisibledaychanged(calendar newfirstvisibleday, calendar oldfirstvisibleday) { 
 
  } 
 
  @override 
  public void onselecteddaechange(calendar selecteddate) { 
    mweekheaderview.setselectedday(selecteddate); 
    mtv_date.settext(selecteddate.get(calendar.year)+"年"+(selecteddate.get(calendar.month)+1)+"月"); 
  } 
} 

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

下载地址：sample-android-week-view

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。