[코틀린(Kotlin)] 어댑터 뷰(AdapterView), 리스트 뷰(ListView), 그리드 뷰(GridView)

• 어댑터 뷰 (AdapterView)
• 리스트 뷰 (ListView)
• 그리드 뷰 (GridView)
• 이미지그리드 뷰

 

1. 어댑터뷰

여러 개의 항목을 다양한 형식으로 나열하고 선택할 수 있는 기능을 제공하는 뷰

어댑터 뷰는 표시할 항목 데이터를 직접 관리하지 않고, 어댑터라는 객체로부터 공급한다

어댑터 뷰 예시

 

 

1-1. 어댑터 뷰의 종류

1. 리스트 뷰(ListView) : 항목을 수직으로 나열시키는 방식
2. 그리드 뷰(GridView) : 항목을 격자형태로 나열시키는 방식

 

 

1-2. 어댑터란?

데이터를 관리하며 데이터 원본과 어댑터 뷰 사이의 중계 역할

어댑터 예시

요약)

어댑터에 정의된 인터페이스를 바탕으로 필요한 정보를 요청하여 항목 뷰를 화면에 표시하거나 선택된 항목 뷰를 처리한다

 

 

1-3. 어댑터의 종류

• BaseAdapter
  - 어댑터 클래스의 공통 구현
  - 사용자 정의 어댑터 구현 시 사용
• ArrayAdapter
  - 객체 배열이나 리소스에 정의된 배열로부터 데이터를 공급받음
• CursorAdapter
  - 데이터베이스로부터 데이터를 공급받음
• SimpleAdapter
  - 데이터를 Map(키, 값)의 리스트로 관리
  - 데이터를 xml 파일에 정의된 뷰에 대응시키는 어댑터

어댑터의 종류

 

 

2. 리스트 뷰 (ListView)

어댑터 뷰의 대표 위젯으로서, 복수 개의 항목을 수직으로 표시

리스트뷰 예시

 

 

2-1. 리스트 뷰(ListView) 설정 절차

2-1-1. 메인화면 레이아웃에 ListView 위젯 정의 (xml 코드)

 

2-1-2. 어댑터 객체 생성 후 ListView 객체에 어댑터 연결 (Kotlin 코드) 

ArrayAdapter 생성자

ArrayAdapter(Context context, int resources, int textViewResourced, T [] objects)

context : 현재 컨텍스트

resource : 항목으로 표시될 텍스트 뷰의 리소스 ID

objects : 어댑터로 공급될 데이터 원본으로 단순 배열

resource : 항목으로 표시될 텍스트 뷰의 리소스 ID

 

2-1-3. 결과

리스트 뷰(ListView) 결과

 

 

 

3. 그리드 뷰 (GridView)

2차원 스크롤 가능한 그리드에 항목을 표시

생성절차는 리스트 뷰(ListView)와 같다

 

그리드 뷰 예시

 

 

3-1. 그리드 뷰(GridView) 설정 절차

3-1-1. 메인화면 레이아웃에 GridView 위젯 정의 (xml 코드)

• android:columnWidth : 그리드 항목 하나의 폭을 설정
• android:numColumns="auto_fit" : 열의 폭과 화면 폭을 바탕으로 자동 계산
• android:verticalSpacing : 항목 간의 간격 설정
• android:stretchMode="columnWidth" 열 내부의 여백을 폭에 맞게 채움

 

3-1-2. ArrayAdapter 객체를 생성하고 GridView 객체에 연결 (Kotlin 코드)

객체 생성 코드, 객체 연결 및 결과

 

 

3-2. 이미지 그리드 뷰 설정 절차

3-1은 string, 3-2는 이미지 그리드 뷰

3-2-1. 메인화면 레이아웃에 GridView 위젯 정의 (xml 코드)

= 3-1-1과 동일

 

3-2-2. 어댑터 정의 (Kotlin 코드)

그리드 뷰의 항목으로 이미지를 공급하는 ImageAdapter를 BaseAdapter로부터 파생하여 정의한다

• gerView
  그리드 뷰에서 뷰를 요청했을 때, 어떤 형식의 뷰를 보여줄 것인지 설정
• get(position)
  포지션에 해당하는 어레이 속 이미지뷰를 설정

 

3-2-3. 어댑터를 생성하고 GridView 객체에 연결 (Kotlin 코드)

 

3-2-4. 항목 클릭 이벤트 처리

AdapterView의 항목이 클릭될 때, 호출되는 callbackmethod의 인터페이스

 

이미지그리드뷰_메인액티비티_클릭이벤트

 

3-2-5. 결과