Androidの自作CalendarView

AndroidでCalendarViewを使うにはいくつか方法があります。

1. Android公式のandroid.widget.CalendarViewを使う
2. CalendarView 公開しましたのCalendarViewを使う
3. 自分で作る

1.に関してはAPIが11以上でないと使えないので、2.x系以上をサポートするアプリでは使えません。

2.に関してはページ送り、祝日情報などが含まれていてかなり有用なCalendarViewだと思います。

3.本当に最低限のCalendarViewでいいとか、後で色々細かいところを調整したいとかはこっちの方がいいのかなと思います。

今作っているアプリにCalendarView使いたいなってことで、上記の3件を考慮したのですが、今回作っているアプリに一番しっくりきそうなのは3.の形だったので、

カスタムコンポーネントでCalendarViewを作成

のソースコードを元に作りました。(主にリファクタリングと、少しの調整)

view plainprint?

1. import java.text.SimpleDateFormat;  
2. import java.util.ArrayList;  
3. import java.util.Calendar;  
4.   
5. import android.annotation.SuppressLint;  
6. import android.content.Context;  
7. import android.graphics.Color;  
8. import android.graphics.Typeface;  
9. import android.util.AttributeSet;  
10. import android.view.Gravity;  
11. import android.widget.LinearLayout;  
12. import android.widget.TextView;  
13.   
14. import <package_name>.R;  
15.   
16. /** 
17.  * 指定した年月日のカレンダーを表示するクラス 
18.  */  
19. public class CalendarView extends LinearLayout {  
20.     @SuppressWarnings("unused")  
21.     private static final String TAG = CalendarView.class.getSimpleName();  
22.       
23.     private static final int WEEKDAYS = 7;  
24.     private static final int MAX_WEEK = 6;  
25.       
26.     // 週の始まりの曜日を保持する  
27.     private static final int BIGINNING_DAY_OF_WEEK = Calendar.SUNDAY;  
28.     // 今日のフォント色   
29.     private static final int TODAY_COLOR = Color.RED;  
30.     // 通常のフォント色  
31.     private static final int DEFAULT_COLOR = Color.DKGRAY;  
32.     // 今週の背景色   
33.     private static final int TODAY_BACKGROUND_COLOR = Color.LTGRAY;  
34.     // 通常の背景色   
35.     private static final int DEFAULT_BACKGROUND_COLOR = Color.TRANSPARENT;  
36.       
37.     // 年月表示部分  
38.     private TextView mTitleView;   
39.       
40.     // 週のレイアウト  
41.     private LinearLayout mWeekLayout;  
42.     private ArrayList<Linearlayout> mWeeks = new ArrayList<Linearlayout>();  
43.       
44.     /** 
45.      * コンストラクタ 
46.      *  
47.      * @param context context 
48.      */  
49.     public CalendarView(Context context) {  
50.         this(context, null);  
51.     }  
52.       
53.     /** 
54.      * コンストラクタ 
55.      *  
56.      * @param context context 
57.      * @param attrs attributeset 
58.      */  
59.     @SuppressLint("SimpleDateFormat")  
60.     public CalendarView(Context context, AttributeSet attrs) {  
61.         super(context, attrs);  
62.         this.setOrientation(VERTICAL);  
63.           
64.         createTitleView(context);  
65.         createWeekViews(context);  
66.         createDayViews(context);  
67.     }  
68.   
69.     /** 
70.      * 年月日表示用のタイトルを生成する 
71.      *  
72.      * @param context context 
73.      */  
74.     private void createTitleView(Context context) {  
75.         float scaleDensity = context.getResources().getDisplayMetrics().density;  
76.           
77.         mTitleView = new TextView(context);  
78.         mTitleView.setGravity(Gravity.CENTER_HORIZONTAL); // 中央に表示  
79.         mTitleView.setTextSize((int)(scaleDensity * 14));  
80.         mTitleView.setTypeface(null, Typeface.BOLD); // 太字  
81.         mTitleView.setPadding(0, 0, 0, (int)(scaleDensity * 16));  
82.           
83.         addView(mTitleView, new LinearLayout.LayoutParams(  
84.             LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));  
85.     }  
86.   
87.     /** 
88.      * 曜日表示用のビューを生成する 
89.      *  
90.      * @param context context 
91.      */  
92.     private void createWeekViews(Context context) {  
93.         float scaleDensity = context.getResources().getDisplayMetrics().density;  
94.         // 週表示レイアウト  
95.         mWeekLayout = new LinearLayout(context);  
96.           
97.         Calendar calendar = Calendar.getInstance();  
98.         calendar.set(Calendar.DAY_OF_WEEK, BIGINNING_DAY_OF_WEEK); // 週の頭をセット  
99.           
100.         for (int i = 0; i < WEEKDAYS; i++) {  
101.             TextView textView = new TextView(context);  
102.             textView.setGravity(Gravity.RIGHT); // 中央に表示  
103.             textView.setPadding(0, 0, (int)(scaleDensity * 4), 0);  
104.               
105.             LinearLayout.LayoutParams llp =   
106.                     new LinearLayout.LayoutParams(0, LayoutParams.WRAP_CONTENT);  
107.             llp.weight = 1;  
108.               
109.             mWeekLayout.addView(textView, llp);  
110.               
111.             calendar.add(Calendar.DAY_OF_MONTH, 1);  
112.         }  
113.         addView(mWeekLayout, new LinearLayout.LayoutParams(  
114.             LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));  
115.     }  
116.   
117.       
118.     /** 
119.      * 日付表示用のビューを生成する 
120.      *  
121.      * @param context context 
122.      */  
123.     private void createDayViews(Context context) {  
124.         float scaleDensity = context.getResources().getDisplayMetrics().density;  
125.           
126.         // カレンダー部 最大6行必要  
127.         for (int i = 0; i < MAX_WEEK; i++) {  
128.             LinearLayout weekLine = new LinearLayout(context);  
129.             mWeeks.add(weekLine);  
130.               
131.             // 1週間分の日付ビュー作成  
132.             for (int j = 0; j < WEEKDAYS; j++) {  
133.                 TextView dayView = new TextView(context);  
134.                 dayView.setGravity(Gravity.TOP | Gravity.RIGHT);   
135.                 dayView.setPadding(0, (int)(scaleDensity * 4), (int)(scaleDensity * 4), 0);  
136.                 LinearLayout.LayoutParams llp =   
137.                         new LinearLayout.LayoutParams(0, (int)(scaleDensity * 48));  
138.                 llp.weight = 1;  
139.                 weekLine.addView(dayView, llp);  
140.             }  
141.               
142.             this.addView(weekLine, new LinearLayout.LayoutParams(  
143.                 LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));  
144.         }  
145.     }  
146.       
147.     /** 
148.      * 年と月を指定して、カレンダーの表示を初期化する 
149.      *  
150.      * @param year 年の指定 
151.      * @param month 月の指定 
152.      */  
153.     public void set(int year, int month) {  
154.         setTitle(year, month);  
155.         setWeeks();  
156.         setDays(year, month);  
157.     }  
158.   
159.     /** 
160.      * 指定した年月日をタイトルに設定する 
161.      *  
162.      * @param year 年の指定 
163.      * @param month 月の指定 
164.      */  
165.     @SuppressLint("SimpleDateFormat")  
166.     private void setTitle(int year, int month) {  
167.         Calendar targetCalendar = getTargetCalendar(year, month);  
168.           
169.         // 年月フォーマット文字列  
170.         String formatString = mTitleView.getContext().getString(R.string.format_month_year);  
171.         SimpleDateFormat formatter = new SimpleDateFormat(formatString);  
172.         mTitleView.setText(formatter.format(targetCalendar.getTime()));  
173.     }  
174.   
175.     /** 
176.      * 曜日を設定する 
177.      */  
178.     @SuppressLint("SimpleDateFormat")  
179.     private void setWeeks() {  
180.         Calendar week = Calendar.getInstance();  
181.         week.set(Calendar.DAY_OF_WEEK, BIGINNING_DAY_OF_WEEK); // 週の頭をセット  
182.         SimpleDateFormat weekFormatter = new SimpleDateFormat("E"); // 曜日を取得するフォーマッタ  
183.         for (int i = 0; i < WEEKDAYS; i++) {  
184.             TextView textView = (TextView) mWeekLayout.getChildAt(i);  
185.             textView.setText(weekFormatter.format(week.getTime())); // テキストに曜日を表示  
186.             week.add(Calendar.DAY_OF_MONTH, 1);  
187.         }  
188.     }  
189.   
190.     /** 
191.      * 日付を設定していくメソッド 
192.      *  
193.      * @param year 年の指定 
194.      * @param month 月の指定 
195.      */  
196.     private void setDays(int year, int month) {  
197.         Calendar targetCalendar = getTargetCalendar(year, month);  
198.           
199.         int skipCount = getSkipCount(targetCalendar);  
200.         int lastDay = targetCalendar.getActualMaximum(Calendar.DATE);  
201.         int dayCounter = 1;  
202.           
203.         Calendar todayCalendar = Calendar.getInstance();  
204.         int todayYear  = todayCalendar.get(Calendar.YEAR);  
205.         int todayMonth = todayCalendar.get(Calendar.MONTH);  
206.         int todayDay   = todayCalendar.get(Calendar.DAY_OF_MONTH);  
207.           
208.         for (int i = 0; i < MAX_WEEK; i++) {  
209.             LinearLayout weekLayout = mWeeks.get(i);  
210.             weekLayout.setBackgroundColor(DEFAULT_BACKGROUND_COLOR);  
211.             for (int j = 0; j < WEEKDAYS; j++) {  
212.                 TextView dayView = (TextView) weekLayout.getChildAt(j);  
213.                   
214.                 // 第一週かつskipCountが残っていれば  
215.                 if (i == 0 && skipCount > 0) {  
216.                     dayView.setText(" ");  
217.                     skipCount--;  
218.                     continue;  
219.                 }  
220.                   
221.                 // 最終日より大きければ  
222.                 if (lastDay < dayCounter) {  
223.                     dayView.setText(" ");  
224.                     continue;  
225.                 }  
226.                   
227.                 // 日付を設定  
228.                 dayView.setText(String.valueOf(dayCounter));  
229.                   
230.                 boolean isToday = todayYear  == year  &&   
231.                                   todayMonth == month &&   
232.                                   todayDay   == dayCounter;  
233.                   
234.                 if (isToday) {  
235.                     dayView.setTextColor(TODAY_COLOR); // 赤文字  
236.                     dayView.setTypeface(null, Typeface.BOLD); // 太字  
237.                     weekLayout.setBackgroundColor(TODAY_BACKGROUND_COLOR); // 週の背景グレー  
238.                 } else {  
239.                     dayView.setTextColor(DEFAULT_COLOR);  
240.                     dayView.setTypeface(null, Typeface.NORMAL);  
241.                 }  
242.                 dayCounter++;  
243.             }  
244.         }  
245.     }  
246.   
247.     /** 
248.      * カレンダーの最初の空白の個数を求める 
249.      *  
250.      * @param targetCalendar 指定した月のCalendarのInstance 
251.      * @return skipCount 
252.      */  
253.     private int getSkipCount(Calendar targetCalendar) {  
254.         int skipCount; // 空白の個数  
255.         int firstDayOfWeekOfMonth = targetCalendar.get(Calendar.DAY_OF_WEEK); // 1日の曜日  
256.         if (BIGINNING_DAY_OF_WEEK > firstDayOfWeekOfMonth) {  
257.             skipCount = firstDayOfWeekOfMonth - BIGINNING_DAY_OF_WEEK + WEEKDAYS;  
258.         } else {  
259.             skipCount = firstDayOfWeekOfMonth - BIGINNING_DAY_OF_WEEK;  
260.         }  
261.         return skipCount;  
262.     }  
263.   
264.     private Calendar getTargetCalendar(int year, int month) {  
265.         Calendar targetCalendar = Calendar.getInstance();  
266.         targetCalendar.clear(); // カレンダー情報の初期化  
267.         targetCalendar.set(Calendar.YEAR, year);  
268.         targetCalendar.set(Calendar.MONTH, month);  
269.         targetCalendar.set(Calendar.DAY_OF_MONTH, 1);  
270.         return targetCalendar;  
271.     }  
272. }  

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.TextView;

