[Android]달력만들기 - 주단위

이전글에서 ViewPager를 활용한 월단위 달력을 만들었는데, 여기서는 주 단위 달력을 만들어 보겠다.

참고 사이트 : http://hatti.tistory.com/entry/android-calendar
최종 소스 : 캘린더 소스

[달력 결과물]

위의 달력을 만들기 위해서 필요한 구성은 이전 월단위 달력 구성과 차이가 없다. 다만, 달력 데이터를 주 단위로 구성하는데 그 차이가 있다.

# 주 단위 달력 데이터 만들기

public void setNumOfWeek(int numOfWeeks) {
        this.numOfMonth = numOfMonth;

        Calendar calendar = Calendar.getInstance();
        // 현재주를 일요일로 설정
        calendar.set(Calendar.DAY_OF_WEEK,Calendar.SUNDAY);
        // 현재 주에서 주 범위를 설정하기 위해서 시작 주를 세팅
        calendar.add(Calendar.WEEK_OF_MONTH, -numOfWeeks);
        // 주 범위는 -numofWeeks ~ +numofWeeks 까지 달력 데이터를 세팅
        for (int i = 0; i < numOfMonth * 2 + 1; i++) {
            listMonthByMillis.add(calendar.getTimeInMillis());
            // 1주 씩 증가
            calendar.add(Calendar.WEEK_OF_MONTH,1);
        }
        // 변경된 데이터를 viewPager에 반영
        notifyDataSetChanged();
    } 

다시 한번 달력구성은 아래 그림과 같이 이루어진다. 여기서는 ViewPager를 제외한 나머지 부분의 소스코드에 대해서 알아 본다.

# Fragment로 사용자가 정의한 주단위 달력 ViewGroup을 표시한다.

public class TaTCalendarWeekFragment extends Fragment {
    private int position;
    private long timeByMillis;
    private TaTCalendarWeekFragment.OnFragmentListener onFragmentListener;
    private View mRootView;
    private TaTCalendarWeekView calendarView;

    public void setOnFragmentListener(TaTCalendarWeekFragment.OnFragmentListener onFragmentListener) {
        this.onFragmentListener = onFragmentListener;
    }

    public interface OnFragmentListener{
        public void onFragmentListener(View view);
    }

    public static TaTCalendarWeekFragment newInstance(int position) {
        TaTCalendarWeekFragment frg = new TaTCalendarWeekFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("position", position);
        frg.setArguments(bundle);
        return frg;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        position = getArguments().getInt("poisition");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mRootView = inflater.inflate(R.layout.fragment_tat_calendar_week, null);
        calendarView = (TaTCalendarWeekView) mRootView.findViewById(R.id.calendarweekview);
        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(timeByMillis);

        for (int i = 0; i < 14; i++) {
            TaTCalendarWeekItemView child = new TaTCalendarWeekItemView(getActivity().getApplicationContext());
            child.setDate(calendar.getTimeInMillis());
            if (i < 7) {
                child.setDayOfWeek(i);
            } else {
                calendar.add(Calendar.DATE, 1);
            }
            calendarView.addView(child);
        }
        return mRootView;
    }

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        if (isVisibleToUser && onFragmentListener != null && mRootView != null) {
            onFragmentListener.onFragmentListener(mRootView);
        }
        super.setUserVisibleHint(isVisibleToUser);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (getUserVisibleHint()) {

            mRootView.post(new Runnable() {
                @Override
                public void run() {
                    // TODO Auto-generated method stub
                    onFragmentListener.onFragmentListener(mRootView);
                }
            });

        }
    }

    public void setTimeByMillis(long timeByMillis) {
        this.timeByMillis = timeByMillis;
    }
}

# ViewGroup을 이용한 달력 레이아웃 만들기 :: Fragment에 담을 사용자 ViewGroup

public class TaTCalendarWeekView extends ViewGroup {
    private final int mScreenWidth; ///< 스크린 가로 사이즈
    private final int mWidthDate; ///< 달력의 한 칸 가로 사이즈
    private long mMillis; ///< 달력 시간 데이터
    private int mDefaultTextSize = 40; ///< 기본 텍스트 크기

    public static String[] DAY_OF_WEEK = null; ///< 요일 리스트[일,월,화,수,목,금,토]

    public TaTCalendarWeekView(Context context, AttributeSet attrs) {
        super(context,attrs);
        mScreenWidth = getResources().getDisplayMetrics().widthPixels;
        mWidthDate = mScreenWidth / 7;
        DAY_OF_WEEK = getResources().getStringArray(R.array.day_of_week);
    }

