메뉴 닫기
Skip to main content

Knowledge Base Help Center

< All Topics
Print

Build Android App in Java

Posted
Updated
By배 효영

1. 개요

이 코드 랩에서는 자바 프로그래밍 언어로 첫 번째 Android 앱을 빌드하고 실행하는 방법을 알아 봅니다. 

유튜브 영상 : https://www.youtube.com/watch?v=EOfCEhWq8sg

6cba94311109e72f.png

선행 지식

이 코드 랩은 프로그래머 용으로 작성되었으며 Java 또는 Kotlin 프로그래밍 언어를 알고 있다고 가정합니다. 숙련 된 프로그래머이고 코드 읽기에 능숙하다면 Java에 대한 경험이 많지 않더라도이 코드 랩을 따를 수있을 것입니다.

학습내용

  • Android Studio를 사용하여 앱을 빌드하는 방법.
  • 기기 또는 에뮬레이터에서 앱을 실행하는 방법.
  • 대화 형 버튼을 추가하는 방법.
  • 버튼을 눌렀을 때 두 번째 화면을 표시하는 방법.

Android Studio 및 Java를 사용하여 Android 앱 작성

Android Studio라는 IDE를 사용하여 Java 프로그래밍 언어로 Android 앱을 작성합니다. JetBrains의 IntelliJ IDEA 소프트웨어를 기반으로하는 Android Studio는 Android 개발을 위해 특별히 설계된 IDE입니다.

참고 :이 버전의 코드 랩에는 Android 스튜디오 3.6 이상이 필요합니다.

이 코드 랩을 진행하려면 Android Studio 3.6 이상을 실행할 수있는 컴퓨터 (또는 이미 Android Studio 3.6 이상이 설치되어 있음)가 필요합니다.

2. Android Studio 설치

Android Studio 페이지 에서 Android Studio 3.6을 다운로드 할 수 있습니다 .

Android Studio는 고급 코드 편집기 및 앱 템플릿을 포함한 완전한 IDE를 제공합니다. 또한 앱을 더 빠르고 쉽게 개발할 수있는 개발, 디버깅, 테스트 및 성능을위한 도구가 포함되어 있습니다. Android 스튜디오를 사용하여 사전 구성된 광범위한 에뮬레이터로 앱을 테스트하거나 자신의 휴대 기기에서 앱을 테스트 할 수 있습니다. 또한 프로덕션 앱을 빌드하고 Google Play 스토어에 앱을 게시 할 수 있습니다.

참고 : Android Studio는 지속적으로 개선되고 있습니다. 시스템 요구 사항 및 설치 안내에 대한 최신 정보는 Android 스튜디오 다운로드 페이지를 참조하세요 .

Android Studio는 Windows 또는 Linux를 실행하는 컴퓨터와 macOS를 실행하는 Mac에서 사용할 수 있습니다. OpenJDK (Java Development Kit)는 Android Studio와 함께 번들로 제공됩니다.

설치는 모든 플랫폼에서 유사합니다. 차이점은 아래에 나와 있습니다.

  1. Android Studio 다운로드 페이지로 이동하고 안내에 따라 Android Studio 를 다운로드하고 설치 합니다.
  2. 모든 단계에 대한 기본 구성을 승인하고 모든 구성 요소가 설치를 위해 선택되었는지 확인하십시오.
  3. 설치가 완료되면 설치 마법사가 Android SDK를 포함한 추가 구성 요소를 다운로드하고 설치합니다. 이 과정은 인터넷 속도에 따라 다소 시간이 걸릴 수 있습니다.
  4. 설치가 완료되면 Android Studio가 시작되고 첫 번째 프로젝트를 만들 준비가 된 것입니다.
문제 해결 : 설치에 문제가 발생하면 Android 스튜디오 출시 노트 또는 Android 스튜디오 문제 해결을 참조하세요.

3. 프로젝트 만들기

이 단계에서는 첫 번째 앱에 대한 새 Android 프로젝트를 만듭니다. 이 간단한 앱은 Android 가상 또는 물리적 장치의 화면에 “Hello World”문자열을 표시합니다.

완성 된 앱의 모습은 다음과 같습니다.

72c7e6d2960f4faa.png

학습내용

  • Android Studio에서 프로젝트를 만드는 방법.
  • 에뮬레이트 된 Android 장치를 만드는 방법.
  • 에뮬레이터에서 앱을 실행하는 방법.
  • 자신의 물리적 장치 (있는 경우)에서 앱을 실행하는 방법.

1단계: 새 프로젝트 만들기

  1. Android Studio를 엽니 다.
  2. 에서 안드로이드 스튜디오에 오신 것을 환영합니다 대화 상자에서 클릭 시작 새로운 안드로이드 Studio 프로젝트 .c7c8a5cc4c9029b.png
  3. 기본 활동 (기본값 아님)을 선택하십시오 . 다음을 클릭 합니다.73e63b490a2f4ae6.png
  4. 애플리케이션에 My First App 과 같은 이름을 지정하십시오 .
  5. 언어 가 Java 로 설정되어 있는지 확인하십시오 .3ffb3ca42472b4f6.png
  6. 다른 필드는 기본값을 그대로 둡니다.
  7. 마침을 클릭 합니다 .

이 단계 후에 Android Studio는 다음을 수행합니다.

  • MyFirstApp 이라는 Android 스튜디오 프로젝트 용 폴더를 만듭니다 . 일반적으로 홈 디렉토리 아래의 AndroidStudioProjects 라는 폴더에 있습니다.
  • 프로젝트를 빌드합니다 (몇 분 정도 걸릴 수 있음). Android Studio는 Gradle 을 빌드 시스템으로 사용합니다. Android Studio 창 하단에서 빌드 진행 상황을 확인할 수 있습니다.
  • 프로젝트를 보여주는 코드 편집기를 엽니 다.

2 단계 : 화면 설정하기

프로젝트가 Android Studio에서 처음 열리면 많은 창이 열릴 수 있습니다. Android Studio를 더 쉽게 알아볼 수 있도록 레이아웃을 사용자 지정하는 방법에 대한 몇 가지 제안 사항이 있습니다.

  1. 오른쪽에 Gradle 창이 열려 있으면 오른쪽 상단 모서리 에있는 최소화 버튼 ( — )을 클릭 하여 숨 깁니다.97a3da610c1eede7.png
  2. 화면 크기에 따라 공간을 덜 차지하도록 프로젝트 폴더를 표시하는 왼쪽 창 크기를 조정하십시오.

이 시점에서 화면은 아래에 표시된 스크린 샷과 같이 좀 덜 복잡해 보일 것입니다.

70183da1f878e11a.png

3 단계 : 프로젝트 구조 및 레이아웃 탐색

Android Studio 창의 왼쪽 상단은 다음 다이어그램과 유사해야합니다. ecabcf48b6f7b9a1.png

프로젝트에 대한 기본 활동 템플릿을 선택하면 Android 스튜디오에서 여러 파일을 설정했습니다. 여러 방법으로 앱 파일의 계층 구조를 볼 수 있습니다 . 하나는 프로젝트 보기입니다. 프로젝트 보기는 Android 프로젝트 작업에 편리한 방식으로 구조화 된 파일 및 폴더를 표시합니다. (항상 파일 계층과 일치하지는 않습니다! 파일 계층을 보려면 (3) 을 클릭하여 프로젝트 파일 보기를 선택하십시오 .)

  1. 앱 (1) 폴더를 두 번 클릭하여 앱 파일의 계층을 확장합니다. ( 스크린 샷의 ( 1) 참조 )
  2. 프로젝트 (2) 를 클릭 하면 프로젝트 보기를 숨기거나 표시 할 수 있습니다. 이 옵션을 보려면 보기> 도구 창 을 선택해야 할 수 있습니다 .
  3. 현재 프로젝트 보기 선택 (3)은 Project> Android 입니다.

에서 프로젝트> 안드로이드 보기는 세 가지 또는 네 개의 최상위하여 아래의 폴더 참조 응용 프로그램 : 폴더 매니페스트 , 자바 , 자바 (생성) 및 고해상도를 . Java (생성됨)가 바로 표시되지 않을 수 있습니다.

  1. 매니페스트 폴더를 확장 합니다.

이 폴더에는 AndroidManifest.xml**. **이 포함되어 있습니다 .이 파일은 Android 앱의 모든 구성 요소를 설명하며 앱이 실행될 때 Android 런타임 시스템에서 읽습니다. 2. ** java ** 폴더를 확장합니다. 모든 Java 언어 파일이 여기에 구성됩니다. ** java ** 폴더에는 세 개의 하위 폴더가 있습니다.

com.example.myfirstapp : 이 폴더에는 앱의 Java 소스 코드 파일이 포함되어 있습니다.

com.example.myfirstapp (androidTest) : 이 폴더는 Android 기기에서 실행되는 테스트 인 계측 테스트를 넣을 위치입니다. 스켈레톤 테스트 파일로 시작합니다.

com.example.myfirstapp (테스트) : 이 폴더는 단위 테스트를 넣을 위치입니다. 단위 테스트는 실행하는 데 Android 기기가 필요하지 않습니다. 스켈레톤 단위 테스트 파일로 시작합니다. 3. res 폴더를 확장 합니다. 이 폴더에는 이미지, 레이아웃 파일, 문자열, 아이콘 및 스타일을 포함하여 앱에 대한 모든 리소스가 포함되어 있습니다. 여기에는 다음 하위 폴더가 포함됩니다.

drawable : 앱의 모든 이미지가이 폴더에 저장됩니다.

