[안드로이드] 안드로이드 앱 입문(1)

《 안드로이드 스튜디오를 통한 간단한 사용자 인터페이스 빌드 Ⅰ 》

• Layout Editor 열기
• 텍스트 상자 추가
• 버튼 추가
• UI 문자열 변경
• 유연한 크기의 텍스트 상자 만들기(동적 요소 생성)
• 앱 실행(에뮬레이터)

 

[ 안드로이드  앱 UI 계층 구조 ]

 - Android 앱의 사용자 인터페이스(UI)는 레이아웃 및 위젯의 계층 구조로 빌드됨.

 - 레이아웃은 ViewGroup 객체로 화면에서 하위 뷰의 위치 지정을 제어하는 컨테이너를 뜻함

 - 위젯은 View 객체로 버튼 및 텍스트 상자와 같은 UI 구성요소를 의미함

 

레이아웃에서 ViewGroup 객체가 분기를 형성하고 View 객체를 포함하는 방식을 표현한 그림

이미지 출처: 구글 안드로이드 개발자 가이드

 

 - Android는 ViewGroup 및 View 클래스를 위한 XML 언어를 제공하므로 UI 대부분이 XML에 정의됨

 - Android 스튜디오의 Layout Editor는 개발자가 뷰를 드래그 앤 드롭의 방법으로 레이아웃을 생성 시 사용

 

 

[ Layout Editor 열기 ]

1. 프로젝트 창에서 app > res > layout > activity_main.xml 열기

2. 편집기에 XML 소스가 표시되면 창 오른쪽 상단에 있는 Design 탭 클릭

3. Select Design Surface 버튼 클릭 후 Blueprint(청사진) 클릭

4. Layout Editor 툴바에서 View Options를 클릭하고 Show All Constraints가 선택되어 있는지 확인

5. 자동 연결 사용이 중지되어 있는지 확인하기

6. 툴바에서 0dp(Default Margins) 클릭 후 마진 16 설정 / 필요시 나중에 뷰의 여백 조정 가능

 7. 툴바에서 Device for Preview 클릭 후 5.5, 1440 x 2560, 560 dpi (Pixel XL) 선택

8. 최종적으로 아래와 같은 레이아웃 페이지(xml) 준비 완료

 

 

[ Component Tree ]

- Layout Editor 좌측 하단의 Component Tree 패널은 레이아웃의 뷰 계층 구조를 보여줌

- 현재 레이아웃의 루트 뷰는 ConstraintLayout 이며 이 뷰는 하나의 TextView 객체만을 포함

 

- ConstraintLayout은 동위 뷰와 상위 요소 레이아웃의 제약 조건에 따라 각 뷰의 위치를 정의하는 레이아웃임

- 해당 방식으로 플랫 뷰 계층 구조를 사용하면 간단한 레이아웃과 복잡한 레이아웃을 모두 생성 가능함

 

 

[ 텍스트 상자 추가 ]

1. 레이아웃에 이미 존재하는 항목 제거

2. Palette 패널에서 Text 클릭 시 사용가능한 텍스트 컨트롤 표시

3. Plain Text를 디자인 편집기로 드래그하여 레이아웃 상단에 드롭

 

4. 디자인 편집기에서 뷰를 클릭하면 각 모서리의 뷰 크기를 조절하는 정사각형 핸들과 각 면의 원형 제약조건 앵커를 확인 가능

5. 상단의 앵커를 클릭하여 레이아웃의 맨 위에 맞출 때까지 위로 드래그(설정된 기본 마진 16에 걸릴 때까지)

6. 동일한 과정을 사용하여 뷰 왼쪽의 제약 조건을 레이아웃 왼쪽에 맞추기

 

 

[ 버튼 추가 ]

1.  Pallete 패널에서 Buttons 클릭

2. 버튼 위젯을 디자인 편집기로 드래그하여 오른쪽 부근에 드롭

3. 버튼 왼쪽에서 텍스트 상자의 오른쪽으로 제약 조건 설정

4. 가로 정렬에서 뷰를 제한하기 위해 텍스트 기준선 사이에 제약 조건 생성

     버튼을 마우스 우클릭 한 뒤 Show Baseline 선택

     기준 앵커가 버튼 안에 표시되면 앵커를 길게 클릭한 후 인접 텍스트 상자에 표시되는 기준 앵커로 드래그

 

 

[ UI 문자열 변경 ]

- UI를 미리 보려면 툴바에서 Select Design Surface를 클릭 후 Design을 선택

- 이 때 텍스트 입력 및 버튼 라벨값은 기본값으로 설정 되어 있다

 

