Android使用GridLayout绘制自定义日历控件

效果图

思路：就是先设置gridlayout的行列数，然后往里面放置一定数目的自定义日历按钮控件，最后实现日历逻辑就可以了。

步骤：

第一步：自定义日历控件（初步）

第二步：实现自定义单个日期按钮控件

第三步：将第二步得到的控件动态添加到第一步的布局中，并实现日期逻辑

第四步：编写单个日期点击监听器接口

第一步：自定义日历控件（初步）

<?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"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      android:orientation="vertical"
      android:background="@color/lightgreen" >

      <relativelayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <textview
          android:id="@+id/textview1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerhorizontal="true"
          android:layout_centervertical="true"
          android:textcolor="@color/white"
          android:textsize="9pt"
          android:text="2016年10月" />

        <imagebutton
          android:id="@+id/imagebutton1"
          android:layout_width="30dp"
          android:layout_height="20dp"
          android:layout_alignparentleft="true"
          android:layout_centervertical="true"
          android:layout_marginleft="16dp"
          android:background="@drawable/back" />

        <imagebutton
          android:id="@+id/imagebutton2"
          android:layout_width="20dp"
          android:layout_height="20dp"
          android:layout_aligntop="@+id/imagebutton1"
          android:layout_centervertical="true"
          android:layout_marginright="16dp"
          android:layout_toleftof="@+id/textview1"
          android:background="@drawable/pre" />

        <imagebutton
          android:id="@+id/imagebutton3"
          android:layout_width="18dp"
          android:layout_height="18dp"
          android:layout_centervertical="true"
          android:layout_aligntop="@+id/textview1"
          android:layout_marginleft="16dp"
          android:layout_torightof="@+id/textview1"
          android:background="@drawable/back11" />

      </relativelayout>

    </linearlayout>

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:layout_margintop="10dp" >

      <gridlayout
        android:id="@+id/gridlayout01"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
      <--!自定义的单个日历按钮控件就放在这里-->
      </gridlayout>

    </linearlayout>

    <listview
      android:id="@+id/listview1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
    </listview>

  </linearlayout>

</linearlayout>

package com.包名.mycalendarview;

import java.util.calendar;
import java.util.date;

import android.content.context;
import android.graphics.color;
import android.util.attributeset;
import android.util.log;
import android.view.layoutinflater;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.windowmanager;
import android.widget.gridlayout;
import android.widget.imagebutton;
import android.widget.linearlayout;
import android.widget.textview;

import com.xuy849.utils.info;
import com.xuy849.weightapp.r;

public class mycalendar extends linearlayout implements onclicklistener{
 context context;
 textview tv_yearandmonth;
 imagebutton ib_pre;
 imagebutton ib_next;
 imagebutton ib_back;
 gridlayout gl_calendar;
 view view;
 calendarbutton buttons[];
 int sidelength;
 string week[] = {"日","一","二","三","四","五","六"};
 date date;
 calendar calendar;
 int year,month,day;
 int res;
 
 public mycalendar(context context, attributeset attrs, int defstyle) {
 super(context, attrs, defstyle);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }

 public mycalendar(context context, attributeset attrs) {
 super(context, attrs);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }

 public mycalendar(context context) {
 super(context);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }
 
 private void init(){
 this.view = layoutinflater.from(context).inflate(r.layout.my_calendar_view, this);
 
 
 }
}

效果图：（请无视listview）

第二步：自定义单个日期按钮控件

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/background01"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="wrap_content"
    android:id="@+id/linearlayout01"
    android:layout_height="wrap_content"
    android:background="@color/calendarbackground"
    android:orientation="vertical" 
    android:layout_marginbottom="1dp">

    <framelayout
      android:layout_width="match_parent"
      android:layout_height="match_parent" >

      <imageview
        android:id="@+id/imageview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"
        android:src="@drawable/selected_date" />

      <linearlayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:gravity="center">

        <textview
          android:id="@+id/textview1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textsize="8pt"
          android:text="20" />

        <textview
          android:id="@+id/textview2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margintop="3dp"
          android:textcolor="@color/blue"
          android:visibility="invisible"
          android:text="65.1" />

      </linearlayout>

    </framelayout>

  </linearlayout>

</linearlayout>

package com.包名.mycalendarview;

import java.util.date;

import android.content.context;
import android.graphics.color;
import android.util.attributeset;
import android.view.layoutinflater;
import android.view.view;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;

import com.xuy849.utils.info;
import com.xuy849.weightapp.r;


class calendarbutton extends linearlayout{