layout :이 폴더에는 활동에 대한 UI 레이아웃 파일이 있습니다. 현재 앱에는 activity_main.xml. 라는 레이아웃 파일이있는 활동이 하나 있습니다 . 그것은 또한 포함하고 content_main.xml, fragment_first.xml하고 fragment_second.xml.

menu : 이 폴더에는 앱의 모든 메뉴를 설명하는 XML 파일이 포함되어 있습니다.

mipmap :이 폴더에는 앱의 실행기 아이콘이 포함되어 있습니다.

navigation : 이 폴더에는 Android Studio에 애플리케이션의 다른 부분을 탐색하는 방법을 알려주는 탐색 그래프가 포함되어 있습니다.

values :이 폴더에는 앱에서 사용되는 문자열 및 색상과 같은 리소스가 포함되어 있습니다.

4 단계 : 가상 장치 (에뮬레이터) 만들기

이 작업에서는 AVD (Android Virtual Device) 관리자 를 사용하여 특정 유형의 Android 장치에 대한 구성을 시뮬레이션하는 가상 장치 (또는 에뮬레이터)를 만듭니다.

첫 번째 단계는 가상 장치를 설명하는 구성을 만드는 것입니다.

  1. Android 스튜디오에서 Tools > AVD Manager를 선택 하거나 툴바에서 AVD Manager 아이콘을 클릭합니다.
     1ef215721ed1bd47.png
  2. + Create Virtual Device를 클릭합니다 . (이전에 가상 장치를 만든 경우 창에 기존 장치가 모두 표시되고 + Create Virtual Device 버튼이 맨 아래에 있습니다.) Select Hardware 창에는 사전 구성된 하드웨어 장치 정의 목록이 표시됩니다.
  3. Pixel 2 와 같은 기기 정의를 선택하고 다음을 클릭 합니다. (이 코드 랩에서는 어떤 장치 정의를 선택하든 상관 없습니다).
  4. 에서 시스템 이미지 대화 상자에서에서 추천 탭, 최신 버전을 선택합니다. (이것은 중요합니다.)
  5. 최신 릴리스 옆에 다운로드 링크가 표시 되면 아직 설치되지 않은 것이므로 먼저 다운로드해야합니다. 필요한 경우 링크를 클릭하여 다운로드를 시작하고 완료되면 다음을 클릭 합니다. 연결 속도에 따라 다소 시간이 걸릴 수 있습니다.

참고 : 시스템 이미지는 많은 양의 디스크 공간을 차지할 수 있으므로 필요한 것을 다운로드하기 만하면됩니다.

  1. 다음 대화 상자에서 기본값을 적용하고 마침을 클릭 합니다 .

이제 AVD Manager에 추가 한 가상 장치가 표시됩니다.

  1. 경우 가상 장치 AVD Manager 창은 여전히 열려 가서 닫습니다.

5 단계 : 새 에뮬레이터에서 앱 실행

  1. Android Studio에서 Run> Run ‘app’을 선택 하거나 툴바에서 Run 아이콘을 클릭합니다 . 609c3e4473493202.png앱이 이미 실행 중이면 아이콘이 변경됩니다. edee73c1aed2b57e.png

“Instant Run을 사용하려면 대상 장치 (Android N …)에 해당하는 플랫폼이 설치되어 있어야합니다.”라는 대화 상자가 나타나면 설치를 클릭 하고 계속합니다.

  1. 에서 실행> 장치 선택 , 아래에 사용 가능한 기기 , 당신은 단지 구성하는 가상 장치를 선택합니다. 이 메뉴는 도구 모음에도 나타납니다.
b1215d5cf034b077.png

에뮬레이터는 물리적 장치처럼 시작되고 부팅됩니다. 컴퓨터 속도에 따라 다소 시간이 걸릴 수 있습니다. Android 스튜디오 맨 아래에있는 작은 가로 상태 표시 줄에서 진행 상황을 확인할 수있는 메시지를 볼 수 있습니다.

상태 표시 줄에 잠깐 나타날 수있는 메시지
Gradle 빌드 실행 중
대상 장치가 온라인 상태가되기를 기다리는 중
APK 설치
시작 활동

앱이 빌드되고 에뮬레이터가 준비되면 Android 스튜디오는 앱을 에뮬레이터에 업로드하고 실행합니다. 다음 스크린 샷과 같이 앱이 표시되어야합니다.

89960f5a856e1aa7.png

참고 : 세션을 시작할 때 에뮬레이터를 시작하는 것이 좋습니다. 에뮬레이터가 다시 부팅 될 때까지 기다릴 필요가 없도록 앱 테스트가 완료 될 때까지 에뮬레이터를 닫지 마세요. 또한 메모리 사용량을 줄이기 위해 한 번에 둘 이상의 에뮬레이터를 실행하지 마십시오.

6 단계 : 기기에서 앱 실행 (있는 경우)

필요한 것 :

  • 휴대 전화 또는 태블릿과 같은 Android 기기.
  • USB 포트를 통해 Android 기기를 컴퓨터에 연결하는 데이터 케이블.
  • Linux 또는 Windows OS를 사용하는 경우 하드웨어 장치에서 앱을 실행하려면 추가 단계를 수행해야 할 수 있습니다. 하드웨어 장치에서 앱 실행 설명서를 확인하십시오 . Windows에서는 장치에 적합한 USB 드라이버를 설치해야 할 수 있습니다. OEM USB 드라이버를 참조하십시오 .

기기에서 앱 실행

Android Studio가 기기와 통신 할 수 있도록하려면 Android 기기에서 USB 디버깅을 켜야합니다.

Android 4.2 이상에서는 개발자 옵션 화면이 기본적으로 숨겨져 있습니다. 개발자 옵션을 표시하고 USB 디버깅을 활성화하려면 :

  1. 기기에서 설정> 휴대 전화 정보를 열고 빌드 번호를 7 번 탭 합니다.
  2. 이전 화면 ( 설정 )으로 돌아갑니다 . 개발자 옵션 은 목록 하단에 나타납니다. 개발자 옵션을 탭합니다 .
  3. USB 디버깅을 활성화합니다 .

이제 기기를 연결하고 Android Studio에서 앱을 실행할 수 있습니다.

  1. USB 케이블을 사용하여 장치를 개발 컴퓨터에 연결합니다. 장치에서 개발 장치의 USB 디버깅을 허용하는 데 동의해야 할 수 있습니다.
  2. Android Studio 에서 창 상단의 도구 모음에서 실행 609c3e4473493202.png 을 클릭 합니다. ( 이 옵션을 보려면 보기> 도구 모음 을 선택해야 할 수 있습니다 .) 사용 가능한 에뮬레이터 및 연결된 장치 목록과 함께 배포 대상 선택 대화 상자가 열립니다.
  3. 장치를 선택하고 확인을 클릭 합니다. Android Studio는 기기에 앱을 설치하고 실행합니다.

참고 : 기기가 Android 스튜디오에 설치되지 않은 Android 플랫폼을 실행중인 경우 필요한 플랫폼을 설치할 것인지 묻는 메시지가 표시 될 수 있습니다. 클릭 설치 및 계속 , 클릭 한 다음 마침을 해당 프로세스가 완료 될 것입니다.

문제 해결

멈춘 경우 Android Studio를 종료하고 다시 시작하십시오.

Android Studio가 기기를 인식하지 못하는 경우 다음을 시도해보세요.

  1. 개발 머신에서 장치를 분리했다가 다시 연결하십시오.
  2. Android Studio를 다시 시작하십시오.

컴퓨터가 여전히 장치를 찾지 못하거나 “승인되지 않음”으로 선언하는 경우 :

  1. 장치를 분리하십시오.
  2. 기기에서 설정-> 개발자 옵션을 엽니 다 .
  3. USB 디버깅 인증 취소를 탭합니다 .
  4. 장치를 컴퓨터에 다시 연결하십시오.
  5. 메시지가 표시되면 권한을 부여합니다.

여전히 문제가있는 경우 장치에 적합한 USB 드라이버를 설치했는지 확인하십시오. 하드웨어 장치 사용 설명서를 참조하십시오 .

Android Studio 문서 의 문제 해결 섹션을 확인하세요 .

7 단계 : 앱 템플릿 탐색

프로젝트를 생성하고 Basic Activity를 선택 하면 Android 스튜디오는 여러 파일, 폴더 및 사용자 인터페이스 요소를 자동으로 설정하므로 제대로 작동하는 앱과 주요 구성 요소로 시작할 수 있습니다. 이렇게하면 애플리케이션을 더 쉽게 빌드 할 수 있습니다.

에뮬레이터 또는 장치에서 앱을 보면 다음 버튼 외에도 이메일 아이콘 이 있는 플로팅 작업 버튼 이 있습니다. 791b06443568c703.png해당 버튼을 탭하면 화면 하단에 메시지를 간략하게 표시하도록 설정되었음을 알 수 있습니다. 이 메시지 공간을 스낵바 라고하며 간단한 정보로 사용자에게 앱을 알리는 여러 방법 중 하나입니다.

24ebb1f42e1fb418.png

화면 오른쪽 상단에 3 개의 수직 점이있는 메뉴가 있습니다. 37010a0e7f96362c.png이를 탭하면 Android Studio도 설정 항목이 있는 옵션 메뉴를 생성 한 것을 볼 수 있습니다 . 선택 설정을 아직 아무것도하지 않지만, 당신을 위해 설정있는 것은 쉽게 앱에 사용자 구성 설정을 추가 할 수 있습니다.

1fc9e57692132430.png

이 코드 랩의 뒷부분에서 다음 버튼을 보고 모양 과 기능을 수정합니다.

