[메인페이지]

[yellow-jam]

화면 구성(UI) 논의

• 앱 실행 시 기본으로 보여지는 화면
• 각 세부기능으로 연결하는 UI
• 아래 이미지는 내가 제안하는 틀
  

기능 면에서

• 스플래시 화면에서) 로그인한 유저는 메인으로, 하지 않은 유저는 회원가입/로그인 화면으로 넘어가게 하는 법
• 액티비티, 프래그먼트 이용할 부분 나누기

[otcroz]

<recyclerView 코드 작성에 관한 고민>

recyclerView = 어댑터 클래스 + 리사이클러 하나의 목록(xml) + 리사이클러 뷰를 보여줄 영역 파일
리사이클러 뷰 하나를 보여주기 위해 이렇게 3개의 파일을 만들어야 하는데
어댑터 클래스를 하나하나 만들기 귀찮아서(?비효율적이라고 생각해서?)
하나의 어댑터에서 여러 개의 리사이클러 뷰를 관리할 수 있도록 조건을 설정하려고 했음.

class MainAdapter(val datas: MutableList<String>?) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder{
        return MainViewHolder(ItemRecyclerviewBinding.inflate(LayoutInflater.from(parent.context), parent, false ))
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val binding = (holder as MainViewHolder).binding
        binding.mainItemList.text = datas!![position] //null 불허용
    }

    override fun getItemCount(): Int {
        return datas?.size ?: 0 // datas.size가 0일때 0 반환
    }
}

onCreateViewHolder 메서드에서 서로 다른 리사이클러 뷰를 구분하여 각각 리사이클러 하나의 목록(xml)을 적용하려고 함

그러니까 내가 원하는 코드 형태는

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder{
    if(프래그먼트1에서 사용하는 리사이클러 뷰일 때)
        return MainViewHolder(ItemRecyclerviewBinding11.inflate(LayoutInflater.from(parent.context), parent, false ))
    }
    else if (프래그먼트2에서 사용하는 리사이클러 뷰일 때)
       return MainViewHolder(ItemRecyclerviewBinding22.inflate(LayoutInflater.from(parent.context), parent, false ))
    }

[otcroz]

<멀티뷰 타입 recyclerView>
https://yunaaaas.tistory.com/61

[otcroz]

onBindViewHolder에서 이 둘을 나누는 방법은....
근데 앞으로 리사이클러 뷰 여러 개 사용할거 생각하면 멀티뷰 리사이클러 뷰를 하나 만들어두고 관리하는 게 좋을 듯 하다. (유지보수에도 좋고?)

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        // 이 둘을 나누는 방법은?
        val binding_recycle = (holder as ListViewHolder).recycleBinding
        binding_recycle.mainItemListRecycle.text = datas!![position] //null 불허용

        val binding_todo = (holder as TodoViewHolder).todoBinding
        binding_todo.mainItemListTodo.text = datas!![position] //null 불허용
    }

[otcroz]

• Adapter: MainAdapter
• ViewHolder: ListViewHolder, TodoViewHolder
• MultiRecycler: 데이터 모델 설정

모앱 실습 때는 MutableList 넣었는데 대신에 Mutable 넣었다고 생각하면 됨

[otcroz]

[otcroz]

<주요 코드 : ViewHolder>

class ListViewHolder(val recycleBinding:ItemRecyclerviewBinding) : RecyclerView.ViewHolder(recycleBinding.root) {}// recycler에 대한 목록
class TodoViewHolder(val todoBinding: ItemTodoBinding) : RecyclerView.ViewHolder(todoBinding.root){} // todo에 대한 목록

• n개 종류의 recyclerView를 만드려면 n개의 viewHolder 가 필요하다.

[otcroz]

<주요 코드: Adapter>

1. MainAdapter 선언

• 매개변수로 MutableList type의 datas를 받는다.
• RecyclerViewData는 직접 만든 데이터 모델