    /**
     * 자식 view 사이즈(width/height)를 재 설정하는 함수
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int count = getChildCount();
        int maxHeight = 0;
        int maxWidth = 0;
        int childState = 0;

        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(mMillis);

        for(int i=0; i < count; i++) {
            final View child = getChildAt(i);

            if(child.getVisibility() == GONE) continue;

            ///< 자식뷰의 사이즈를 측정
            measureChild(child,widthMeasureSpec,heightMeasureSpec);

            ///< 이전 자식뷰 상태를 합쳐서 두 상태의 조합을 반영하는 새로운 정수를 반환
            childState = combineMeasuredStates(childState, child.getMeasuredState());
        }
        // 요일과 일자로 항상 7칸 2줄로 이루어짐(mWidthDate 폰 가로 사이즈 / 7 한 크기)
        maxHeight = (int) (2 * (mWidthDate * 0.75));
        maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
        // 제공된 크기와 모드에 따라 측정 규격을 작성합니다.
        // MEASURED_SIZE_MASK :  getMeasuredWidthAndState()와 getMeasuredWidthAndState()그 실제 측정 된 크기를 제공합니다
        // AT_MOST : 사양 측정 모드 : 그것은 지정된 크기까지 원하는대로 아이로 클 수 있습니다.(wrap_content)
        int expandSpec = MeasureSpec.makeMeasureSpec(MEASURED_SIZE_MASK, MeasureSpec.AT_MOST);
        /**
         * onMeasure 메소드를 오버라이드 하면, setMeasuredDimension 메소드가 호출이 되지 않으므로, 직접 호출해줘야 함
         * setMeasuredDimension(int width, int height)
         * - width : 가로크기
         * - height : 세로크기
         * resolveSizeAndState(int size, int measureSpec, int childMeasuredState)
         * - size : 뷰 가로 크기
         * - measureSpec : 부모에 의해서 측정된 값
         * - childMeasuredState : 뷰의 자식 크기 정보
         * - MEASURED_HEIGHT_STATE_SHIFT :  MEASURED_STATE_MASK 높이에 도착하는 같은 단일의 int로 폭과 높이를 모두 결합 기능에 대한 비트
         *
         * 여기서는 계산된 크기를 부모 뷰에 맞게 사이즈를 조정하도록 값을 설정하였다.
         */
        setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
                resolveSizeAndState(maxHeight, expandSpec, childState << MEASURED_HEIGHT_STATE_SHIFT));

        // 최종 측정된 높이 값을 레이아웃에 설정한다.
        LayoutParams params = getLayoutParams();
        params.height = getMeasuredHeight();

    }

    /**
     * 뷰가 그 자식들에게 크기와 위치를 할당할 때 호출됩니다.
     * @param b
     * @param i
     * @param i1
     * @param i2
     * @param i3
     */
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        final int count = getChildCount();
        int curWidth, curHeight, curLeft, curTop, maxHeight;

        final int childLeft = this.getPaddingLeft();
        final int childTop = this.getPaddingTop();
        ///< 측정된 가로크기에서 우페딩 값을 뺀 값(실제 가로크기를 구하기 위한 변수)
       final int childRight = this.getMeasuredWidth() - this.getPaddingRight();
        ///< 측정된 높이에서 아래페딩 값을 뺀 값(실제 세로크기를 구하기 위한 변수)
        final int childBottom = this.getMeasuredHeight() - this.getPaddingBottom();
        ///< 가로 전체 길이에서 좌페딩 값을 뺀 값이 실제 가로크기
        final int childWidth = childRight - childLeft;
        ///< 세로 전체 길이에서 위페딩 값을 뺀 값이 실제 세로크기
        final int childHeight = childBottom - childTop;

        maxHeight = 0;
        curLeft = childLeft;
        curTop = childTop;

        for (int h = 0; h < count; h++) {
            View child = getChildAt(h);

            if (child.getVisibility() == GONE)
                return;

            /**
             * 제공된 크기와 모드에 따라 측정 규격을 작성합니다.
             * childWidth :  계산된 뷰의 가로 크기
             * childHeight : 계산된 뷰의 세로 크기
             * AT_MOST : 사양 측정 모드 : 그것은 지정된 크기까지 원하는대로 아이로 클 수 있습니다.(wrap_content)
             */
            child.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST));
            ///< 실제가로크기 설정
            curWidth = mWidthDate;
            ///< 실제세로크기 설정
            curHeight = (int) (mWidthDate * 0.75);

            ///< 행변경을 위한 조건문
            if (curLeft + curWidth >= childRight) {
                curLeft = childLeft;
                curTop += maxHeight;
                maxHeight = 0;
            }

            /**
             * 뷰의 크기 및 위치를 할당하는 메소드 호출
             * 크기를 측정하고 나서 호출
             * laout(int l, int t, int r, int b)
             * - l : 부모기준으로 왼쪽 위치
             * - t : 부모기준으로 위쪽 위치
             * - r : 부모기준으로 오른쪽 위치
             * - b : 부모기준으로 아래 위치
             */
            child.layout(curLeft, curTop, curLeft + curWidth, curTop + curHeight);

            ///< 현재 세로크기는 최대 세로크기보다 클수 없음
            if (maxHeight < curHeight) {
                maxHeight = curHeight;
            }

            ///< 뷰를 우측으로 정렬하기 위해서 가로크기 만큼 좌페딩값을 더함
            curLeft += curWidth;
        }
    }

    public void setDate(long millis) {
        mMillis = millis;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    private Paint makePaint(int color) {
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(color);
        p.setTextSize(mDefaultTextSize);
        return p;
    }

    /**
     * 선택된 View의 별도의 이벤트를 처리하기 위한 함수
     * - 여기서는 선택된 View의 색을 변경
     * @param view
     */
    public void setCurrentSelectedView(View view) {
        if (getParent() instanceof ViewPager) {
            ViewPager pager = (ViewPager) getParent();
            View tagView = (View) pager.getTag();
            if (tagView != null) {
                long time = (long) tagView.getTag();
                Calendar c = Calendar.getInstance();
                c.setTimeInMillis(time);
                for (int i = 0; i < pager.getChildCount(); i++) {
                    for (int j = 0; j < getChildCount(); j++) {
                        TaTCalendarWeekItemView child = (TaTCalendarWeekItemView) ((TaTCalendarWeekView) pager.getChildAt(i)).getChildAt(j);
                        if (child == null) {
                            continue;
                        }
                        if (child.isStaticText()) {
                            continue;
                        }
                        if (child.isSameDay((Long) child.getTag(), (Long) tagView.getTag())) {
                            child.invalidate();
                            break;
                        }
                    }
                }
            }
            if (tagView == view) {
                pager.setTag(null);
                return;
            }
            long time = (long) view.getTag();
            Calendar cal = Calendar.getInstance();
            cal.setTimeInMillis(time);
            pager.setTag(view);
            view.invalidate();

        }
    }
}