4. 레이아웃 편집기

일반적으로 Android 앱의 각 화면은 하나 이상의 프래그먼트 와 연결됩니다 . “Hello first fragment”를 표시하는 단일 화면은라는 하나의 조각으로 생성됩니다 FirstFragment. 이것은 새 프로젝트를 만들 때 생성되었습니다. Android 앱에 표시되는 각 조각에는 조각의 사용자 인터페이스를 정의하는 레이아웃이 있습니다. Android Studio에는 레이아웃을 만들고 정의 할 수있는 레이아웃 편집기가 있습니다.

레이아웃은 XML 로 정의됩니다 . 레이아웃 편집기를 사용하면 XML을 코딩하거나 대화 형 시각적 편집기를 사용하여 레이아웃을 정의하고 수정할 수 있습니다.

레이아웃의 모든 요소는보기입니다. 이 작업에서는 레이아웃 편집기의 일부 패널을 탐색하고보기 속성을 변경하는 방법을 배웁니다.

배울 것

  • 레이아웃 편집기 사용 방법.
  • 속성 값을 설정하는 방법.
  • 문자열 리소스를 추가하는 방법.
  • 색상 자원을 추가하는 방법.

1 단계 : 레이아웃 편집기 열기

  1. 프로젝트 패널 의 왼쪽 에서 레이아웃 폴더 ( app> res> layout )를 찾아서 엽니 다 .bb7b4fe5af80859d.png
  2. 을 두 번 클릭 fragment_first.xml합니다.

문제 해결 : 파일이 표시되지 않으면 fragment_first.xml이 Codelab에 필요한 Android 스튜디오 3.6 이상을 실행 중인지 확인하세요.

프로젝트보기의 오른쪽에있는 패널은 레이아웃 편집기를 구성합니다 . Android Studio 버전에서 다르게 배열 될 수 있지만 기능은 동일합니다.cb9d2ce821f0a8b.png

왼쪽에는 앱에 추가 할 수있는 뷰 팔레트 (1) 가 있습니다.

그 아래에는 현재이 파일에있는보기와 서로 관련하여 정렬되는 방식을 보여주는 구성 요소 트리 (2) 가 있습니다.

중앙에는 디자인 편집기 (3) 가 있으며, Android 앱으로 컴파일 할 때 파일의 내용이 어떻게 보일지 시각적으로 표시합니다. 시각적 표현, XML 코드 또는 둘 다를 볼 수 있습니다.

  1. 디자인 편집기의 오른쪽 상단 모서리에있는 속성 (4) 위에 다음과 같은 세 개의 아이콘이 있습니다. c60f285cb7fbc306.png
    이는 코드 (코드 만), 분할 (코드 + 디자인) 및 디자인 (디자인 만)보기를 나타냅니다.
  2. 다른 모드를 선택해보십시오. 화면 크기와 작업 스타일에 따라 코드 와 디자인 간에 전환 하거나 분할 보기를 유지 하는 것을 선호 할 수 있습니다. 귀하의 경우 구성 요소 트리 , 숨기기 사라지고 보여 팔레트 .

분할 보기 :32d3075ed7f5c02c.png

  1. 디자인 편집기의 오른쪽 하단에는 확대 및 축소를위한 + 및 – 버튼이 있습니다. 이 버튼을 사용하여 표시되는 크기를 조정하거나 두 패널이 화면에 맞도록 확대 / 축소 버튼을 클릭합니다.
a7d0a08766682f9.png

왼쪽 의 디자인 레이아웃 은 앱이 기기에 표시되는 방식을 보여줍니다. 청사진 레이아웃 오른쪽 그림은, 레이아웃의 개략도이다.

  1. 디자인 도구 모음의 왼쪽 상단에있는 레이아웃 메뉴를 사용하여 디자인보기, 청사진보기 및 두보기를 나란히 표시하는 연습을합니다.
     6572c0c05460eafd.png

화면 크기와 선호도에 따라 디자인 보기 또는 블루 프린트 보기 만 표시 할 수 있습니다 .

  1. 레이아웃의 방향을 변경하려면 방향 아이콘을 사용하십시오. 이를 통해 레이아웃이 세로 및 가로 모드에 어떻게 맞는지 테스트 할 수 있습니다.
    c40138d924cedb8f.png
  2. 장치 메뉴를 사용하여 다른 장치에서 레이아웃을 봅니다. (이것은 테스트에 매우 유용합니다!)
46754977c9c3d6c9.png

오른쪽에는 속성 패널이 있습니다. 나중에 그것에 대해 배울 것입니다.

2 단계 : 구성 요소 트리 탐색 및 크기 조정

  1. 에서 fragment_first.xml, 상기 살펴 구성 요소 트리 . 표시되지 않는 경우 분할 또는 코드 대신 디자인 모드로 전환하십시오 .
855789e5c4867c8f.png

이 패널은 레이아웃 의 보기 계층 구조 , 즉보기가 서로를 기준으로 정렬되는 방식을 보여줍니다 . 2. 필요한 경우 적어도 문자열의 일부를 읽을 수 있도록 구성 요소 트리의 크기를 조정합니다 . 3. 구성 요소 트리의 오른쪽 상단에 있는 숨기기 아이콘을 클릭합니다 . 
7b183024169396dd.png

구성 요소 트리 닫습니다. 4. 왼쪽에있는 수직 레이블 구성 요소 트리 를 클릭 하여 구성 요소 트리 를 다시 가져옵니다 .

35c14a27fd2ce30a.png

3 단계 :보기 계층 구조 탐색

  1. 에서 구성 요소 트리 뷰 계층 구조의 루트는 것을 알 수 ConstraintLayout볼 수 있습니다.

모든 레이아웃에는 다른 모든보기를 포함하는 루트보기가 있어야합니다. 루트보기는 항상 다른보기를 포함하는보기 인보기 그룹 입니다. A ConstraintLayout는보기 그룹의 한 예입니다. 2.주의 사항은 그 ConstraintLayout를 포함 TextView라고 textview_first하고 Button,라고 button_first.

506cf77387f00782.png
  1. 코드가 표시되지 않으면 오른쪽 상단 모서리에있는 아이콘을 사용하여 코드 또는 분할 보기로 전환합니다 .
  2. XML 코드에서 루트 요소는 <androidx.constraintlayout.widget.ConstraintLayout>입니다. 루트 요소에는 <TextView>요소와 요소가 포함 <Button>됩니다.
<androidx.constraintlayout.widget.ConstraintLayout
  ... >

   <TextView
      ...  />

   <Button
      ...  />

</androidx.constraintlayout.widget.ConstraintLayout>

4 단계 : 속성 값 변경

  1. 코드 편집기에서 TextView요소 의 속성을 검사합니다 .
<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Hello first fragment"
   ... />
  1. text 속성 에서 문자열을 클릭 하면 문자열 리소스 인 hello_first_fragment.
android:text="@string/hello_first_fragment"
  1. 속성을 마우스 오른쪽 단추로 클릭하고 이동> 선언 또는 사용을 클릭 합니다.

values/strings.xml 강조 표시된 문자열로 열립니다.

<string name="hello_first_fragment">Hello first fragment</string>
  1. string속성 값 을 Hello World!.
  2. 로 다시 전환하십시오 fragment_first.xml.
  3. 구성 요소 트리textview_first 에서 선택 합니다.
    19cfd9f54f58b379.png
  4. 오른쪽 의 속성 패널을보고 필요한 경우 선언 된 속성 섹션을 엽니다.
    549f087103c9acbe.png

이 단계 문제 해결 :

  • (가) 경우 속성 패널이 표시되지 않습니다, 수직 클릭 속성이 오른쪽 상단에 레이블을 붙입니다.
    e6a2a689769c8afd.png
  1. in Attributes 의 텍스트 필드 TextView에서 여전히 문자열 리소스를 참조합니다 . 리소스 파일에 문자열이 있으면 몇 가지 장점이 있습니다. 다른 코드를 변경하지 않고도 문자열 값을 변경할 수 있습니다. 이렇게하면 번역자가 앱 코드에 대해 알 필요가 없기 때문에 앱을 다른 언어로 번역하는 작업이 단순화됩니다.@string/hello_first_fragment8bb6bf0caffa82a4.png

팁 : 모든 속성 목록에서 속성을 찾을 수의 오른쪽에있는 돋보기 아이콘을 클릭합니다 속성 및 속성의 이름을 입력하기 시작. Android Studio는 해당 문자열을 포함하는 속성 만 표시합니다.

6349e6a522fda9ea.png
1e116f4ea013be17.png
  1. 앱을 실행하여 strings.xml 에서 변경 한 사항을 확인합니다 . 이제 앱에 “Hello World!”가 표시됩니다.
d2103406630c3527.png

5 단계 : 텍스트 표시 속성 변경

  1. 로 textview_first여전히에서 선택한 구성 요소 트리 속성의 목록에서 레이아웃 편집기에서, 아래의 일반적인 속성 , 확장 textAppearance의 필드. (찾으려면 아래로 스크롤해야 할 수도 있습니다.)
37c72a9385dab52d.png
  1. 일부 텍스트 모양 속성을 변경합니다. 예를 들어 글꼴 모음을 변경하고 텍스트 크기를 늘리고 굵은 스타일을 선택합니다. (모든 필드를 보려면 패널을 스크롤해야 할 수 있습니다.)
  2. 텍스트 색상을 변경합니다. textColor 필드를 클릭하고 g.

문자 g를 포함하는 가능한 완성 값이있는 메뉴가 나타납니다. 이 목록에는 미리 정의 된 색상이 포함됩니다.

