사용자 인터페이스 - 레이아웃[ 일반레이아웃, 어댑터 ]

이 포스팅은

developer.android.com/guide/topics/ui/declaring-layout?hl=ko

레이아웃  |  Android 개발자  |  Android Developers

안드로이드 디벨로퍼 공식 홈페이지 문서를 읽고 요약한 글입니다.

 

이전글

---

 https://ckstmsla.tistory.com/entry/사용자-인터페이스-레이아웃-View-ViewGroup-속성-위치-크기-여백-및-패딩

사용자 인터페이스 - 레이아웃[ View & ViewGroup 속성, 위치, 크기, 여백 및 패딩 ]

 

 

일반 레이아웃

---

- ViewGroup 클래스의 각 서브클래스는 각기 고유한 방식으로 자신 안에 중첩된 뷰를 표시

- 레이아웃 계층 구조를 가능한 얕게 유지하도록 해야함, 중첩된 레이아웃이 적을수록 레이아웃이 더 빠르게 그려짐.
( 가로로 넓은 뷰 계층 구조가 세로로 깊은 뷰 계층 구조보다 나음 ). 

 

[ 선형 레이아웃 / LinearLayout ]

- 여러 하위 요소를 하나의 가로방향 또는 세로 방향 행으로 정리하는 레이아웃.

- 이 레이아웃은 창의 길이가 화면 길이를 웃도는 경우 스크롤바를 생성 

 

[ 상대적 레이아웃 / RelativeLayout ] 

- 여러 하위 객체의 위치를 서로 상대적으로 나타내거나 ( 하위 객체 A가 하위 객체 B의 왼쪽 ),

상위 요소와 상대적으로 나타낼 수 있도록 해줌 ( 상위 요소의 맨 위에 맞춰 정렬 ). 

[ 웹 보기 / WebView ] 

-  웹 페이지 표시 

 

[ 어댑터로 레이아웃 빌드 ]

- 레이아웃의 콘텐츠가 동적이거나 미리 정의되지 않은 경우,  AdapterView의 서브클래스가 되는 레이아웃을 사용하여 런타임에 뷰로 레이아웃을 채울 수 있다.

- AdapterView 클래스의 서브클래스는 Adapter를 사용하여 자신의 레이아웃에 데이터를 바인딩.

- Adapter :  데이터 소스와 AdapterView 레이아웃 사이의 중개자 역할을 함.

- Adapter가 데이터를 검색하여 ( 배열 or 데이터베이스 쿼리와 같은 Source로 부터 ) 각 항 목을 뷰로 변환해서 AdapterView 레이아웃에 추가될 수 있도록 함.

Flow between adapterView and dataSource

예)  어댑터로 지원되는 일반적인 레이아웃의  

• 1차원 목록 보기 / LinearLayoutManager
  > 스크롤 단일 열 목록 표시
• 2차원 격자 보기 / GridLayoutManager
  > 열과 행의 스크롤 그리드 표시
  
• 스피너 / Spinner

 

[ 데이터로 어댑터 뷰 채우기 ] 

- ListView 또는 GridView와 같은 AdapterView를 채우려면 AdapterView인스턴스를 Adapter에 바인딩 하면 됨.

- 외부 소스로부터 데이터를 검색하여 각 데이터 항목을 나타내는 View를 생성 

- Adapter의 서브클래스를 여러개 제공, 여러 가지 종류의 데이터를 검색하고 AdapterView의 뷰를 빌드하는데 유용

예 ) 가장 일반적인 어댑터 

• ArrayAdapter  :
  - 데이터 소스가 배열인 경우에 사용
  - ArrayAdapter가 각 항목에서 toString()을 호출하고 그 콘텐츠를 TextView에 배치함으로써 각 배열 항목의 뷰를 생성
  - TextView가 아닌 뷰를 생성하고자 하는 경우, ArrayAdapter클래스를 확장하고 getView()를 재정의하여 원하는 뷰 유형을 반환

/* 
Param1 : Context
Param2 : 배열에 있는 각 문자열의 TextView가 들어 있는 레이아웃
Param3 : 문자열 배열
*/
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

// ListView에서 setAdapter()를 호출하여 adapter 지정
val listView: ListView = findViewById(R.id.listview)
listView.adapter = adapter

 

• SimpleCursorAdapter
  - 데이터 소스가 Cursor 인 경우에 사용
  - SimpleCursorAdapter를 사용하는 경우, Cursor에 있는 각행에 사용할 레이아웃을 지정해야 함.
  - Cursor의 어느 열이 레이아웃의 어느 뷰에 삽입되어야 할지도 지정해야함.
  
  
  

//SimpleCursorAdapter를 인스턴스화하는 경우, 
//각 결과에 사용할 레이아웃, 결과가 들어 있는 Cursor 및 다음 두 배열을 전달.
val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                          ContactsContract.CommonDataKinds.Phone.NUMBER)
val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

//SimpleCursorAdapter가 Cursor에 있는 각 행에 관한 뷰를 하나씩 생성.
// 상응하는 toViews 뷰 안에 각 fromColumns항목을 삽입하여 제공된 레이아웃 사용
val adapter = SimpleCursorAdapter(this,
        R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
val listView = getListView()
listView.adapter = adapter

 

- 앱 수명이 남아 있는 동안 어댑터가 읽는 기본 데이터를 변경하는 경우,
notifyDataSetChanged() 를 호출해야 함. 연결된 뷰에 데이터가 변경되었으며 새로 고침해야 함을 알림  

[ 클릭 이벤트 처리 ]

- AdapterView에 있는 각 항목에서의 클릭 이벤트에 응답하려면
AdapterView.OnItemClickListener인터페이스를 구현