# 사용자 ViewGroup을 생성하기 위한 XML 정의

# View를 이용한 달력의 구성 Cell 그리기

public class TaTCalendarWeekItemView extends View {
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint mPaintBackground = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint mPaintBackgroundToday = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint mPaintBackgroundEvent = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Rect rect;
    private long millis;
    private int dp11;
    private int dp16;

    private int dayOfWeek = -1;
    private boolean isStaticText = false;
    private boolean isTouchMode;
    private boolean hasEvent = false;
    private int[] mColorEvents;

    public TaTCalendarWeekItemView(Context context) {
        super(context);
        initialize();
    }

    private void initialize() {
        dp11 = (int) dp2px(getContext(),11);
        dp16 = (int) dp2px(getContext(),16);

        mPaint.setColor(Color.BLACK);
        mPaint.setTextSize(dp11);

        if (Build.VERSION.SDK_INT >= 23) {
            mPaintBackground.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimaryDark));
            mPaintBackgroundToday.setColor(ContextCompat.getColor(getContext(),R.color.colorAccent));
            mPaintBackgroundEvent.setColor(ContextCompat.getColor(getContext(),R.color.colorPrimary));
        }else{
            mPaintBackground.setColor(getContext().getResources().getColor(R.color.colorPrimaryDark));
            mPaintBackgroundToday.setColor(getContext().getResources().getColor(R.color.colorAccent));
            mPaintBackgroundEvent.setColor(getContext().getResources().getColor(R.color.colorPrimary));
        }
        setClickable(true);
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();
                Log.d("hatti.onTouchEvent", event.getAction() + "");
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
                        isTouchMode = true;
                        break;
                    case MotionEvent.ACTION_UP:
                        if (isTouchMode) {
                            ((TaTCalendarWeekView) getParent()).setCurrentSelectedView(v);
                            isTouchMode = false;
                        }
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        isTouchMode = false;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (!rect.contains(v.getLeft() + (int) event.getX(), v.getTop() + (int) event.getY())) {
                            isTouchMode = false;
                            return true;
                        }
                        break;
                }
                return false;
            }
        });
        setPadding(30, 0, 30, 0);
    }
    @Override
    public void setBackgroundResource(int resid) {
        super.setBackgroundResource(resid);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * Canvas에 중점 구하기.
         * Paint는 Canvas에 그리는 작업을 하는 객체
         * - ascent 는 baseline 위로의 크기이며 descent 는 밑으로의 크기, 두개를 합치면 높이
         */
        int xPos = canvas.getWidth() / 2;
        ///< 실제 그리는 문자나 숫자의 중간이 중점에 위치하기 위해서 Paint의 높이의 절반 만큼을 뺀다.
        int yPos = (int)((canvas.getHeight() /2) - ((mPaint.descent() + mPaint.ascent()) / 2));
        ///< 문자는 가운데 정렬로 그린다.
        mPaint.setTextAlign(Paint.Align.CENTER);
        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(millis);

        TaTCalendarWeekView taTCalendarWeekView = (TaTCalendarWeekView) getParent();
        if(taTCalendarWeekView.getParent() instanceof ViewPager) {
            ViewGroup parent = (ViewPager) taTCalendarWeekView.getParent();
            TaTCalendarWeekItemView itemView = (TaTCalendarWeekItemView) parent.getTag();
            if (!isStaticText && itemView != null && itemView.getTag() != null && itemView.getTag() instanceof Long) {
                long millis = (long) itemView.getTag();
                if (isSameDay(millis, this.millis)) {
                    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        canvas.drawRoundRect(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16, 50f, 50f, mPaintBackground);
                    }else{
                        canvas.drawRect(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16, mPaintBackground);
                    }
                }
            }
        }
        if (!isStaticText && isToday(millis)) {
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                canvas.drawRoundRect(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16, 50f, 50f, mPaintBackgroundToday);
            }else{
                canvas.drawRect(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16,  mPaintBackgroundToday);
            }
        }

        if (isStaticText) {
            // 요일 표시
            mPaint.setTypeface(Typeface.create((String)null, Typeface.BOLD));
            canvas.drawText(TaTCalendarWeekView.DAY_OF_WEEK[dayOfWeek], xPos, yPos, mPaint);
        } else {
            // 날짜 표시
            mPaint.setTypeface(Typeface.create(Typeface.DEFAULT_BOLD, Typeface.NORMAL));
            mPaint.setColor(Color.BLACK);

            canvas.drawText(calendar.get(Calendar.DATE) + "", xPos, yPos, mPaint);
        }

        if (hasEvent) {
            if (Build.VERSION.SDK_INT >= 23) {
                mPaintBackgroundEvent.setColor(ContextCompat.getColor(getContext(),mColorEvents[0]));
            }else{
                mPaintBackgroundEvent.setColor(getResources().getColor(mColorEvents[0]));
            }

            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                canvas.drawRoundRect(xPos - 5, getHeight() / 2 + 20, xPos + 5, getHeight() / 2 + 30, 50f, 50f, mPaintBackground);
            }else{
                canvas.drawRect(xPos - 5, getHeight() / 2 + 20, xPos + 5, getHeight() / 2 + 30, mPaintBackground);
            }
        }
    }

    private boolean isToday(long millis) {
        Calendar cal1 = Calendar.getInstance();
        return isSameDay(cal1.getTimeInMillis(), millis);

    }

    public void setDate(long millis) {
        this.millis = millis;
        setTag(millis);
    }

    public void setDayOfWeek(int dayOfWeek) {
        this.dayOfWeek = dayOfWeek;
        isStaticText = true;
    }

    public void setEvent(int... resid) {
        hasEvent = true;
        mColorEvents = resid;
    }
    public boolean isStaticText() {
        return isStaticText;
    }

    public boolean isSameDay(long millis1, long millis2) {
        Calendar cal1 = Calendar.getInstance();
        Calendar cal2 = Calendar.getInstance();
        cal1.setTimeInMillis(millis1);
        cal2.setTimeInMillis(millis2);
        return (cal1.get(Calendar.YEAR) == cal2.get(Calendar.YEAR) && cal1.get(Calendar.MONTH) == cal2.get(Calendar.MONTH) && cal1.get(Calendar.DATE) == cal2.get(Calendar.DATE));
    }

    public static float dp2px(Context context, float dp) {
        return dp * context.getResources().getDisplayMetrics().density;
    }
}