39597ff5cf9661da.png
  1. @android : color / darker_gray를 선택 하고 Enter 키를 누릅니다 .

다음은 일부 변경 후 textAppearance 속성 의 예입니다 .

8751426a21281f94.png
  1. .NET Framework에 대한 XML을 살펴보십시오 TextView. 새 속성이 추가 된 것을 볼 수 있습니다.
<TextView
   android:id="@+id/textview_first"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:fontFamily="sans-serif-condensed"
   android:text="@string/hello_first_fragment"
   android:textColor="@android:color/darker_gray"
   android:textSize="30sp"
   android:textStyle="bold"
  1. 앱을 다시 실행하고 Hello World에 적용된 변경 사항을 확인하십시오! 끈
c715d9230068d0f8.png

6 단계 : 모든 속성 표시

  1. 에서 속성 패널, 당신이 찾을 때까지 아래로 스크롤 모든 속성 .

속성 패널에 속성이 표시되지 않으면 구성 요소 트리에서이textview_first 여전히 선택되어 있는지 확인하십시오 .

6e28336e8d85fa14.png
  1. 목록을 스크롤하여 TextView에 설정할 수 있는 속성에 대한 아이디어를 얻으십시오.

5. 색상 리소스 추가

지금까지 속성 값을 변경하는 방법을 배웠습니다. 다음으로 이전에 작업 한 문자열 리소스와 같은 더 많은 리소스를 만드는 방법을 배웁니다. 리소스를 사용하면 여러 위치에서 동일한 값을 사용하거나 값을 정의하고 값이 변경 될 때마다 UI가 자동으로 업데이트되도록 할 수 있습니다.

학습내용

  • 자원 정의 방법.
  • 색상 자원 추가 및 사용.
  • 레이아웃 높이와 너비를 변경 한 결과입니다.

1 단계 : 색상 리소스 추가

먼저 새 색상 리소스를 추가하는 방법을 배웁니다.

  1. 왼쪽 의 프로젝트 패널에서 res > values > colors.xml 을 두 번 클릭 하여 색상 리소스 파일을 엽니 다.
8fa53d358e4a9813.png
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

colors.xml파일을 편집기에서 열립니다. 지금까지 세 가지 색상이 정의되었습니다. 앱 레이아웃에서 볼 수있는 색상입니다 (예 : 앱 바의 경우 자주색).

참고 : Android 스튜디오의 버전에 따라 이러한 색상에 대해 다른 값을 사용하므로 여기에서 다른 색상을 볼 수 있습니다.

  1. 로 돌아가서 fragment_first.xml레이아웃에 대한 XML 코드를 볼 수 있습니다.
  2. TextView호출 된에 새 속성을 추가하고 android:background입력을 시작하여 값을로 설정합니다 @color. 이 속성은 TextView코드 내부 어디에나 추가 할 수 있습니다 .

미리 정의 된 색상 리소스를 제공하는 메뉴가 나타납니다.

f08dbc2b6d4fc39.png
  1. @ color / colorPrimaryDark를 선택합니다 .
  2. 속성을 변경하고 android:textColor값을 @android:color/white.

Android 프레임 워크는 흰색을 포함한 다양한 색상을 정의하므로 흰색을 직접 정의 할 필요가 없습니다. 6. 레이아웃 편집기에서 TextView이제 배경이 진한 파란색이고 텍스트가 흰색으로 표시되는 것을 볼 수 있습니다 .

c0c2141dd09c7ea7.png

2 단계 : 화면 배경색으로 사용할 새 색상 추가

  1. screenBackground로 돌아가서 다음과 colors.xml같은 새 색상 리소스를 만듭니다.
<color name="screenBackground">#FFEE58</color>

