[안드로이드 코틀린] 커스텀 달력 만드는 방법 part4 토요일 일요일 색상지정 및 날짜 클릭 이벤트

이번 시간에는 토요일은 파란색, 일요일은

빨간색으로, 평일과 다르게 표현하고 

클릭하면 해당 날짜를 메시지로 보여주는

기능을 보여주겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.06.08 - [안드로이드] - [안드로이드 코틀린] 커스텀 달력 만드는 방법 part3 날짜 구현

[안드로이드 코틀린] 커스텀 달력 만드는 방법 part3 날짜 구현

---

목차

1. 실행 화면
2. 클릭 인터페이스 만들기 OnItemListener.kt
3. 날짜 어댑터 수정 CalendarAdapter.kt
4. 메인 코드 수정 MainActivity.kt

---

1. 실행 화면

2. 클릭 인터페이스 만들기 OnItemListener.kt

 - 설명 - 

 선언만 하고 구현은 메인 코드에서 합니다.

interface OnItemListener {

    fun onItemClick(dayText: String)
}

 

3. 날짜 어댑터 수정 CalendarAdapter.kt

 - 설명 -

1. private val onItemListener: OnItemListener

 생성자에 인터페이스 추가

2.   if( (position + 1) % 7 == 0)

 토요일 

3. else if( position == 0 || position % 7 == 0)

 일요일

4. onItemListener.onItemClick(day)

 클릭 이벤트에서 날짜를 넘겨준다. 

class CalendarAdapter(private val dayList: ArrayList<String>,
                      private val onItemListener: OnItemListener):
    RecyclerView.Adapter<CalendarAdapter.ItemViewHolder>() {


    class ItemViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        val dayText: TextView = itemView.findViewById(R.id.dayText)
    }

    //화면 설정
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.calendar_item, parent, false)

        return ItemViewHolder(view)
    }

    //데이터 설정
    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {

        //날짜 변수에 담기
        var day = dayList[holder.adapterPosition]

        holder.dayText.text = day

        //텍스트 색상 지정(토,일)
        if((position +1) % 7 == 0){ //토요일은 파랑
            holder.dayText.setTextColor(Color.BLUE)

        }else if( position == 0 || position % 7 == 0){ //일요일은 빨강
            holder.dayText.setTextColor(Color.RED)
        }

        //날짜 클릭 이벤트
        holder.itemView.setOnClickListener {
            //인터페이스를 통해 날짜를 넘겨준다.
            onItemListener.onItemClick(day)
        }
    }

    override fun getItemCount(): Int {
        return dayList.size
    }
}

 

4. 메인 코드 수정 MainActivity.kt

 - 설명 - 

1. OnItemListener 

인터페이스를 구현하기 위해서 OnItemListener 추가

2.  CalendarAdapter(dayList, this)

 어댑터 생성자에 인터페이스를 추가했으니 

 메인코드에도 인자 추가

 3. yearMonthFromDate

 날짜 타입 변경 함수(년, 월)

 4. override fun onItemClick(dayText: String)

  어댑터에서 넘어온 dayText를 알림으로 보여준다.

class MainActivity : AppCompatActivity(), OnItemListener {

    private lateinit var binding: ActivityMainBinding

    //년월 변수
    lateinit var selectedDate: LocalDate

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //binding 초기화
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //현재 날짜
        selectedDate  = LocalDate.now()

        //화면 설정
        setMonthView()

        //이전달 버튼 이벤트
        binding.preBtn.setOnClickListener {
            //현재 월 -1 변수에 담기
            selectedDate = selectedDate.minusMonths(1)
            setMonthView()
        }

        //다음달 버튼 이벤트
        binding.nextBtn.setOnClickListener {
            selectedDate = selectedDate.plusMonths(1)
            setMonthView()
        }
    }

    //날짜 화면에 보여주기
    private fun setMonthView() {
        //년월 텍스트뷰 셋팅
        binding.monthYearText.text = monthYearFromDate(selectedDate)

        //날짜 생성해서 리스트에 담기
        val dayList = dayInMonthArray(selectedDate)

        //어댑터 초기화
        val adapter = CalendarAdapter(dayList, this)

        //레이아웃 설정(열 7개)
        var manager: RecyclerView.LayoutManager = GridLayoutManager(applicationContext, 7)

        //레이아웃 적용
        binding.recyclerView.layoutManager = manager

        //어뎁터 적용
        binding.recyclerView.adapter = adapter
    }

    //날짜 타입 설정(월, 년)
    private fun monthYearFromDate(date: LocalDate): String{

        var formatter = DateTimeFormatter.ofPattern("MM월 yyyy")

        // 받아온 날짜를 해당 포맷으로 변경
        return date.format(formatter)
    }

    //날짜 타입(년, 월)
    private fun yearMonthFromDate(date: LocalDate): String{

        var formatter = DateTimeFormatter.ofPattern("yyyy년 MM월")

        // 받아온 날짜를 해당 포맷으로 변경
        return date.format(formatter)
    }


    //날짜 생성
    private fun dayInMonthArray(date: LocalDate): ArrayList<String>{

        var dayList = ArrayList<String>()

        var yearMonth = YearMonth.from(date)

        //해당 월 마지막 날짜 가져오기(예: 28, 30, 31)
        var lastDay = yearMonth.lengthOfMonth()

        //해당 월의 첫 번째 날 가져오기(예: 4월 1일)
        var firstDay = selectedDate.withDayOfMonth(1)

        //첫 번째날 요일 가져오기(월:1, 일: 7)
        var dayOfWeek = firstDay.dayOfWeek.value

        for(i in 1..41){
            if(i <= dayOfWeek || i > (lastDay + dayOfWeek)){
                dayList.add("")
            }else{
                dayList.add((i - dayOfWeek).toString())
            }
        }

        return dayList
    }

    //아이템 클릭 이벤트
    override fun onItemClick(dayText: String) {
        var yearMonthDay = yearMonthFromDate(selectedDate) + " " + dayText + "일"

        Toast.makeText(this, yearMonthDay, Toast.LENGTH_SHORT).show()
    }
}

2022.05.10 - [안드로이드] - [안드로이드] DataBinding 컴포넌트 쉽게 접근하는 방법

[안드로이드] DataBinding 컴포넌트 쉽게 접근하는 방법

2022.06.03 - [안드로이드] - [안드로이드 코틀린] ViewModel - 화면 회전 시 데이터 초기화 막는 방법

[안드로이드 코틀린] ViewModel - 화면 회전 시 데이터 초기화 막는 방법

2022.05.12 - [안드로이드] - [안드로이드] LiveData 만드는 방법 part1 - 실시간 데이터 변경

[안드로이드] LiveData 만드는 방법 part1 - 실시간 데이터 변경