#3. 안드로이드 개발자 가이드 핵심주제, 사용자 인터페이스

1. 포스팅 읽는 방법

 

본 내용은 다른 개발은 해봤지만, 안드로이드를 처음 배우는 사람들이 쉽게 이해할 수 있도록 안드로이드 개발자 가이드를 바탕으로 설명할 것입니다.

 

문서의 내용을 전부 다루지는 않을 것 입니다.

큰 흐름 속에서 중요한 항목을 위주로 설명 할 것이기 때문에, 개발자 가이드 문서를 켜 두시고, 포스팅 된 내용을 읽다가 궁금한 부분이 있으시면 검색해 보시면서 보는 것을 추천 드립니다. 

 

---

2. 목차 

 

핵심 주제

 

- 사용자 인터페이스

   - 레이아웃

  

위의 목차들은 액티비티의 레이아웃은 어떻게 구성되어 있는지, 어떤 종류가 있는지에 대한 내용으로 이루어져 있습니다.

 

---

3. 본문 

"사용자 인터페이스는 사용자가 볼 수 있고 상호작용 하는 모든 것"

사용자 인터페이스는 UI 라고 불립니다. 안드로이드에서 UI를 담당하는 컴포넌트는 앞에서도 계속해서 봐 왔던 액티비티입니다. 액티비티는 어떻게 UI의 역할을 할 수 있을까요?

 

1. 정적인 부분은 리소스에 있는 layout.xml

2. 동적인 부분은 액티비티에 있는 자바 코드

 

를 사용해 액티비티가 UI의 역할을 할 수 있게 됩니다. 

 

다음으로 사용자 인터페이스는 어떻게 구성되어 있을까요?

 

그림 1. UI 계층도

 

UI = ViewGroup객체 + View객체

 

View 객체는 안드로이드에서 자주 사용되는 TextView, Button, EditText와 같은 위젯을 말합니다.

ViewGroup 객체는 이런 View 객체를 배치하고 담고 있는 컨테이너 역할을 하고 있는 위젯( = 레이아웃 )입니다. 

 

이번 포스팅에서는 ViewGroup에 대해 다루어 보도록 하겠습니다.

 

ViewGroup 객체, 즉 레이아웃에는 Linear, Relative, constraint, recycelrview 등이 있습니다. 

그중에서도 ConstriantLayout과 RecyclerView에 대해서 좀 더 자세히 알아보도록 하겠습니다.

 

" Constraint Layout "

 

Constraint라는 사전적인 뜻은 시스템의 변수 혹은 매개변수가 물리적인 이유로 시스템의 요구 떄문에 그 변화 범위에 일정한 한계가 주어짐을 나타냅니다. 한 단어로 표현하자면 구속, 한계 라는 단어로 표현됩니다. 

 

말 그대로 Constraint Layout을 사용하기 위해서는 아래 그림과 같이 제약사항을 둬야 합니다.

 

그림 2. constraint

적어도 가로, 세로에 하나씩 chain을 연결하거나, 4방향 모두 연결해야 사용이 가능합니다.

( 처음 사용 할 때에는 많이 헷갈렸습니다... 글로는 어떻게 설명할 방법이 없네요 많이 사용해보는게 답인거 같습니다. )

 

" Constraint Layout 가장 큰 장점은 중첩 뷰 그룹이 없다 "

왜 Constraint Layout을 사용할까요?

기존에 사용하던 linear , Relative Layout의 보다 더 좋은 성능을 보여주기 때문입니다. 

 

Linear Layout과 차이점을 먼저 보도록 하겠습니다.

Linear Layout안에 button 위젯을 양 옆으로 나란히 두고 싶다면 가장 큰 레이아웃안에 또 다른 Linear Layout을 선언해주고 위젯을 선언해 줘야 합니다. 이런 모양은 위에서 그림1. UI 계층도에서 본 것과 같이 뷰 그룹안에 뷰 그룹, 그리고 그 안에 뷰가 들어 있게 되는 것입니다. 

 

하지만 Constraint Layout은 이러한 중첩된 뷰 계층을 없애고, 모든 뷰들이 같은 계층이 존재 할 수 있게 하기 때문에 더 좋은 성능을 보여주게 되는 것입니다.

 

그렇다면 Relative Layout과 다른 점은 무엇일까요?

사용방법은 사실 비슷하다고 볼 수 있습니다. 하지만 제공하는 기능이나, 사용방식이 더 유연하다는 차이점이 있다는데...

이것은 저도 더 찾아보고 추후해 변경하도록 하겠습니다.

( 아직 확실히 머릿속에 들어오지 않았습니다... )

 

" RecyclerView "

리사이클러뷰는 말 그대로 뷰를 재활용 한다는 뜻입니다. 처음 접해본 분들은 무슨 뜻인지 이해하시기 어려울것이기 때문에 왜 리사이클러 뷰가 나왔는지 천천히 알아보도록 하겠습니다.

 

리사이클러뷰는 리스트뷰 보다 진보하고 유연하다는 장점이 있습니다. 

 

이 말이 무슨 말인지 알기 위해서는 리스트 뷰에 대해서 알아보도록 하겠습니다. 

리스트뷰가 등장하게 된 이유는 연아의 햅틱과 같이 예전 모델에서는 펜으로 터치를 했기 때문에 작은 테이블로 보여줬습니다. 하지만 점차 핸드폰을 직접 손으로 터치하게 되면서 좀 더 큰 뷰를 보여줘야 됬고 그러한 이유로 작은 테이블에서 보다 큰 리스트로 바뀌면서 리스트뷰가 등장했습니다 (Do it 참조)

 

이런 리스트뷰는 안드로이드에서 선택위젯이라고 합니다. 