색상은 빨강, 파랑, 녹색 (RGB) 구성 요소를 나타내는 3 16 진수 (# 00- # FF 또는 255)로 정의 할 수 있습니다. 방금 추가 한 색상은 노란색입니다. 코드에 해당하는 색상이 편집기의 왼쪽 여백에 표시됩니다.

e2749d2e88ddf4a3.png

투명도를 나타내는 알파 값 (# 00- # FF)을 포함하여 색상을 정의 할 수도 있습니다 (# 00 = 0 % = 완전 투명, #FF = 100 % = 완전 불투명). 포함 된 경우 알파 값은 4 개의 16 진수 (ARGB) 중 첫 번째 값입니다.

알파 값은 투명도의 척도입니다. 예를 들어 # 88FFEE58은 색상을 반투명하게 만들고 # 00FFEE58을 사용하면 완전히 투명하고 왼쪽 막대에서 사라집니다.

  1. fragment_first.xml로 돌아가십시오 .
  2. ConstraintLayout에서 구성 요소 트리를 선택하십시오.
    98c54173559bb461.png
  3. 에서 특성 패널에서 선택 배경 특성 키를 누릅니다 입력합니다 . 표시되는 필드에 “c”를 입력합니다.
  4. 표시되는 색상 메뉴에서 @ color / screenBackground를 선택 합니다. 선택을 완료하려면 Enter 를 누르 십시오 .
4ad182142b7286e6.png
  1. 배경 필드 의 색상 값 왼쪽에있는 노란색 패치를 클릭 합니다.
825da5a9b24ce5ff.png

에 정의 된 색상 목록을 보여줍니다 colors.xml. 사용자 정의 탭을 클릭하여 대화 형 색상 선택기로 사용자 정의 색상을 선택합니다.
ebd2ec170406402a.png

  1. screenBackground 색상 의 값을 자유롭게 변경할 수 있지만 최종 색상이 colorPrimary및 colorPrimaryDark색상 과 눈에 띄게 달라야 합니다.

3 단계 : 너비 및 높이 속성 탐색

이제 새로운 화면 배경색이 생겼으므로이를 사용하여 뷰의 너비 및 높이 속성 변경 효과를 탐색합니다.

  1. 에서는 fragment_first.xml의에서 구성 요소 트리 ConstraintLayout을 선택하십시오 .
3b78c455704d36b8.png
  1. 에서 특성 패널, 찾아 확장 레이아웃 섹션을 참조하십시오.ef495439c2df9fac.png

layout_width 와 layout_height 속성으로 설정되어 match_parent . 이의 ConstraintLayout루트 뷰 Fragment이므로 “상위”레이아웃 크기는 사실상 화면의 크기입니다.

팁 : 모든보기에는 layout_width 및 layout_height 속성 이 있어야합니다 .

  1. 화면의 전체 배경은 screenBackground 색상을 사용합니다 .
6cda01dc20388d55.png
  1. 을 선택 textview_first합니다. 현재 레이아웃 너비와 높이는 wrap_content 이며, 이는 뷰가 콘텐츠를 포함 할 수있을만큼 충분히 커야 함을 나타냅니다 (패딩 포함).
  2. 레이아웃 너비와 레이아웃 높이를 모두 match_constraint로 변경 하여 뷰가 제한되는만큼 커지 도록합니다.

너비와 높이는 0dp로 표시 되고 텍스트는 왼쪽 상단으로 이동 하고 버튼을 제외 하고과TextView 일치하도록 확장됩니다 ConstraintLayout. 버튼과 텍스트 뷰는 제약 레이아웃 내의 뷰 계층 구조에서 동일한 수준에 있으므로 공간을 공유합니다.

b8740b4dc43dc9c4.png
  1. 너비가 match_constraint 이고 높이가 wrap_content 이고 그 반대 인 경우 어떤 일이 발생하는지 살펴보세요 . button_first의 너비와 높이를 변경할 수도 있습니다.
  2. 폭과 높이가 모두 설정 TextView하고 Button다시 wrap_content를 .

6. 보기 및 제약 추가

이 작업에서는 아래와 같이 사용자 인터페이스에 두 개의 버튼을 더 추가하고 기존 버튼을 업데이트합니다.

94e4cf7f4bb5264b.png

학습내용

  • 레이아웃에 새보기를 추가하는 방법.
  • 보기의 위치를 ​​다른보기로 제한하는 방법.

1 단계 : 제약 속성보기

  1. 에서 fragment_first.xml의의 제약 특성 봐 TextView.
app:layout_constraintBottom_toTopOf="@id/button_first"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

이러한 속성은 TextView. 주의 깊게 읽으십시오.

보기의 상단, 하단, 왼쪽 및 오른쪽을 다른보기의 상단, 하단, 왼쪽 및 오른쪽으로 제한 할 수 있습니다.

  1. 선택 textview_first에서 구성 요소 트리 와 봐 제약 위젯 의 특성 패널.
938d3a1c319e1f.png

사각형은 선택한보기를 나타냅니다. 각 회색 점은 위쪽, 아래쪽, 왼쪽 및 오른쪽에 대한 제약 조건을 나타냅니다. 이 예의 경우에서 TextView부모 ConstraintLayout, 또는 아래쪽 제약 조건에 대한 다음 버튼으로. 3. 청사진 및 디자인보기는 특정보기를 선택할 때 제약 조건도 표시합니다. 일부 제약은 들쭉날쭉 한 선이지만, 다음 버튼 에 대한 제약은 약간 다르기 때문에 구불 구불합니다. 그것에 대해 조금 더 배우게 될 것입니다.7d73d3d74c8ebbb9.png

2 단계 : 버튼 추가 및 위치 제한

제약 조건을 사용하여보기 위치를 서로 연결하는 방법을 배우려면 레이아웃에 버튼을 추가합니다. 첫 번째 목표는 버튼과 몇 가지 제약 조건을 추가하고 다음 버튼 의 제약 조건을 변경하는 것 입니다.

  1. 통지 팔레트 레이아웃 편집기의 왼쪽 상단에. 필요한 경우 측면을 이동하여 팔레트에서 많은 항목을 볼 수 있습니다.
47603a2d993c378b.png
  1. 일부 범주를 클릭하고 필요한 경우 나열된 항목을 스크롤하여 사용 가능한 항목을 확인하십시오.
  2. 상단 근처에있는 Button을 선택 하고 디자인보기로 드래그 앤 드롭 TextView하여 다른 버튼 근처에 배치 합니다.
91ddff47af3cde61.png

A는 것을 알 수 Button에 추가 된 구성 요소 트리 에서 ConstraintLayout.

3 단계 : 새 버튼에 제약 조건 추가

이제 버튼의 상단을 TextView.

  1. 의 상단에있는 원 위로 커서를 이동합니다 Button.
d692d553fdb8d06c.png
  1. 상단의 원을 클릭 Button하여 하단의 원으로 드래그 합니다 TextView.
9e7bcb556cd2b58c.png

Button이동까지 바로 아래에 앉아서 TextView버튼의 상단은 이제 때문에 제약 의 바닥에 TextView.

7aa4fd347b3ebde9.png
  1. Attributes 패널 의 Layout 창 에서 Constraint Widget 을 살펴보십시오 . Top-> BottomOf textView를 포함하여에 대한 일부 제약 조건을 보여줍니다 .Button
  2. 버튼의 XML 코드를 살펴보십시오. 이제 버튼의 상단을 .NET Framework의 하단으로 제한하는 속성이 포함됩니다 TextView.
app:layout_constraintTop_toBottomOf="@+id/textview_first"
  1. ” Not Horizontally Constrained ” 라는 경고가 표시 될 수 있습니다 . 이를 수정하려면 버튼 왼쪽에서 화면 왼쪽으로 제약 조건을 추가합니다.
  2. 또한 버튼 하단을 화면 하단으로 제한하는 제약 조건을 추가합니다.

다른 버튼을 추가하기 전에이 버튼의 레이블을 다시 지정하여 어떤 버튼이 어느 버튼인지 좀 더 명확하게 파악하세요.

  1. 디자인 레이아웃에 방금 추가 한 버튼을 클릭합니다.
  2. 오른쪽 의 속성 패널을보고 id 필드를 확인하십시오.
  3. ID를 에서 button로 변경하십시오 toast_button.

4 단계 : 다음 버튼 조정

프로젝트를 만들 때 Android Studio에서 생성 한 Next 라는 버튼을 조정합니다 . 그것과 TextView외모 사이의 제약은 화살표가없는 들쭉날쭉 한 선 대신 물결 모양의 선으로 약간 다릅니다. 이것은 제약 조건이 둘 이상의 객체를 서로 연결하는 것이 아니라 서로 연결 하는 체인을 나타냅니다 . 지금은 연결 제약 조건을 삭제하고 일반 제약 조건으로 대체합니다.

제약을 삭제하려면 :

  • 디자인보기 또는 청사진보기에서 Ctrl키 ( CommandMac의 경우)를 누른 상태에서 원이 강조 표시 될 때까지 제약 조건에 대한 원 위로 커서를 이동 한 다음 원을 클릭합니다.1f8c250ad15873d5.png
  • 또는 제약 된 뷰 중 하나를 클릭 한 다음 제약 조건을 마우스 오른쪽 버튼으로 클릭 하고 메뉴 에서 삭제 를 선택 합니다.
  • 또는 속성 패널에서 x가 표시 될 때까지 제약 조건의 원 위로 커서를 이동 한 다음 클릭합니다.
7f4931356c145bab.png

제약 조건을 삭제하고 되돌리려면 작업을 실행 취소하거나 새 제약 조건을 만듭니다.

5 단계 : 체인 제약 조건 삭제

  1. 다음 버튼을 클릭 한 다음 버튼 상단에서 TextView.
  2. 을 클릭 TextView한 후 텍스트 하단에서 다음 버튼 까지 제약 조건을 삭제 합니다.

6 단계 : 새 제약 조건 추가

  1. 의 우측 구속 다음에 이미 있지 않으면 화면의 오른쪽 버튼.
  2. 다음 버튼 의 왼쪽에있는 제약 조건을 삭제 합니다.
  3. 이제 다음 버튼 의 상단과 하단을 제한하여 버튼의 상단은 TextView하단으로 제한되고 하단은 화면 하단으로 제한됩니다. 버튼의 오른쪽은 화면의 오른쪽으로 제한됩니다.
  4. 또한 TextView화면 하단으로 제한하십시오 .

뷰가 많이 뛰어 다니는 것처럼 보일 수 있지만 제약 조건을 추가하고 제거하는 것은 정상입니다.

이제 레이아웃이 다음과 같이 보일 것입니다.

7fb69c02100a87f6.png

7 단계 : 문자열 리소스 추출

  1. 에서 fragment_first.xml레이아웃 파일의의 텍스트 속성 찾기 toast_button버튼을 클릭합니다.
<Button
   android:id="@+id/toast_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"
  1. 텍스트 "Button"는 문자열 리소스를 참조하는 대신 레이아웃 필드에 직접 있습니다 TextView. 이렇게하면 앱을 다른 언어로 번역하기가 더 어려워집니다.
  2. 이 문제를 해결하려면 강조 표시된 코드를 클릭하십시오. 왼쪽에 전구가 나타납니다.
47544075e3e5ecdb.png
  1. 전구를 클릭합니다. 팝업 메뉴에서 Extract string resource를 선택 하십시오 .ca47cfeb06a1602.png
  2. 나타나는 대화 상자에서 리소스 이름을로 변경 toast_button_text하고 리소스 값을로 변경 Toast하고 확인을 클릭 합니다.
8fa866598929c1b4.png
  1. android:text속성 값 이로 변경되었습니다 @string/toast_button_text.
<Button
   android:id="@+id/button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/toast_button_text"
  1. res> values> strings.xml 파일로 이동 합니다. toast_button_text**. ** 라는 새 문자열 리소스가 추가되었습니다 .
<resources>
   ... 
   <string name="toast_button_text">Toast</string>
</resources>
  1. 앱을 실행하여 예상대로 표시되는지 확인합니다.
73c7729f2d8329df.png

이제 기존 필드 값에서 추출하여 새 문자열 리소스를 만드는 방법을 알았습니다. ( strings.xml파일 에 새 리소스를 수동으로 추가 할 수도 있습니다 .)보기의 ID를 변경하는 방법도 알고 있습니다.

참고 : 보기 의 ID 는 다른보기와 구별되는보기를 식별하는 데 도움이됩니다. 나중에이를 사용 findViewById()하여 Java 코드 의 메소드를 사용하여 특정 뷰를 찾을 수 있습니다.

8 단계 : 다음 버튼 업데이트

다음 버튼을 이미 문자열 리소스에서 해당 텍스트를 가지고,하지만 당신은 임의의 숫자를 생성하고 표시하는 것입니다 새로운 역할을 일치 버튼을 일부 변경 할 수 있습니다.

  1. 당신이를 위해 한대로 토스트 버튼의 ID를 변경 다음의 에서 버튼 button_first을 random_button의 특성 패널.
  2. 버튼의 모든 사용법을 업데이트 할 것인지 묻는 대화 상자가 나타나면 예를 클릭 합니다. 이렇게하면 프로젝트 코드에서 버튼에 대한 다른 참조가 수정됩니다.
    434e77fabe53b6a3.png
  3. 에서 strings.xml의 마우스 오른쪽 버튼으로 클릭 next문자열 리소스.
  4. Refactor> Rename …을 선택 하고 이름을 random_button_text.
  5. 리팩터링 을 클릭 하여 문자열 이름을 바꾸고 대화 상자를 닫습니다.
  6. 에서 문자열 값 변경 Next에를 Random.
  7. 원하는 경우 random_button_text아래 로 이동하십시오 toast_button_text.

9 단계 : 세 번째 버튼 추가

최종 레이아웃에는 세로로 동일하게 제한되고 서로 간격이 균등 한 세 개의 버튼이 있습니다.

7e6529faadd88569.png
  1. 에서는 fragment_first.xml, 레이아웃에 다른 버튼을 추가하고 중간 쯤에 드롭 토스트 버튼을 임의 아래 버튼 TextView.
  2. 다른 두 버튼과 동일한 수직 제약 조건을 추가합니다. 세 번째 버튼의 상단을의 하단으로 제한합니다 TextView. 세 번째 버튼의 하단을 화면 하단으로 제한합니다.
  3. 세 번째 버튼의 수평 제약 조건을 다른 버튼에 추가합니다. 세 번째 버튼의 왼쪽을 알림 버튼 의 오른쪽으로 제한 합니다. 세 번째 버튼의 오른쪽을 임의 버튼 의 왼쪽으로 제한 합니다.

레이아웃은 다음과 같아야합니다.

7588895a67295422.png
  1. .NET 용 XML 코드를 검토합니다 fragment_first.xml. 버튼에 속성이 app:layout_constraintVertical_bias있습니까? 제약 조건이 보이지 않아도 괜찮습니다.

“바이어스”제약 조건을 사용하면 양쪽이 반대 방향으로 제약 될 때 뷰의 위치를 ​​다른 쪽보다 한쪽에 더 많이 배치 할 수 있습니다 . 예를 들어,보기의 상단과 하단이 모두 화면의 상단과 하단으로 제한되는 경우 수직 편향을 사용하여 하단보다 상단에보기를 더 배치 할 수 있습니다.

완성 된 레이아웃에 대한 XML 코드는 다음과 같습니다. 레이아웃에는 여백이 다르고 수직 또는 수평 바이어스 제약 조건 TextView이 다를 수 있으며 , 모양에 대한 속성의 정확한 값은 앱에 따라 다를 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/screenBackground"
   tools:context=".FirstFragment">

   <TextView
       android:id="@+id/textview_first"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimaryDark"
       android:fontFamily="sans-serif-condensed"
       android:text="@string/hello_first_fragment"
       android:textColor="@android:color/white"
       android:textSize="30sp"
       android:textStyle="bold"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <Button
       android:id="@+id/random_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/random_button_text"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/textview_first" />

   <Button
       android:id="@+id/toast_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/toast_button_text"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/textview_first" />

   <Button
       android:id="@+id/button2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toStartOf="@+id/random_button"
       app:layout_constraintStart_toEndOf="@+id/toast_button"
       app:layout_constraintTop_toBottomOf="@+id/textview_first" />
</androidx.constraintlayout.widget.ConstraintLayout>

10 단계 : 다음 작업을위한 UI 준비

다음 작업은 버튼을 눌렀을 때 어떤 작업을 수행하도록하는 것입니다. 먼저 UI를 준비해야합니다.

  1. 의 텍스트를 변경 TextView보여 0 (숫자 영).
  2. 변경 id마지막으로 추가 한 버튼의, button2에 count_button는의 속성 디자인 편집기에서 패널을.
  3. XML에서 문자열 리소스를 추출 count_button_text하고 값을 다음으로 설정합니다.Count.
  4. bbe0bcab6903ea27.png

이제 버튼에 다음과 같은 텍스트와 ID가 있어야합니다.

단추본문신분증
왼쪽 버튼토스트@ + id / 토스트 _ 버튼
중간 버튼카운트@ + id / count_button
오른쪽 버튼랜덤@ + id / random_button
  1. 앱을 실행하십시오.

11 단계 : 필요한 경우 오류 수정

레이아웃의 XML을 직접 편집 한 경우 일부 오류가 표시 될 수 있습니다.

c01516073934ed58.png

버튼이 변경 id되어 현재 이러한 제약 조건이 존재하지 않는 뷰를 참조 하기 때문에 오류가 발생 합니다.

이러한 오류 id가있는 경우 빨간색 밑줄이 표시된 제약 조건의 버튼 을 업데이트하여 오류를 수정하십시오 .

app:layout_constraintEnd_toStartOf="@+id/random_button"
app:layout_constraintStart_toEndOf="@+id/toast_button"

7. 버튼 및 TextView 모양 편집

이제 앱의 레이아웃이 기본적으로 완성되었지만 몇 가지 작은 변경으로 모양을 개선 할 수 있습니다.

1 단계 : 새 색상 리소스 추가

  1. 에서는 colors.xml의 값 변경 screenBackground에 #2196F3의 푸른 그늘이다, 재료 디자인 팔레트를 .
  2. 라는 새 색상을 추가합니다 buttonBackground. #BBDEFB파란색 팔레트에서 더 밝은 음영 인 값을 사용하십시오 .
<color name="buttonBackground">#BBDEFB</color>

2 단계 : 버튼의 배경색 추가

  1. 레이아웃에서 각 버튼에 배경색을 추가합니다. (원하는대로에서 XML을 편집 fragment_first.xml하거나 속성 패널을 사용할 수 있습니다 .)
android:background="@color/buttonBackground"

3 단계 : 왼쪽 및 오른쪽 버튼의 여백 변경

  1. 주고받는 토스트 버튼을 24dp의 왼쪽 (시작) 마진을하고 줄 임의의 버튼을 24dp의 오른쪽 (끝) 마진을. (왼쪽과 오른쪽 대신 시작과 끝을 사용하면 이러한 여백이 모든 언어 방향에서 작동합니다.)

이를 수행하는 한 가지 방법 은 Attributes 패널 에서 Constraint Widget 을 사용하는 것 입니다. 각면의 숫자는 선택한보기의 해당면에있는 여백입니다. 입력 필드에 키를 누릅니다 입력합니다 .2481c294a2cf04b801.png

4 단계 : TextView의 모양 업데이트

  1. 속성 패널 TextView에서 값을 지우 거나 XML 코드에서 속성을 제거하여의 배경색을 제거합니다 .android:background

배경을 제거하면 뷰 배경이 투명 해집니다. 2.의 텍스트 크기 TextView를 72sp로 늘립니다.

android:textSize="72sp"
  1. 의 글꼴 가족 변경 TextView에 sans-serif(이미 아니라면).
  2. 에 app:layout_constraintVertical_bias속성을 추가 TextView하여 뷰의 위치를 ​​약간 위쪽으로 편향하여 화면에서 수직으로 더 균등하게 배치되도록합니다. 이 제약 조건의 값을 원하는대로 자유롭게 조정하십시오. (디자인보기에서 레이아웃이 어떻게 보이는지 확인하십시오.)
app:layout_constraintVertical_bias="0.3"
  1. Constraint Widget을 사용하여 수직 편향을 설정할 수도 있습니다 . 왼쪽에 표시 되는 숫자 50 을 클릭하여 드래그 한 다음 30이 표시 될 때까지 위로 밉니다 .7c73e04dc2f35d00.png

팁 : 여백이나 패딩 대신 바이어스 속성을 사용하면 다양한 화면 크기와 방향에서보다 만족스러운 레이아웃을 얻을 수 있습니다.

  • 뷰가 위쪽 및 아래쪽 가장자리 모두에서 다른 뷰로 제한되는 경우 수직 바이어스를 사용하여 수직 위치를 조정합니다.
  • 뷰가 왼쪽 및 오른쪽 가장자리 모두에서 제한되는 경우 수평 바이어스를 사용하여 수평 위치를 조정합니다.
  1. 있는지 확인 layout_width가 있다 wrap_content , 수평 바이어스 (50 app:layout_constraintHorizontal_bias="0.5"XML에서).

5 단계 : 앱 실행

모든 업데이트를 구현 한 경우 앱은 다음 그림과 같습니다. 다른 색상과 글꼴을 사용했다면 앱이 약간 다르게 보일 것입니다.

214cfb8299ed8d36.png

8. 앱을 대화형으로 만들기

앱의 기본 화면에 버튼을 추가했지만 현재 버튼은 아무 작업도 수행하지 않습니다. 이 작업에서는 사용자가 버튼을 누를 때 버튼이 반응하도록합니다.

먼저 Toast 버튼에 toast 라는 팝업 메시지가 표시 되도록합니다 . 다음으로 Count 버튼이에 표시되는 번호를 업데이트하도록합니다 TextView.

학습내용

  • ID로보기를 찾는 방법.
  • 보기에 대한 클릭 리스너를 추가하는 방법.
  • 코드에서 뷰의 속성 값을 설정하고 가져 오는 방법.

1 단계 : 자동 가져 오기 사용

작업을 더 쉽게하기 위해 Android Studio가 Java 코드에 필요한 모든 클래스를 자동으로 가져 오도록 자동 가져 오기를 활성화 할 수 있습니다.

  1. Android 스튜디오에서 File > Other Settings > Preferences for New Projects 로 이동하여 설정 편집기를 엽니 다 .
  2. 자동 가져 오기를 선택합니다 . 에서 자바 섹션, 확인 즉시 추가이 명확한 수입이 확인됩니다.

5507aa63b0db10d5.png3. 확인 을 눌러 설정 편집기를 닫습니다 .

2 단계 : 건배하기

이 단계에서는 사용자가 버튼을 누를 때 알림 을 표시 하기 위해 알림 버튼에 Java 메서드를 연결 합니다. 알림은 화면 하단에 잠깐 표시되는 짧은 메시지입니다.

b3d6daf5bb6784d9.png
  1. FirstFragment.java( app > java > com.example.android.myfirstapp> FirstFragment )를 엽니 다 .

이 클래스에는 onCreateView()및 onViewCreated(). 이러한 메서드는 조각이 시작될 때 실행됩니다.

앞서 언급했듯이 보기 의 ID 는 다른보기와 구별되는보기를 식별하는 데 도움이됩니다. 이 findViewByID()방법을 사용하면 코드에서 random_buttonID를 사용하여 R.id.random_button. 2.를보세요 onViewCreated(). random_button원래 다음 버튼으로 생성 된에 대한 클릭 리스너를 설정 합니다.

view.findViewById(R.id.random_button).setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       NavHostFragment.findNavController(FirstFragment.this)
               .navigate(R.id.action_FirstFragment_to_SecondFragment);
   }
});