class MainAdapter(val datas: MutableList<RecyclerViewData>?) : RecyclerView.Adapter<RecyclerView.ViewHolder>()

2. MainAdapter 구현

• ViewType에 따라서 다른 ViewHolder가 보이도록 함

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when(viewType){
            todo_type -> TodoViewHolder(ItemTodoBinding.inflate(LayoutInflater.from(parent.context), parent, false ))
            list_type -> ListViewHolder(ItemRecyclerviewBinding.inflate(LayoutInflater.from(parent.context), parent, false ))
            else -> { // list_type
                throw RuntimeException("알 수 없는 viewType Error")
            }
        }
    }

• holder 값에 따라 바인딩 및 값 설정

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if(holder is ListViewHolder){
            val bindingRecycle = (holder as ListViewHolder).recycleBinding
            bindingRecycle.mainItemListRecycle.text = datas!![position].title

        } else if( holder is TodoViewHolder){
            val bindingTodo = (holder as TodoViewHolder).todoBinding
            bindingTodo.mainItemListTodo.text = datas!![position].todo
        }
    }

• 추가로 넣어준 메서드: getItemViewType
• ViewType의 값 설정

    override fun getItemViewType(position: Int): Int {
        return datas?.get(position)?.type ?: 0 // 0으로 설정 -> 타입이 없으므로 오류 발생하도록
    }

[otcroz]

<주요 코드: RecyclerViewData>

• 데이터 모델

// 리사이클러 뷰의 값을 저장
const val todo_type = 1
const val list_type = 2

data class RecyclerViewData( // 메인 목록에서 사용
    val image: Int?,
    val title: String?,
    val todo: String?,
    val name: String?,
    val type: Int?,
)

[otcroz]

<현재 진행도>

1. 완성

• 기본적인 레이아웃 구성
• 멀티뷰 리사이클러 뷰 구성
• 강아지 프로필 레이아웃 구성

2. 구현할 것

• - 커스텀 캘린더: 주 단위로 보이도록🌟 => 이거 할 수 있겠지 그럼 당연하지... 매달려보자
• - Todo User: 여러 명의 유저가 선택되었을 때 n명의 유저 프로필이 보이도록(이건 visibilty 처리하면 될 듯)
• - Todo가 없을 때 Todo가 없다고 출력하도록 (if data 배열.length() == 0일때 처리하도록)
• - 스와이프했을 때 상태 바 보이게
• - 각 Activity intent로 연결하기
• - 필요한 Activity 생성
• - ScrollView 구현하기
• 레이아웃 수정

3. 의논할 것

• - 코코 상태 부분을 앱 바로 설정할까 고민
• - 나브바 만들기(밑에 있는 그거 navigator 바) 🌟
• - 탭 바 설정하기 (팀원 간 논의 필요, 탭 바 통일, 일단 오른쪽 상단에 설정 아이콘만 넣기)

[otcroz]

Custom Calender를 만들기 위해 Fragment가 필요하다고 해서 Fragment안에 2개의 Fragment를 배치시켰음
현재 진행 현황

[otcroz]

<RecyclerView 코드를 수정한 이유>

멀티 뷰 형태의 코드를 일반적인 리사이클러 뷰 코드로 수정함.
1개의 어댑터가 n개의 뷰 홀더 관리(멀티 뷰 리사이클러 뷰)
-> 즉, 1개의 리사이클러 뷰 당 1개의 어댑터를 사용하는 형태로?(일반적인)

merge 전이라 같은 데이터 모델의 리사이클러 뷰를 사용하는 경우가 없음.
=> _같은 데이터모델, 다른 UI를 구현하려고 멀티뷰 리사이클러 뷰를 사용_했던 것.
=> 내 생각엔 main에서 보여주는 todo 리사이클러 뷰, Todo 페이지에서 보여주는 todo 리사이클러 뷰의 UI를 다르게 보여줄 때 사용하면 될 것 같음.

