ListView 기본 (1)

ListView는 데이터의 목록을 표현하는 뷰이다. 이 가이드에서는 LivtView와 관련하여 다음과 같은 주제들을 다룰것이다.

  1. 데이터 소스 - ListView에 사용될 데이터.
  2. 셀 표현 - 기본셀 또는 사용자가 생성한 셀의 커스터마이징.
  3. 목록 표현 - ListView의 헤더와 푸터, 그룹핑과 행의 높이 조절등.
  4. 인터랙티브 - 사용자의 행 선택과 새로고침, 컨텍스트 메뉴 행동에 대한 처리

사용예

항상 UI control은 목적에 맞게 적절히 사용되어져야 한다. ListView는 스크롤이 필요한 데이터 목록이 필요한 어떤곳에서든 사용될 수 있으며, 컨텍스트 액션과 데이터 바이딩을 지원한다. ListView는 TableView와 구분되어 사용되어야 한다. iOS의 설정앱에 보여지는 목록과 같이 보여줄 데이터가 미리 정해져 있을 경우에는 ListView보다 TableView가 더 적합하다.
또한, ListView는 동질의 반복되는 데이터를 표현하는데 적합하다. 그것은, ListView가 행에 대해 한가지 셀타입만 지원하기 때문이다. 반면, TableView는 여러가지 셀타입을 지원하므로, 혼합된 형태의 뷰가 필요하다뎐 TableView가 더 적합하다.

컴포넌트

ListView는 각 플랫폼의 네이티브가 가진 기능들을 거의 다 가지고 있다.

  • 헤더와 푸터 - 목록의 시작과 끝지점에 데이터 소스와는 별개로 텍스트 또는 특정뷰를 바인딩 할 수 있다.
  • 그룹 - 데이터를 그룹화하여 표현할 수 있다. 일반적으로, 데이터와 바인딩 된다.
    ListView 1

  • 셀 - ListView의 데이터는 셀의 형태로 표현된다. 각 셀은 하나의 행 데이터와 대응된다. 기본적으로 제공되는 셀을 사용할 수도 있고 사용자가 만들수도 있다. 셀은 XAML 또는 코드로 정의될 수 있다.

    • 기본셀 - 내장된 셀들로서 TextCell, ImageCell과 같은 것이 있다. 기본적으로, 각 플랫폼의 네이티브 컨트롤과 대응되어 좋은 성능을 보여준다.
    • TextCell - 텍스트 문자열을 보여준다. 옵션으로 상세 텍스트를 제공할 수 있다. 상세 텍스트는 두번째 라인에 작은 폰트와 강조된 색상으로 표현된다.
    • ImageCell - 이미지와 텍스트. 왼쪽의 이미지와 오른쪽에 TextCell의 형태로 표현된다.
    • 사용자 정의 셀 - 사용자가 보여주고 싶은 형태로 셀을 꾸밀 수 있다. 노래 목록에 앨범과 가수의 정보등을 함께 표현하는등의 뷰를 만들 수 있다.
      Cell 1

기능

ListView 는 다양한 사용자 인터랙션 경험을 지원한다.

  • Pull-to-Refresh - 각 플랫폼별로 목록 새로고침을 지원
  • Context Action - 목록의 각 행(아이템)에 대한 네이티트 액션을 지원한다. 예를들어, iOS 에서의 밀기 액션(Swipe-to-action) 이다 Android, 윈도우폰의 길게 누름과 같은 액션(long-tap)이 있다.
  • Selection - 각 행을 탭하였을때 선택 또는 선택 해제에 대한 액션을 수행할 수 있다.
    Functionality 1

ListView의 인터랙티브에 대한 더 자세한 사항은 Actions & Interactivity with ListView를 참고하라.