[ UI 문자열 변경 ]

1. Project 창을 열고 app > res > values > strings.xml 파일을 연다

    이 파일은 모든 UI 문자열 지정이 간으한 문자열 리소스 파일임

    이 파일을 이용하여 모든 UI 문자열을 관리, 탐색, 업데이트 및 현지화 가능

2. 창 상단의 Open editor를 클릭.

 

3. Open editor 클릭 시 Translations Editor가 열리며 기본 문자열 추가와 생성이 가능한 인터페이스 제공

4. Add key를 클릭하여 새로운 문자열을 텍스트 상자의 '힌트 텍스트'로 만들어줌

 

5. Key 입력란에 해당 키의 이름을 설정, Default Value 입력란에 키 값을 설정

 

6. activity_main.xml(레이아웃 파일)을 클릭 후 문자열을 추가

7. 레이아웃에서 텍스트 상자를 클릭한 후 오른쪽 상단의 Attributes를 클릭

8. 현재 텍스트 상자의 text 속성인 'Name' 값을 찾아 삭제

 

9. 현재 텍스트 상자의 hint 속성을 찾아서 텍스트 상자 오른쪽에 있는 Pick a Resource를 클릭

    표시된 대화상자에서 목록의 생성해 둔 키인 edit_message를 선택

 

10. 레이아웃에서 버튼 클릭 후 버튼 상자의 text 속성을 찾아 Pick a Resource를 클릭하고 button_send를 선택

 

 

 

[ 유연한 크기의 텍스트 상자 만들기 ]

- 다양한 모바일 디바이스의 화면 크기에 따라 반응하는 레이아웃을 만들기 위해서는

  버튼과 여백을 고려한 후 텍스트 상자를 늘려 남은 가로 공간을 채워야 함

- 툴바에서 Select Design Surface를 클릭 후 Blueprint(청사진)을 선택 

 

1. 두 뷰(텍스트 상자, 버튼 상자)를 모두 선택해 준다.

    (한 뷰를 클릭 후 Shift를 누른 채로 나머지 뷰를 클릭한 다음 마우스 오른쪽 버튼을 누름)

    Chains > Create Horizontal Chain을 선택한다. 이 때 레이아웃은 아래와 같이 표시된다.

※ 체인은 둘 이상의 뷰 간에 존재하는 양방향 제약 조건임(체인을 통해 연결된 뷰를 일관성 있게 배치 가능)

 

2. 버튼 뷰를 선택 후 Attributes 창을 연다. 그 후 Constraint Widget을 사용하여 오른쪽 여백을 16dp로 설정

    

3. 이제 텍스트 상자가 확장되어 남은 공간을 자동으로 채운다.

 

 

[ 앱 실행 ]

 [ 실제 기기에서 실행 ]

 1. USB 케이블을 사용하여 기기를 개발 머신에 연결

     (Windows에서 개발했다면 기기에 맞는 USB 드라이버 설치)

 2. 다음 단계를 실행하여 Developer options 창에서 USB debugging을 사용 설정

      a. 설정 앱을 연다

      b. 기기에서 Android v8.0 이상을 사용한다면 System을 선택한다. 그렇지 않은 경우 다음 단계로 진행

      c. 하단으로 스크롤하여 About phone을 선택

      d. 하단으로 스크롤하여 빌드 번호 7번을 탭한다.

      e. 이전 화면으로 돌아가서 하단으로 스크롤한 다음 개발자 옵션을 탭

      f. 개발자 옵션 창에서 아래로 스크롤하여 USB 디버깅을 찾아 사용 설정

 3. Android 스튜디오의 툴바에 있는 실행/디버그 구성 드롭다운 메뉴에서 앱을 선택

 4. 툴바의 대상 기기 드롭다운 메뉴에서 앱을 실행하려는 기기를 선택

 5. Run 버튼을 클릭 (Adroid 스튜디오는 연결된 기기에 앱을 설치 후 기기를 시작)

 

 

[ 에뮬레이터에서 실행 ]

 1. Android 스튜디오에서 에뮬레이터가 앱을 설치하고 실행하는데 사용할 수 있는 가상환경(AVD)을 만든다.

 2. 툴바의 실행/디버그 구성 드롭다운 메뉴에서 앱을 선택

3. 대상 기기 드롭다운 메뉴에서 앱을 실행하련느 AVD를 선택

4. Run 버튼을 클릭한다.

 

 

참조 : 안드로이드 앱 개발자를 위한 문서(https://developer.android.com/docs)