선택위젯이란  "여러개의 아이템 중 하나를 선택 할 수 있는 위젯" 을 말합니다. 

버튼, 텍스트뷰와 같은 위젯들처럼 입력된 data를 위젯에서 관리하는것이 아닌 Adapter를 만들어서 뷰에 보여질

data를 관리합니다. 

 

그림 3. adapter / adapter에 있는 것은 뷰 하나( = 아이템 ) 

 

이런 방법에는 한가지 문제점이 존재했습니다. 

 

그림 4. 리스트뷰 문제점

한 화면에 보여질 ListView안에 아이템( = view ) 는 총 4개입니다. 그런데 아이템의 갯수가 4개가 넘어갈 때, 안드로이드에서는 계속해서 Adapter 안에 있는 뷰를 반환해줘야 합니다.

이 과정에서 뷰를 생성해야하고, 데이터들을 바인딩하기 위해 findViewById를 뷰 생성마다 계속해서 호출하게 됩니다.

 

이러한 방식으로 인해 성능이 떨어지게 되고, 뷰를 계속해서 생성하다보니 메모리에 문제가 발생하게 됩니다.

 

위의 문제를 해결하고자 나온 방법이 ViewHolder라는 패턴입니다.

뷰홀더 패턴은 화면에 보여질 아이템의 수 만큼 "최초 1회 만 뷰를 메모리에 생성"하고 뷰를 재사용을 하는 방식입니다.

 

그래서 나온 새로운 선택위젯은 리사이클러뷰 입니다. 

( 좀 더 엄밀히 말하면 리스트뷰에서도 뷰홀더 패턴을 사용할 수 있습니다 )

 

그렇다면 리사이클러뷰와 리스트뷰의 차이점은 무엇일까요?

 

"RecyclerView와 ListView의 차이점"

1. ViewHolder 패턴의 강제성, LayoutManager 

   - 리사이클러뷰를 사용하기 위해서는 꼭 뷰 홀더 패턴과 레이아웃 매니저를 사용해야 합니다.

 

2. 수평 스크롤 가능

   - 리사이클러뷰와 리스트뷰 모두 수직( = 상하 )으로 스크롤을 할 수 있습니다. 하지만 리사이클러뷰는

     수평으로도 스크롤이 가능합니다.

 

3. 삽입, 삭제, 이동과 같은 뷰 애니메이션이 가능

    

" RecyclerView 사용법 "

그림 5. 리사이클러뷰

리사이클러뷰는 어뎁터에서 꼭 ViewHodler를 생성해줍니다. 

생성방식은 어뎁터 클래스는 리사이클러뷰의 어뎁터를 확장하고 제너릭타입으로 리사이클러뷰의 뷰홀더를 사용합니다.

 

ex) public class CalendarRecyclerViewAdapter extends RecyclerView.Adapter<CalendarRecyclerViewAdapter.MyViewHodler> 

 

이렇게 작성하면 

 

1. 뷰홀더를 생성하는 onCreateViewHolder
2. 재활용되는 뷰에 데이터를 넣어주는 onBindViewHodler
3. 반환되는 데이터갯수인 getItemCount 

를 작성해 주시면 됩니다.

(실행 순서는 3 -> 1 -> 2)

그리고 리사이클러뷰에 사용될 Layout의 타입을 정해주는데 크게 2가지 방법이 있습니다.

LinearLayout 과 GridLayout 중 하나를 선택하시면 됩니다.

 

그림 6. 리사이클러뷰

 

이렇게 작성된 리사이클러뷰는 위의 그림처럼 뷰 홀더에서 관리하는 뷰가 스크롤을 할때 위에서 사라졌던 뷰를 다시

재사용해서 새로 보여질 부분에 사용되어 성능을 개선해줍니다.

 

---

4. 마무리

이번 포스팅은 사용자인터페이스, UI에 대해 설명해봤습니다.

안드로이드에서 UI는 액티비티가 담당하고 있기에 액티비티가 UI를 어떤식으로 보여주는지, UI는 어떻게 구성되어있는지에 대한 흐름으로 진행했습니다. 

 

그 중에서도 UI는 View 객체와, ViewGroup 객체로 이루어지는걸 소개했고, 

이 중에서도 ViewGroup에서 중요한 ConstraintLayout과 RecyclerVIew에 대해 소개하는 글이 였습니다. 

 

전체적인 내용을  다 다룰수는 없기 때문에 LinearLayout, RelativeLayout과 같은 뷰 그룹에 대한건 꼭 찾아보셧으면 좋겠습니다. 읽어주셔서 감사합니다.

 

---

5. 번외

findViewById에 관해서 

 

listView를 설명하면서 ViewHolder가 없으면 findViewById를 통해 데이터바인딩을 계속해서 해줘야한다고 설명했습니다. 이때, 계속해서 findViewById를 호출하면 성능이 떨어진다고 했는데, 그 이유에 대해 설명드릴려고합니다. 

 

findViewById는 말 그대로 xml에 작성된 위젯의 id 값을 찾아서 바인딩을 해주는 작업입니다. 

이때 뷰 객체의 id를 찾을때는 문제가 되지 않지만, 뷰 그룹 객체( = 레이아웃 )의 id 값을 찾을 때 일치하지 않을 때 문제가 생깁니다 .

 

레이아웃안에 있는 모든 위젯까지 탐색을 하고나서야 해당되는 id값이 없다는걸로 판명하기 때문에 소요되는 시간이 늘어날수 있기 때문입니다.  (요새는 별로 큰 차이가 없다고 합니다)

 

이러한 이유 때문에 중첩된 뷰그룹의 성능이 더 낮아, 뷰 그룹 계층이 없는 ConstraintLayout을 사용하는게 성능이 더 좋은 것입니다.