이 코드의 기능은 다음과 같습니다.

  • findViewById()원하는보기의 ID를 인수로 사용하는 메소드를 사용한 다음 해당보기에 클릭 리스너를 설정하십시오.
  • 클릭 리스너의 본문에서이 경우 다른 프래그먼트로 이동하는 작업을 사용하고 거기로 이동합니다. (나중에 배우게 될 것입니다.)
  1. 클릭 리스너 바로 아래 toast_button에 토스트를 만들고 표시하는에 대한 클릭 리스너를 설정하는 코드를 추가합니다 . 다음은 코드입니다.
view.findViewById(R.id.toast_button).setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       Toast myToast = Toast.makeText(getActivity(), "Hello toast!", Toast.LENGTH_SHORT);
       myToast.show();
   }
});
  1. 앱을 실행하고 토스트 버튼을 누릅니다. 화면 하단에 알림 메시지가 표시 되나요?b3d6daf5bb6784d9.png
  2. 원하는 경우 버튼 라벨에서했던 것처럼 메시지 문자열을 리소스로 추출합니다.

보기를 대화 형으로 만들려면보기 (버튼)를 클릭 할 때 수행 할 작업을 알려주는보기에 대한 클릭 리스너를 설정해야한다는 것을 배웠습니다. 클릭 리스너는 다음 중 하나를 수행 할 수 있습니다.

  • 소량의 코드를 직접 구현하십시오.
  • 활동에서 원하는 클릭 동작을 정의하는 메서드를 호출합니다.

