RecyclerView

  • 특징
    반복되는 패턴 적용에 유리한 View(일종의 리스트)
    LayoutManager 속성을 추가하여 리스트 타입을 쉽게 변경 할 수 있다.
    재활용성이 뛰어난 구조

구성 요소

DataClass
ViewHolder
LayoutManager
Adapter

DataClass

  • 위의 네모난 채팅방을 item이라고 하며, 이 item에 들어갈 **데이터(자료형)**가 무엇인지 명시
  • 프로필 이미지(Int), 채팅방 이름(String), 미리보기(String), 날짜(String)이 표시 된다.

  • 위 서버의 Response를 보고 작성한 DataClass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
data class GetBoardResponse(
        var message : String,
        var data : ArrayList<GetBoardResponseData>
)

class GetBoardResponseData(
        var board_idx : Int,
        var board_title : String?,
        var board_content : String,
        var board_view : Int,
        var board_photo : String?,
        var board_writetime : String?,
        var user_id : String
)
  • 서버 API를 보고 DataClass를 작성할 경우에는 서버의 Key값과 동일하게 변수명을 작성하여야 한다.

ViewHolder

  • Item에 들어갈 View가 무엇인지 명시
  • 프로필 이미지(ImageView), 채팅방 이름(TextView), 미리보기((TextView), 날짜((TextView)

LayoutManger

  • Item들의 배치 방식을 결정
  • LinearLayoutManager(선형), StaggeredGridLayoutManager(지그재그, 정확히는 가변 그리드), GridLayoutManager(사진첩 형태)
  • 이번 세미나에서는 LinearLayoutManager를 통해서 수직 배치를 할 예정!

Adapter

  • DataClass와 ViewHolder를 연결
  • 이번 세미나에서는 DataClass의 프로필 이미지(Int)을 ViewHolder의 프로필 ImageView에, 채팅방(String)을 채팅방 TextView에, 미리보기(String)을 미리보기 TextView에 연결, 날짜(String)를 날짜 TextView에 연결한다.
  • 서버와 통신을 할 경우에는 DataClass를 서버의 Response(응답)을 보고 작성하게 되는데, DataClass가 서버의 응답을 받아서 ViewHolder와 연결을 해주면 된다!!
  • DataClass가 중요한 부분!!
  • 연결 후 RecyclerView가 Adapter를 잡게 함으로써 사용자에게 보여준다.

과제

  1. 복습 : RecyclerView를 이용한 리스트 만들기 [hint : color값 넘기기!]
  2. 응용 : Item 요소 중에서 '프로필 이미지’를 클릭하면 프뢸 이미지만 볼 수 있는 Activity로 넘어가도록 작성 [hint : Adapter의 ViewHolder를 변경하면 됨]
    [주의 : Item을 클릭하면 상대방과의 채팅방으로 이동하는 Activity와는 별개로 작성해야 함]
  3. 심화 : RecyclerView의 Header를 만들어서 다른 형태의 Item도 RecyclerView에 포함되도록 작성

Github : https://github.com/WooVictory/SOPT_22th_Seminar3_HomeWork