import <package_name>.R;

/**
 * 指定した年月日のカレンダーを表示するクラス
 */
public class CalendarView extends LinearLayout {
    @SuppressWarnings("unused")
    private static final String TAG = CalendarView.class.getSimpleName();
    
    private static final int WEEKDAYS = 7;
    private static final int MAX_WEEK = 6;
    
    // 週の始まりの曜日を保持する
    private static final int BIGINNING_DAY_OF_WEEK = Calendar.SUNDAY;
    // 今日のフォント色 
    private static final int TODAY_COLOR = Color.RED;
    // 通常のフォント色
    private static final int DEFAULT_COLOR = Color.DKGRAY;
    // 今週の背景色 
    private static final int TODAY_BACKGROUND_COLOR = Color.LTGRAY;
    // 通常の背景色 
    private static final int DEFAULT_BACKGROUND_COLOR = Color.TRANSPARENT;
    
    // 年月表示部分
    private TextView mTitleView; 
    
    // 週のレイアウト
    private LinearLayout mWeekLayout;
    private ArrayList<Linearlayout> mWeeks = new ArrayList<Linearlayout>();
    
    /**
     * コンストラクタ
     * 
     * @param context context
     */
    public CalendarView(Context context) {
        this(context, null);
    }
    
    /**
     * コンストラクタ
     * 
     * @param context context
     * @param attrs attributeset
     */
    @SuppressLint("SimpleDateFormat")
    public CalendarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.setOrientation(VERTICAL);
        