3 단계 : 카운트 버튼이 화면의 숫자를 업데이트하도록합니다.

토스트를 보여주는 방법은 매우 간단합니다. 레이아웃의 다른보기와 상호 작용하지 않습니다. 다음 단계에서는 레이아웃에 동작을 추가하여 다른보기를 찾고 업데이트합니다.

카운트 버튼을 누르면 화면의 숫자가 1 씩 증가하도록 업데이트합니다 .

  1. 에서 fragment_first.xml레이아웃 파일, 통지 id에 대한 TextView:
<TextView
   android:id="@+id/textview_first"
  1. 에서 의 다른 클릭 리스너 아래에 FirstFragment.java대한 클릭 리스너를 추가합니다 . 해야 할 일이 조금 더 많기 때문에 새로운 메서드 인 .count_buttononViewCreated()countMe()
view.findViewById(R.id.count_button).setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       countMe(view);
   }
});
  1. 에서 FirstFragment클래스, 메소드 추가 countMe()한 소요 View인수를. 이 메서드는 Count 버튼을 클릭하고 클릭 리스너가 호출 될 때 호출됩니다 .
private void countMe(View view) {
  
}
  1. 의 값을 가져옵니다 showCountTextView. 다음 단계에서 정의합니다.
   ...
    // Get the value of the text view
    String countString = showCountTextView.getText().toString();
  1. 값을 숫자로 변환하고 증분합니다.
   ...
    // Convert value to a number and increment it
    Integer count = Integer.parseInt(countString);
    count++;
  1. TextView의 text속성을 프로그래밍 방식으로 설정하여 에 새 값을 표시합니다 TextView.
   ...
   // Display the new value in the text view.
   showCountTextView.setText(count.toString());

전체 방법은 다음과 같습니다.

private void countMe(View view) {
   // Get the value of the text view
   String countString = showCountTextView.getText().toString();
   // Convert value to a number and increment it
   Integer count = Integer.parseInt(countString);
   count++;
   // Display the new value in the text view.
   showCountTextView.setText(count.toString());
}

4 단계 : 반복 사용을 위해 TextView 캐시

당신은 부를 수 findViewById()에서 countMe()발견 showCountTextView. 그러나 countMe()버튼을 클릭 할 때마다 호출되며 findViewById()비교적 시간이 많이 걸리는 호출 방법입니다. 따라서 뷰를 한 번 찾아 캐시하는 것이 좋습니다.

  1. 에서 FirstFragment어떤 방법 전에 클래스의 멤버 변수를 추가 showCountTextView유형의 TextView.
TextView showCountTextView;
  1. 에서가 onCreateView(), 당신은 호출 findViewById()얻을 수 TextView있음을 나타냅니다 카운트를. findViewById()방법은 호출해야 View하므로 현재, 새로운 변수로 반환되는 레이아웃보기 할당 요청 ID에 대한 검색을 시작해야하는 위치 fragmentFirstLayout를 대신.
// Inflate the layout for this fragment
View fragmentFirstLayout = inflater.inflate(R.layout.fragment_first, container, false);
  1. 전화 findViewById()에 fragmentFirstLayout, 그리고 지정 id, 찾을 수있는보기를 textview_first. 해당 값을 showCountTextView.
   ...
    // Get the count text view
    showCountTextView = fragmentFirstLayout.findViewById(R.id.textview_first);
  1. 에서 돌아 fragmentFirstLayout옵니다 onCreateView().
return fragmentFirstLayout;

다음은 전체 방법과 선언입니다 showCountTextView.

TextView showCountTextView;

@Override
public View onCreateView(
       LayoutInflater inflater, ViewGroup container,
       Bundle savedInstanceState
) {
   // Inflate the layout for this fragment
   View fragmentFirstLayout = inflater.inflate(R.layout.fragment_first, container, false);
   // Get the count text view
   showCountTextView = fragmentFirstLayout.findViewById(R.id.textview_first);

   return fragmentFirstLayout;
}
  1. 앱을 실행하십시오. 카운트 버튼을 누르고 카운트 업데이트를 봅니다.

f2b19b9209cad4f4.png

9. 두번째 조각 구현

지금까지 앱의 첫 번째 화면에 집중했습니다. 다음으로 Random 버튼을 업데이트하여 0과 현재 카운트 사이의 난수를 두 번째 화면에 표시합니다.

c7029fe48ec2a802.png

학습내용

  • 정보를 두 번째 조각으로 전달하는 방법.

두 번째 조각의 레이아웃 업데이트

새 조각의 화면에 제목 제목과 임의의 숫자가 표시됩니다. 다음은 디자인보기의 화면 모습입니다 a991c2db96dcafb3.png. % d 는 문자열의 일부가 숫자로 대체됨을 나타냅니다. R은 단지 자리 표시 자입니다.

1 단계 : 난수에 대한 TextView 추가

  1. fragment_second.xml( app> res> layout> fragment_second.xml )을 열고 필요한 경우 디자인보기로 전환 합니다. 공지 사항 그것이 가지고 ConstraintLayout포함하는 TextView과를 Button.
  2. TextView와 Button사이의 체인 제약 조건을 제거합니다.
    e49352faab20c765.png
  3. TextView팔레트에서 다른 것을 추가 하고 화면 중앙 근처에 놓습니다. 이것은 TextView0과 처음부터 현재 카운트 사이의 임의의 숫자를 표시하는 데 사용됩니다 Fragment.
  4. 속성 패널 에서 id를 @+id/textview_random() textview_random로 설정합니다 .
  5. 새 항목의 상단 가장자리를 TextView첫 번째의 하단으로 TextView, 왼쪽 가장자리를 화면 왼쪽으로, 오른쪽 가장자리를 화면 오른쪽으로, 하단을 이전 버튼 의 상단으로 제한 합니다.
  6. 너비와 높이를 모두 wrap_content로 설정합니다 .
  7. 설정 텍스트 색상을 에 @android : 색 / 흰색 의 설정 TEXTSIZE 에 72sp를 하고, 텍스트 스타일 에 굵은 .
81dc7122e9ddaea1.png
  1. 텍스트를 ” R“로 설정하십시오 . 이 텍스트는 난수가 생성 될 때까지 자리 표시 자일뿐입니다.
  2. layout_constraintVertical_bias 를 0.45로 설정합니다 .

이것은 TextView모든 가장자리에 제한되어 있으므로 다양한 화면 크기와 방향에서 레이아웃이 잘 보이도록하려면 여백보다 수직 편향을 사용하여 수직 위치를 조정하는 것이 좋습니다. 10. “수평으로 제한되지 않음” 경고가 표시 되면 단추 시작에서 화면 왼쪽으로 제한을 추가하고 단추 끝에서 화면 오른쪽으로 제한을 추가하십시오.

TextView난수를 표시하는 의 XML 코드는 다음과 같습니다 .

<TextView
   android:id="@+id/textview_random"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="R"
   android:textColor="@android:color/white"
   android:textSize="72sp"
   android:textStyle="bold"
   app:layout_constraintBottom_toTopOf="@+id/button_second"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/textview_second"
   app:layout_constraintVertical_bias="0.45" />

2 단계 : 헤더를 표시하도록 TextView 업데이트

  1. 에서가 fragment_second.xml선택 textview_second현재 텍스트가있는 "Hello second fragment. Arg: %1$s"에서 hello_second_fragment문자열 리소스를.
  2. android:text설정되지 않은 경우 hello_second_fragment문자열 리소스로 설정합니다 .
android:text="@string/hello_second_fragment"
  1. 속성 패널 에서 ID 를 textview_header로 변경하십시오 .
  2. 너비를 match_constraint 로 설정하고 높이를 wrap_content로 설정하면 높이가 콘텐츠의 높이와 일치하도록 필요에 따라 변경됩니다.
  3. 위쪽, 왼쪽 및 오른쪽 여백을 24dp. 왼쪽 및 오른쪽 여백은 오른쪽에서 왼쪽으로 쓰는 언어에 대한 지역화를 지원하기 위해 “시작”및 “끝”이라고도합니다.
  4. 하단 구속을 제거합니다.
  5. 텍스트 색상을 @color/colorPrimaryDark로, 텍스트 크기를로 설정 24sp합니다.
  6. 에서 strings.xml변경 hello_second_fragment을 ” Here is a random number between 0 and %d.“
  7. 사용 팩터> 이름 바꾸기 … 이름 변경 hello_second_fragment에를 random_heading.

TextView제목을 표시하는 의 XML 코드는 다음과 같습니다 .

<TextView
   android:id="@+id/textview_header"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_marginStart="24dp"
   android:layout_marginLeft="24dp"
   android:layout_marginTop="24dp"
   android:layout_marginEnd="24dp"
   android:layout_marginRight="24dp"
   android:text="@string/random_heading"
   android:textColor="@color/colorPrimaryDark"
   android:textSize="24sp"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />
ff7f9969afbd67ff.png

3 단계 : 레이아웃의 배경색 변경

새 활동에 첫 번째 활동과 다른 배경색을 지정하십시오.

  1. 에서 colors.xml, 새로운 색상 자원을 추가 :