 context context;
 textview tv_date;
 textview tv_data;
 imageview iv_note;
 linearlayout ll_container;
 view view;
 date date;
 
 public calendarbutton(context context, attributeset attrs, int defstyle) {
 super(context, attrs, defstyle);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }

 public calendarbutton(context context, attributeset attrs) {
 super(context, attrs);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }
 
 public void settotalenable(boolean b){
 this.setenabled(b);
 }

 public calendarbutton(context context) {
 super(context);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 
 }
 
 public void setdate(date date){
 this.date = date;
 }

 public date getdate(){
 return this.date;
 }
 
 private void init(){
 view = layoutinflater.from(context).inflate(r.layout.date_button, this);
 
 //findviewbyid
 tv_date =(textview)view.findviewbyid(r.id.textview1);
 tv_data = (textview)view.findviewbyid(r.id.textview2);
 iv_note = (imageview)view.findviewbyid(r.id.imageview1);
 ll_container = (linearlayout)view.findviewbyid(r.id.linearlayout01);
 
 }
 
 public void setdatetext(string text){
 tv_date.settext(text);
 }
 
 public void setdatetextcolor(int color){
 tv_date.settextcolor(color);
 }
 }
 
}

效果图：

第三步：将第二步得到的控件在java代码中添加到第一步的布局中，并添加相关逻辑

package com.包名.mycalendarview;

import java.util.calendar;
import java.util.date;

import android.content.context;
import android.graphics.color;
import android.util.attributeset;
import android.util.log;
import android.view.layoutinflater;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.windowmanager;
import android.widget.gridlayout;
import android.widget.imagebutton;
import android.widget.linearlayout;
import android.widget.textview;

import com.xuy849.utils.info;
import com.xuy849.weightapp.r;

public class mycalendar extends linearlayout implements onclicklistener{
 context context;
 textview tv_yearandmonth;
 imagebutton ib_pre;
 imagebutton ib_next;
 imagebutton ib_back;
 gridlayout gl_calendar;
 view view;
 calendarbutton buttons[];
 int sidelength;
 string week[] = {"日","一","二","三","四","五","六"};
 date date;
 calendar calendar;
 int year,month,day;
 int res;
 
 public mycalendar(context context, attributeset attrs, int defstyle) {
 super(context, attrs, defstyle);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }

 public mycalendar(context context, attributeset attrs) {
 super(context, attrs);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }

 public mycalendar(context context) {
 super(context);
 
 this.context = context;
 // todo auto-generated constructor stub
 
 init();
 }
 
 private void init(){
 this.view = layoutinflater.from(context).inflate(r.layout.my_calendar_view, this);
 
 windowmanager ww = (windowmanager)getcontext().getsystemservice(context.window_service);
 sidelength = ww.getdefaultdisplay().getwidth()/info.column_count;
 
 //
 myfindviewbyid();
 
 //初始化日历按钮布局
 initcalendarlayout();
 
 //初始化按钮点击事件
 initbutton();
 
 }
 
 private void initbutton(){
 ib_pre.setonclicklistener(this);
 ib_next.setonclicklistener(this);
 ib_back.setonclicklistener(this);
 }
 
 private void myfindviewbyid(){
 tv_yearandmonth = (textview)view.findviewbyid(r.id.textview1);
 ib_pre = (imagebutton)view.findviewbyid(r.id.imagebutton2);
 ib_next = (imagebutton)view.findviewbyid(r.id.imagebutton3);
 ib_back = (imagebutton)view.findviewbyid(r.id.imagebutton1);
 gl_calendar =(gridlayout)view.findviewbyid(r.id.gridlayout01);
 
 //
 buttons = new calendarbutton[info.column_count*info.row_count];
 
 }
 