        createTitleView(context);
        createWeekViews(context);
        createDayViews(context);
    }

    /**
     * 年月日表示用のタイトルを生成する
     * 
     * @param context context
     */
    private void createTitleView(Context context) {
        float scaleDensity = context.getResources().getDisplayMetrics().density;
        
        mTitleView = new TextView(context);
        mTitleView.setGravity(Gravity.CENTER_HORIZONTAL); // 中央に表示
        mTitleView.setTextSize((int)(scaleDensity * 14));
        mTitleView.setTypeface(null, Typeface.BOLD); // 太字
        mTitleView.setPadding(0, 0, 0, (int)(scaleDensity * 16));
        
        addView(mTitleView, new LinearLayout.LayoutParams(
            LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
    }

    /**
     * 曜日表示用のビューを生成する
     * 
     * @param context context
     */
    private void createWeekViews(Context context) {
        float scaleDensity = context.getResources().getDisplayMetrics().density;
        // 週表示レイアウト
        mWeekLayout = new LinearLayout(context);
        
        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.DAY_OF_WEEK, BIGINNING_DAY_OF_WEEK); // 週の頭をセット
        
        for (int i = 0; i < WEEKDAYS; i++) {
            TextView textView = new TextView(context);
            textView.setGravity(Gravity.RIGHT); // 中央に表示
            textView.setPadding(0, 0, (int)(scaleDensity * 4), 0);
            
            LinearLayout.LayoutParams llp = 
                    new LinearLayout.LayoutParams(0, LayoutParams.WRAP_CONTENT);
            llp.weight = 1;
            
            mWeekLayout.addView(textView, llp);
            
            calendar.add(Calendar.DAY_OF_MONTH, 1);
        }
        addView(mWeekLayout, new LinearLayout.LayoutParams(
            LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
    }

    
    /**
     * 日付表示用のビューを生成する
     * 
     * @param context context
     */
    private void createDayViews(Context context) {
        float scaleDensity = context.getResources().getDisplayMetrics().density;
        
        // カレンダー部 最大6行必要
        for (int i = 0; i < MAX_WEEK; i++) {
            LinearLayout weekLine = new LinearLayout(context);
            mWeeks.add(weekLine);
            
            // 1週間分の日付ビュー作成
            for (int j = 0; j < WEEKDAYS; j++) {
                TextView dayView = new TextView(context);
                dayView.setGravity(Gravity.TOP | Gravity.RIGHT); 
                dayView.setPadding(0, (int)(scaleDensity * 4), (int)(scaleDensity * 4), 0);
                LinearLayout.LayoutParams llp = 
                        new LinearLayout.LayoutParams(0, (int)(scaleDensity * 48));
                llp.weight = 1;
                weekLine.addView(dayView, llp);
            }
            
            this.addView(weekLine, new LinearLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        }
    }
    
    /**
     * 年と月を指定して、カレンダーの表示を初期化する
     * 
     * @param year 年の指定
     * @param month 月の指定
     */
    public void set(int year, int month) {
        setTitle(year, month);
        setWeeks();
        setDays(year, month);
    }

    /**
     * 指定した年月日をタイトルに設定する
     * 
     * @param year 年の指定
     * @param month 月の指定
     */
    @SuppressLint("SimpleDateFormat")
    private void setTitle(int year, int month) {
        Calendar targetCalendar = getTargetCalendar(year, month);
        
        // 年月フォーマット文字列
        String formatString = mTitleView.getContext().getString(R.string.format_month_year);
        SimpleDateFormat formatter = new SimpleDateFormat(formatString);
        mTitleView.setText(formatter.format(targetCalendar.getTime()));
    }

    /**
     * 曜日を設定する
     */
    @SuppressLint("SimpleDateFormat")
    private void setWeeks() {
        Calendar week = Calendar.getInstance();
        week.set(Calendar.DAY_OF_WEEK, BIGINNING_DAY_OF_WEEK); // 週の頭をセット
        SimpleDateFormat weekFormatter = new SimpleDateFormat("E"); // 曜日を取得するフォーマッタ
        for (int i = 0; i < WEEKDAYS; i++) {
            TextView textView = (TextView) mWeekLayout.getChildAt(i);
            textView.setText(weekFormatter.format(week.getTime())); // テキストに曜日を表示
            week.add(Calendar.DAY_OF_MONTH, 1);
        }
    }

    /**
     * 日付を設定していくメソッド
     * 
     * @param year 年の指定
     * @param month 月の指定
     */
    private void setDays(int year, int month) {
        Calendar targetCalendar = getTargetCalendar(year, month);
        
        int skipCount = getSkipCount(targetCalendar);
        int lastDay = targetCalendar.getActualMaximum(Calendar.DATE);
        int dayCounter = 1;
        
        Calendar todayCalendar = Calendar.getInstance();
        int todayYear  = todayCalendar.get(Calendar.YEAR);
        int todayMonth = todayCalendar.get(Calendar.MONTH);
        int todayDay   = todayCalendar.get(Calendar.DAY_OF_MONTH);
        
        for (int i = 0; i < MAX_WEEK; i++) {
            LinearLayout weekLayout = mWeeks.get(i);
            weekLayout.setBackgroundColor(DEFAULT_BACKGROUND_COLOR);
            for (int j = 0; j < WEEKDAYS; j++) {
                TextView dayView = (TextView) weekLayout.getChildAt(j);
                
                // 第一週かつskipCountが残っていれば
                if (i == 0 && skipCount > 0) {
                    dayView.setText(" ");
                    skipCount--;
                    continue;
                }
                
                // 最終日より大きければ
                if (lastDay < dayCounter) {
                    dayView.setText(" ");
                    continue;
                }
                
                // 日付を設定
                dayView.setText(String.valueOf(dayCounter));
                
                boolean isToday = todayYear  == year  && 
                                  todayMonth == month && 
                                  todayDay   == dayCounter;
                
                if (isToday) {
                    dayView.setTextColor(TODAY_COLOR); // 赤文字
                    dayView.setTypeface(null, Typeface.BOLD); // 太字
                    weekLayout.setBackgroundColor(TODAY_BACKGROUND_COLOR); // 週の背景グレー
                } else {
                    dayView.setTextColor(DEFAULT_COLOR);
                    dayView.setTypeface(null, Typeface.NORMAL);
                }
                dayCounter++;
            }
        }
    }

    /**
     * カレンダーの最初の空白の個数を求める
     * 
     * @param targetCalendar 指定した月のCalendarのInstance
     * @return skipCount
     */
    private int getSkipCount(Calendar targetCalendar) {
        int skipCount; // 空白の個数
        int firstDayOfWeekOfMonth = targetCalendar.get(Calendar.DAY_OF_WEEK); // 1日の曜日
        if (BIGINNING_DAY_OF_WEEK > firstDayOfWeekOfMonth) {
            skipCount = firstDayOfWeekOfMonth - BIGINNING_DAY_OF_WEEK + WEEKDAYS;
        } else {
            skipCount = firstDayOfWeekOfMonth - BIGINNING_DAY_OF_WEEK;
        }
        return skipCount;
    }

    private Calendar getTargetCalendar(int year, int month) {
        Calendar targetCalendar = Calendar.getInstance();
        targetCalendar.clear(); // カレンダー情報の初期化
        targetCalendar.set(Calendar.YEAR, year);
        targetCalendar.set(Calendar.MONTH, month);
        targetCalendar.set(Calendar.DAY_OF_MONTH, 1);
        return targetCalendar;
    }
}

実際に使うときはこんなかんじで

view plainprint?

1. CalendarView calendarView = (CalendarView) findViewById(R.id.carendar);  
2. calendarView.set(2013, 3-1); // 2013年3月にセット  

CalendarView calendarView = (CalendarView) findViewById(R.id.carendar);
calendarView.set(2013, 3-1); // 2013年3月にセット

実際に生成されるViewは参考元とほぼ同じです。

後は、日付部分にListenerつけたり、ViewPagerにセットするなりで色々カスタマイズすれば、独自のカレンダーが作れます。