[otcroz]

<Custom Calendar를 만들기 위한 준비>

• Fragment
• Fragment xml
• item_calendar_list.xml
• Calendar Adapter
• data Class
• array.xml

[otcroz]

달력을 구현하긴 했으나 어댑터 수정한 것 빼고 거의 코드 복붙이나 다름없기에
TIL을 쓰면서 코드 정리하고 공부를 해야함.
이제 달력 날짜에 따라서 todo가 보이게 하는 것 => DB 연결한 다음에 할 일!!

[otcroz]

메인페이지 UI 작업

• 전체 View가 ScrollView로 동작하도록
• Todo가 없을 경우 해당 Todo가 없다고 출력하도록 함
• 메인페이지의 세부적인 UI 수정

[otcroz]

다음에 할 일

• Todo User: 여러 명의 유저가 선택되었을 때 n명의 유저 프로필이 보이도록(이건 visibilty 처리하면 될 듯)
• 스와이프했을 때 상태 바 보이게
• 각 Activity intent로 연결하기

의논할 것

• NavBar 만들기(밑에 있는 그거 navigator 바) 🌟
• 탭 바 설정하기 (팀원 간 논의 필요, 탭 바 통일, 일단 오른쪽 상단에 설정 아이콘만 넣기)

[yellow-jam]

빛나라 우리의 🌟 o t c r

당신의 노고에 감사드립니다 (SHAPE-UP 일동)
앞날에 도움이 되고자 찾아왔습니다...

수정 요청

단순하게 가자!
하단에 가로로 늘어서 있는 메뉴들은 RecyclerView 대신 ScrollView 내부에 Button을 채워넣는 형태로 구현 부탁드립니다( ' ')9

세로로 넘기는 ScrollView

<ScrollView>
    <LinearLayout android:orientation="vertical">
        <Button />
        <Button />
        ...
        <Button />
     </LinearLayout>
</ScrollView>

가로로 넘기는 ScrollView

<HorizontalScrollView>
    <LinearLayout android:orientation="horizontal">
        <Button />
        <Button />
        ...
        <Button />
     </LinearLayout>
</HorizontalScrollView>

요청 사유

1. 리사이클러뷰의 특성

RecyclerView는 (1) 항목이 매우 많은 리스트 (2) 추가, 수정, 삭제 등의 동작으로 인해 수정이 잦은 리스트를 표현하기 적합한 뷰입니다. 리스트의 항목을 나타내는 과정에서 뷰를 재사용하기 때문에 이름에 recycler가 들어가는 것이기도 합니다.

현재 리사이클러뷰로 표현되고 있는 메뉴 항목은 4~5개이며, 개발자가 건드리지 않는 이상 개별 항목이나 전체 리스트에 변경이 생기지 않습니다.

2. 이벤트 핸들러 관련

리사이클러뷰의 각 항목을 터치하는 동작에 대한 이벤트 처리가 물론 가능하나(리사이클러뷰에서 이벤트가 일어난 뷰의 position을 감지해 각 항목에 대한 처리를 관리함), 버튼으로 단순하게 구현했을 때(버튼에 직접 이벤트 핸들러 설정)에 비해 코드 레벨이 깊어집니다.

3. 버튼 스타일 지정

리사이클러뷰의 데이터리스트에 이미지 속성 등을 설정해서 꾸미기보다는 버튼을 직접 커스텀하는 편이 좋겠습니다! (예) ImageButton 사용)

화이팅!!!

구상안은 한참 전에 올려주셨는데 뒤늦게 발견해 피드백 드립니다. 번거롭게 해 드려 죄송합니다... 사죄합니다... 당신의 디테일한 고민에 cheers...☆ otcr님과 함께하는 우리 팀의 앞날이 창창하네요
시험기간 끝나면 잊을까봐 미리 적어둡니다 럽유