  //根据传递过来的calendar，绘制当月的日历视图
  private void initcalendar(calendar calendar){
 int year = calendar.get(calendar.year);
 int month = (calendar.get(calendar.month)+1);
 int date = calendar.get(calendar.date);
 
 //设置标题
 string todaystr = string.format("%04d年%02d月", calendar.get(calendar.year),(calendar.get(calendar.month)+1));
 tv_yearandmonth.settext(todaystr);
 
 //
 calendar.set(calendar.day_of_month, 1);
 int currentmonthfirstdateinweek = calendar.get(calendar.day_of_week)-1;
 calendar.set(calendar.day_of_month, date);
 int currentmonthdayssum = calendar.getactualmaximum(calendar.day_of_month);
 
 calendar.roll(calendar.month, -1);
 int lastmonthdayssum = calendar.getactualmaximum(calendar.day_of_month);
 int i;
 calendar.roll(calendar.month, 1);
 
 log.w("月", currentmonthdayssum+"天");
 log.w("上月", lastmonthdayssum +"天");
 
 /*
  * 设置日期
  */
 //设置本月
 log.w("currentmonthfirstdateinweek",currentmonthfirstdateinweek+"");
 log.w("currentmonthfirstdateinweek%7111",currentmonthdayssum+currentmonthfirstdateinweek%7+"");
 
 for(i=currentmonthfirstdateinweek%7+7;i<=(currentmonthdayssum+currentmonthfirstdateinweek%7+7-1)&&i<info.column_count*info.row_count;i++){
  buttons[i].changetostate(info.state_normal_norecored);
  buttons[i].setdatetext((i-currentmonthfirstdateinweek%7-7+1)+"");
  buttons[i].setdatetextcolor(color.black);
  buttons[i].setenabled(true);
  buttons[i].setdate(new date(year,month,i-(currentmonthfirstdateinweek%7+7)+1));
 }
 
 //设置上一个月
 for(i=7;i<(currentmonthfirstdateinweek%7+7)&&i<info.column_count*info.row_count;i++){
  buttons[i].changetostate(info.state_normal_norecored);
  buttons[i].setdatetextcolor(color.gray);
  buttons[i].setdatetext(lastmonthdayssum-(currentmonthfirstdateinweek%7-i%7)+1+"");
  buttons[i].setenabled(false);
 }
 
 //设置下一个月
 for(i =currentmonthdayssum+currentmonthfirstdateinweek%7+7;i<info.row_count*info.column_count;i++){
  buttons[i].changetostate(info.state_normal_norecored);
  buttons[i].setdatetextcolor(color.gray);
  buttons[i].setdatetext((i-(currentmonthdayssum+currentmonthfirstdateinweek%7+7)+1)+"");
  buttons[i].setenabled(false);
 }
 
 //设置当天
 if(year==this.year&&month==this.month&&day==this.day)
  buttons[date+currentmonthfirstdateinweek%7+7-1].changetostate(info.state_today_norecored);
 
 //初始化界面
 if(res!=0)
  initlayout(res);
 
 }
 
 
 private void initcalendarlayout(){
 //设置行数，列数
 gl_calendar.setrowcount(info.row_count);
 gl_calendar.setcolumncount(info.column_count);
 
 
 /*
  * 添加按钮到布局
  */
 int i;
 int sum = info.row_count*info.column_count;
 
 //设置星期
 for(i=0;i<info.column_count;i++){
  buttons[i] = new calendarbutton(context);
  buttons[i].setdatetext(week[i]);
  buttons[i].setlayoutparams(new layoutparams(sidelength, sidelength));
  gl_calendar.addview(buttons[i], i);
  buttons[i].setenabled(false);
 }
 
 for(i = info.column_count;i<sum;i++){
  buttons[i] = new calendarbutton(context);
  buttons[i].setdatetext("55");
  buttons[i].setlayoutparams(new layoutparams(sidelength, sidelength));
  gl_calendar.addview(buttons[i], i);
 }
 
 
 //根据当月设置情况
 calendar = calendar.getinstance();
 year = calendar.get(calendar.year);
 month = calendar.get(calendar.month)+1;
 day = calendar.get(calendar.date);
 initcalendar(calendar);
 
 
 }

 @override
 public void onclick(view v) {
 // todo auto-generated method stub
 switch(v.getid()){
 
 //上一个月
 case r.id.imagebutton2:{
  calendar.roll(calendar.month, -1);
  initcalendar(calendar);
  break;
 }
 
 //下一个月
 case r.id.imagebutton3:{
  calendar.roll(calendar.month, 1);
  initcalendar(calendar);
  break;
 }
 }
 }
 
 public void setonclickbuttonlistener(onclicklistener l,int index){ 
 buttons[index].setonclicklistener(l);
 }
 
 public date getdate(int index){
 return buttons[index].getdate();
 }
 
 public void setdata(float f,int index){
 buttons[index].tv_data.settext(string.format("%.1f", f));
 buttons[index].tv_data.setvisibility(textview.visible);
 }
 
 public void initlayout(int res){
 switch(res){
 case info.view_weiht:{
  
  
  break;
 }
 
 default:{
  break;
 }
 }
 }
 
 public void setres(int res){
 this.res = res;
 }
}

第四步：编写单个日期点击监听器接口

在第三步中添加方法：

//设置下标是index的日期按钮的点击事件监听器
public void setonclickbuttonlistener(onclicklistener l,int index){ 
 buttons[index].setonclicklistener(l);
 }

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