[Reference Book] '정보표시 화면' 화면 구성하기

Android Studio를 이용하여 화면을 구성해 보겠습니다.

 

최종으로 만들어질 화면

 

최상단의 "Reference Book"영역은 액션바 영역입니다.

이 영역은 메뉴를 구성하는 영역으로 화면의 영역에서 제외합니다.

이 영역까지 화면으로 사용할 수 있는 방법도 있을 것 같은데, 모르니... 일단 패스하겠습니다.

 

1. 정보표시 화면을 구성할 Activity 추가

프로젝트 생성시 자동으로 만들어지는 MainActivity는 메인화면으로 사용할 예정입니다.

핵심 화면인 '정보표시' 화면을 먼저 만들 것이므로, Activity를 추가합니다.

 

    ※ Activity 추가가 어려우신 분은 (화면 하단에 있는) 링크정보를 참고하세요.

 

2. 기본 Layout은 LinearLayout

컨텐츠가 세로로 쭉 열거되기 때문에 Activity의 기본형을 LinearLayout으로 설정합니다.

  - orientation : vertical 

    컨텐츠가 세로로 열거될 것이기 때문에, orientation속성은 vertical로 설정합니다.

 

화면 구성하기

 

3. Layout 구성하기

 

① 객체정보 영역

 

Component Tree	XML source-coding

 

  - "ExcelCtrl"이라는 문자열이 표시된 영역입니다.

  - 배경색 지정 및 (개인적으로) 영역을 정의하기 위해 LinearLayout을 하나더 추가 했습니다.

  - 그리고, 추가된 LinearLayout에 TextView를 배치했습니다.

 

  - TextView의 경우, 실제 DB에서 조회된 데이터를 표시할 것이므로, ID를 부여합니다.

    저는 txtCategory라는 이름으로 ID를 부여하였습니다.(본인의 스타일에 맞게 명명하시면 됩니다.)

 

화면 Scroll을 위한 ScrollView 추가   - 표시할 내용이 많을 경우, 한 화면을 넘어가게 됩니다.   - 이 때, ScrollView를 추가하여 화면이 Scroll될 수 있도록 처리해 주어야 합니다.   - 화면 전체를 스크롤할 것이므로, 화면을 구성하는 View들 가장 밖에 ScrollView를 추가합니다.      * 그림에서는 Activity의 LinearLayout 다음에 LinearLayout을 추가하였는데, 이 layout은 없어도 될듯 합니다.     저도 처음이라 불필요한 View나 소스코드가 있을 수 있으니 양해 바랍니다.   * ScrollView의 내용은 저도 화면을 구성한 후에 인지하고 추가된 부분이라 순서대로 구성되지 못하였습니다.

 

② API함수 영역

 

Component Tree	XML source-coding

 

  - 객체영역과 동일 합니다.

  - 가독성을 위해 글씨 크기를 크게 했고, 역시 DB에서 조회된 데이터가 표시되어야 하므로 ID를 부여했습니다.

 

③ Syntax

 

Component Tree	XML source-coding

 

  - 함수의 정의된 문법을 표시합니다.

  - 문법은 Return과 Argument 그리고 API함수명 등으로 조립해서 표시할 수 있습니다.

    문법을 조립하기 위해 각 영역별로 TextView를 만들어 구성하였습니다.

 

④ Description

 

Component Tree	XML source-coding

 

  - Description 이라는 문구를 TextView로 구성합니다.

  - 설명의 경우도 DB에서 조회된 정보를 표시할 것이므로, ID를 부여해야 합니다.

  - RecyclerView

    내용의 경우, 작성하기에 따라 길이가 가변인 데이터 입니다.

    표시될 데이터를 List형식으로 가져와서 가변 처리를 하려고 합니다.

    ( !!! TextView의 멀티라인으로 처리해도 될 것 같습니다... OTL )

 

⑤ Argument / Return / Example

  - Argument와 Return 그리고 Example 영역은 모두 RecycleView로 구성하였습니다.

  - 반복되는 내용이므로, Argument 영역만 살펴보고 나머지는 생략하도록 하겠습니다.

 

Component Tree	XML source-coding

  - Component에서 '붉은색'으로 표시된 LinearLayout은 없어도 됩니다.

    저도 배우면서 하다보니, 지.알.못으로 없어도 상관없는 Component가 포함되어 있습니다.

 

  - RecycerView는 반복되는 데이터를 표시하는 View입니다.

  - Argument의 경우, Header부분은 단순한 정보성 글이고, 실제 인자가 데이터에 해당합니다.

    그러므로, Header부분은 TextView로 구성해 주고, 인자부분만을 RecyclerView로 구성합니다.

 

Component Tree	XML source-coding

 

이것으로 Layout을 구성한 부분은 완료되었습니다.

실제 구성을 하려고 하다보니 생각처럼 안되는 부분이 많았습니다.

각 View들을 많이 사용해서 사용법 및 활용법에 익숙해져야 화면을 좀 더 잘 구성할 수 있을 것 같습니다.

 

하면서 느낀점으로는...

Layout의 구성은 마치 HTML로 화면을 구성하듯한 스타일 이었고,

RecyclerView는 OZ-Report나 RD와 같은 레포트툴의 반복부를 구성하는 느낌이었습니다.

 

다음에는 샘플데이터를 활용하여 각 영역에 데이터를 매핑해 보도록 하겠습니다.

실제 DB연동은 이후에 진행하도록 하겠습니다.

 

※ 참고자료

    - sgpassion.tistory.com/510

Android Layout의 종류

    - sgpassion.tistory.com/533

[Example] ScrollView를 이용한 화면 스크롤 처리

    - sgpassion.tistory.com/532

[Example] RecycerView를 사용한 목록성 데이터 표시

 

The End.