<color name="screenBackground2">#26C6DA</color>
  1. 두 번째 활동의 레이아웃에서의 fragment_second.xml배경을 ConstraintLayout새 색상으로 설정합니다.

에서 특성 패널 :

9948b482fb81ef5.png

또는 XML :

android:background="@color/screenBackground2"

이제 앱에 두 번째 조각에 대한 완성 된 레이아웃이 있습니다. 그러나 앱을 실행하고 Random 버튼을 누르면 충돌이 발생할 수 있습니다. Android 스튜디오가 해당 버튼에 대해 설정 한 클릭 핸들러를 변경해야합니다. 다음 태스크에서는이 오류를 탐색하고 수정합니다.

4 단계 : 내비게이션 그래프 조사

프로젝트를 만들 때 새 프로젝트의 템플릿으로 기본 활동 을 선택했습니다 . Android Studio는 새 프로젝트에 기본 활동 템플릿을 사용할 때 두 조각과 두 조각을 연결하는 탐색 그래프를 설정합니다. 또한 첫 번째 조각에서 두 번째 조각으로 문자열 인수를 보내는 버튼을 설정합니다. 랜덤 버튼으로 변경 한 버튼입니다. 이제 문자열 대신 숫자를 보내려고합니다.

  1. nav_graph.xml( app> res> navigation> nav_graph.xml )을 엽니 다 .

받는 사람과 비슷한 화면 레이아웃 편집기 의 디자인이 나타납니다 볼 수 있습니다. 두 조각 사이에 화살표가 있습니다. Layout Editor 에서처럼 오른쪽 하단에있는 + 및 – 버튼으로 확대 / 축소 할 수 있습니다 .

  1. 탐색 편집기에서 요소를 자유롭게 이동할 수 있습니다. 예를 들어 조각 SecondFragment이 왼쪽에 표시 되는 경우 왼쪽으로 드래그 FirstFragment하여 SecondFragment작업하는 순서대로 표시되도록합니다.
504c2156d46d4d6b.png

5 단계 : SafeArgs 활성화

이렇게하면 Android Studio에서 SafeArgs가 활성화됩니다.

  1. Gradle Scripts> build.gradle (프로젝트 : My First App)을 엽니 다 .
  2. dependencies섹션 에서 섹션을 찾고 buildscript다른 classpath항목 뒤에 다음 행을 추가하십시오 .
def nav_version = "2.3.0-alpha04"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
  1. Gradle Scripts> build.gradle (모듈 : 앱)을 엽니 다 .
  2. apply plugin으로 시작하는 다른 줄 바로 아래에 SafeArgs를 활성화하는 줄을 추가합니다.
apply plugin: 'androidx.navigation.safeargs'
  1. Android Studio는 변경중인 Gradle 파일에 대한 메시지를 표시해야합니다. 오른쪽에서 지금 동기화를 클릭 합니다 .50cedf1769381459.png

잠시 후 Android Studio는 동기화 탭에 성공했다는 메시지를 표시해야합니다. a1c51cb92c04e07e.png

  1. 빌드> 프로젝트 만들기를 선택합니다 . Android Studio에서 FirstFragmentDirections.

문제 해결 : 동기화에 실패한 경우 올바른 Gradle 파일에 올바른 줄을 추가했는지 확인합니다. 그래도 문제가있는 경우 Safe Args 에 대한 개발자 가이드 에서 업데이트 nav_version또는 기타 변경 사항을 확인하십시오.

6 단계 : 탐색 작업에 대한 인수 만들기

  1. 탐색 그래프에서을 클릭 하고 오른쪽 FirstFragment에있는 속성 패널을 확인합니다. (패널이 표시되지 않으면 오른쪽에있는 수직 속성 레이블을 클릭하십시오 .)
  2. 에서 작업 섹션은 행동 즉 가고, 네비게이션 무슨 일이 일어날 지 보여줍니다 SecondFragment.
  3. 을 클릭 SecondFragment하고 속성 패널을 확인합니다.

인수 섹션을 보여줍니다 Nothing to show.

  1. 인수 섹션 에서 + 를 클릭하십시오 .
  2. 에서 추가 인수 대화 상자에서 입력 한 myArg이름과로 유형 설정 정수를 , 다음을 클릭합니다 추가 버튼을 클릭합니다.c334d61be24eb01d.png

7 단계 : 카운트를 두 번째 조각으로 보내기

다음 / 임의 버튼은 초 첫 조각에서 이동 안드로이드 스튜디오에 의해 설립되었다, 그러나 어떤 정보를 전송하지 않습니다. 이 단계에서는 현재 카운트에 대한 번호를 보내도록 변경합니다. 이를 표시하는 텍스트보기에서 현재 개수를 가져 와서 두 번째 조각으로 전달합니다.

  1. 열기 FirstFragment.java( app> java> com.example.myfirstapp> FirstFragment )
  2. 메서드를 찾고 onViewCreated()첫 번째 조각에서 두 번째 조각으로 이동하도록 클릭 리스너를 설정하는 코드를 확인합니다.
  3. 해당 클릭 리스너의 코드를 개수 텍스트보기를 찾는 행으로 대체하십시오 textview_first.
int currentCount = Integer.parseInt(showCountTextView.getText().toString());
  1. 에 currentCount대한 인수로를 사용하여 작업을 만듭니다 actionFirstFragmentToSecondFragment().
FirstFragmentDirections.ActionFirstFragmentToSecondFragment action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount);
  1. 탐색 컨트롤러를 찾고 생성 한 작업으로 탐색하는 줄을 추가합니다.
NavHostFragment.findNavController(FirstFragment.this).navigate(action);

이전에 추가 한 코드를 포함한 전체 방법은 다음과 같습니다.

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
   super.onViewCreated(view, savedInstanceState);

   view.findViewById(R.id.random_button).setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           int currentCount = Integer.parseInt(showCountTextView.getText().toString());
           FirstFragmentDirections.ActionFirstFragmentToSecondFragment action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount);
           NavHostFragment.findNavController(FirstFragment.this).navigate(action);
       }
   });

   view.findViewById(R.id.toast_button).setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           Toast myToast = Toast.makeText(getActivity(), "Hello toast!", Toast.LENGTH_SHORT);
           myToast.show();
       }
   });

   view.findViewById(R.id.count_button).setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           countMe(view);
       }
   });
}
  1. 앱을 실행하십시오. 카운트 버튼을 몇 번 클릭합니다 . 이제 Random 버튼 을 누르면 두 번째 화면에 헤더에 올바른 문자열이 표시되지만 카운트 나 난수는 표시되지 않습니다.이를 수행하려면 코드를 작성해야하기 때문입니다.

8 단계 : SecondFragment를 업데이트하여 난수를 계산하고 표시합니다.

현재 개수를 두 번째 조각으로 보내는 코드를 작성했습니다. 다음 단계는 SecondFragment.java현재 개수를 검색하고 사용 하기 위한 코드를 추가 하는 것입니다.

  1. 에서 SecondFragment.java가져온 라이브러리 목록에 navArgs에 대한 가져 오기를 추가합니다.
import androidx.navigation.fragment.navArgs;
  1. 로 onViewCreated()시작하는 줄 아래 의 메서드 super에서 현재 개수를 가져오고 문자열을 가져 와서 개수로 형식을 지정한 다음 textview_header로 설정하는 코드를 추가합니다.
Integer count = SecondFragmentArgs.fromBundle(getArguments()).getMyArg();
String countText = getString(R.string.random_heading, count);
TextView headerView = view.getRootView().findViewById(R.id.textview_header);
headerView.setText(countText);
  1. 0과 개수 사이의 임의의 숫자를 가져옵니다.
Random random = new java.util.Random();
Integer randomNumber = 0;
if (count > 0) {
   randomNumber = random.nextInt(count + 1);
}
  1. 해당 숫자를 문자열로 변환하는 코드를 추가하고 textview_random.
TextView randomView = view.getRootView().findViewById(R.id.textview_random);
randomView.setText(randomNumber.toString());
  1. 앱을 실행하십시오. 눌러 카운트 버튼을 몇 번 한 후 눌러 임의의 버튼을 누릅니다. 앱이 새 활동에서 임의의 숫자를 표시합니까?6cba94311109e72f.png

축하합니다. 첫 번째 Android 앱을 만들었습니다!

10. 더 알아보기

이 코드 랩의 목적은 Android 앱 빌드를 시작하는 것입니다. 데이터를 저장하는 방법과 같은 더 많은 것을 알고 싶으십니까? 백그라운드 작업을 어떻게 실행합니까? 사진 목록을 어떻게 표시합니까? 내가 어떻게 할 …

계속 배우는 것이 좋습니다. 학습 여정에 도움이되도록 Google에서 만든 더 많은 Android 과정이 있습니다.

작성된 튜토리얼

  • Android Developer Fundamentals 는 프로그래머에게 Android 앱을 빌드하도록 가르칩니다. 이 과정은 일부 학교에서도 제공됩니다.
  • Kotlin Bootcamp codelabs 과정 은 프로그래머를위한 Kotlin 소개 입니다. 이 과정을 수강하려면 객체 지향 프로그래밍 언어 (Java, C ++, Python)에 대한 경험이 필요합니다.
  • Google의 공식 Android 개발자 문서 인 developer.android.com 에서 자세히 알아보세요 .

이러한 대화 형 동영상 기반 과정은 Udacity와 공동으로 Google 전문가가 만들었습니다. 자신의 시간에 자신의 속도로이 과정을 수강하십시오.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Table of Contents