콘텐츠

• 네비게이션 아키텍처 구성 요소 란 무엇입니까?
• Android Studio에 탐색 편집기 추가
• 프로젝트 의존성 : Navigation Fragment and Navigation UI
• 앱 탐색에 대한 시각적 개요보기
• 탐색 그래프 채우기 : 대상 추가
• 프래그먼트 레이아웃 업데이트
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• 목적지를 행동으로 연결
• 탐색 그래프 호스팅
• NavController로 전환 트리거
• 내비게이션 추가
• 커스텀 전환 애니메이션 만들기
• 마무리

2018 년 I / O 회의에서 Google은 새로운 Android 앱 개발 방법을 발표했습니다.

Google의 공식 권장 사항은 앱의 주요 진입 점 역할을하는 단일 활동을 만든 다음 나머지 애플리케이션의 콘텐츠를 조각으로 제공하는 것입니다.

I / O 2018에서 Google은 이러한 다양한 조각 트랜잭션과 수명주기를 모두 해결하려는 생각이 악몽처럼 들릴 수 있지만 I / O 2018에서 이러한 단일 활동 구조를 채택 할 수 있도록 설계된 내비게이션 아키텍처 구성 요소도 출시했습니다.

이 기사에서는 Android Studio의 새로운 Navigation Editor의 도움을 받아 Navigation 컴포넌트를 프로젝트에 추가하는 방법과이를 사용하여 단일 액티비티, 다중 조각 애플리케이션을 빠르고 쉽게 생성하는 방법을 보여줍니다. 프래그먼트를 생성하고 연결하면 Navigation 구성 요소와 편집기를 사용하여 Android의 표준 프래그먼트 트랜지션을 향상시켜 다양한 사용자 정의 가능한 전환 애니메이션을 만들 수 있습니다.

네비게이션 아키텍처 구성 요소 란 무엇입니까?

내비게이션 아키텍처 구성 요소 인 Android JetPack의 일부인 애플리케이션을 통해 다양한 경로를 시각화하고 특히 조각 트랜잭션 관리와 관련하여 이러한 경로를 구현하는 프로세스를 단순화합니다.

Navigation 구성 요소를 사용하려면 앱의 활동과 조각이 서로 관련되는 방법을 설명하는 XML 파일 인 Navigation Graph를 만들어야합니다.

탐색 그래프는 다음으로 구성됩니다.

• 목적지 : 사용자가 탐색 할 수있는 개별 화면
• 행위: 사용자가 앱의 목적지 사이를 이동할 수있는 경로

Android Studio의 내비게이션 편집기에서 프로젝트의 내비게이션 그래프를 시각적으로 볼 수 있습니다. 아래에는 탐색 편집기에 표시되는 3 개의 대상과 3 개의 동작으로 구성된 탐색 그래프가 있습니다.

내비게이션 구성 요소는 단일 활동이 내비게이션 그래프를 호스트하고 모든 목적지가 조각으로 구현되는 Google의 새로운 권장 앱 구조를 구현하도록 설계되었습니다. 이 기사에서는이 권장 방법을 따르고 MainActivity와 세 개의 조각 대상으로 구성된 응용 프로그램을 만듭니다.

그러나 Navigation 구성 요소는 이러한 권장 구조를 가진 응용 프로그램만을위한 것이 아닙니다. 프로젝트에는 여러 개의 내비게이션 그래프가있을 수 있으며 조각 및 활동을 해당 내비게이션 그래프 내 대상으로 사용할 수 있습니다. 크고 성숙한 프로젝트를 Navigation 구성 요소로 마이그레이션하는 경우 앱의 탐색 흐름을 그룹으로 쉽게 분리 할 수 ​​있습니다. 각 그룹은 "주요"활동, 일부 관련 조각 및 자체 탐색 그래프로 구성됩니다.

Android Studio에 탐색 편집기 추가

내비게이션 구성 요소를 최대한 활용할 수 있도록 Android Studio 3.2 Canary 이상에는 새로운 내비게이션 편집기가 있습니다.

이 편집기를 활성화하려면

• Android Studio 메뉴 표시 줄에서 "Android Studio> 기본 설정 ..."을 선택하십시오.
• 왼쪽 메뉴에서 "실험"을 선택하십시오.
• 아직 선택하지 않은 경우 "탐색 편집기 사용"확인란을 선택하십시오.

• "확인"을 클릭하십시오.
• Android Studio를 다시 시작하십시오.

프로젝트 의존성 : Navigation Fragment and Navigation UI

선택한 설정으로 새 프로젝트를 만든 다음 build.gradle 파일을 열고 navigation-fragment 및 navigation-ui를 프로젝트 종속성으로 추가하십시오.

종속성 {구현 fileTree (dir : libs, include :) 구현 com.android.support:appcompat-v7:28.0.0 구현 com.android.support.constraint : constraint-layout : 1.1.3 // 다음 // 구현 추가 "android.arch.navigation : navigation-fragment : 1.0.0-alpha05"// Navigation-UI는 일부 도우미 함수 // 구현 "android.arch.navigation : navigation-ui : 1.0.0-alpha05"구현 com에 대한 액세스를 제공합니다. .android.support : support-v4 : 28.0.0 testImplementation junit : junit : 4.12 androidTestImplementation com.android.support.test : runner : 1.0.2 androidTestImplementation com.android.support.test.espresso : espresso-core : 3.0.2 }

앱 탐색에 대한 시각적 개요보기

탐색 그래프를 만들려면

• 프로젝트의 "res"디렉토리를 Control- 클릭하고 "New> Android Resource Directory"를 선택하십시오.
• "자원 유형"드롭 다운을 열고 "탐색"을 선택하십시오.
• "확인"을 선택하십시오.
• 새“res / navigation”디렉토리를 Control- 클릭하고“New> Navigation resource file”을 선택하십시오.
• “리소스 유형”드롭 다운을 열고“탐색”을 선택하십시오.

• 이 파일 이름을 지정하십시오. “nav_graph”를 사용하고 있습니다.
• "확인"을 클릭하십시오.

“res / navigation / nav_graph”파일을 열면 탐색 편집기가 자동으로 시작됩니다. 레이아웃 편집기와 마찬가지로 탐색 편집기는 "디자인"및 "텍스트"탭으로 분할됩니다.

'텍스트'탭을 선택하면 다음 XML이 표시됩니다.

<? xml version = "1.0"encoding = "utf-8"?> // Navigation '은 모든 탐색 그래프의 루트 노드입니다 //

'디자인'탭은 앱의 내비게이션을 시각적으로 구축하고 편집 할 수있는 곳입니다.

왼쪽에서 오른쪽으로 탐색 편집기는 다음으로 구성됩니다.

• 목적지 목록 : 여기에는이 특정 내비게이션 그래프를 구성하는 모든 대상과 내비게이션 그래프가 호스팅되는 활동이 나열됩니다.
• 그래프 편집기 : 그래프 편집기는 모든 그래프 대상과 그 연결 작업에 대한 시각적 개요를 제공합니다.
• 속성 편집기 : 그래프 편집기에서 대상 또는 작업을 선택하면 "속성"패널에 현재 선택된 항목에 대한 정보가 표시됩니다.

탐색 그래프 채우기 : 대상 추가

내비게이션 그래프가 현재 비어 있습니다. 목적지를 추가하겠습니다.

이미 존재하는 활동 또는 단편을 추가 할 수 있지만 탐색 그래프를 사용하여 새 단편을 빠르고 쉽게 작성할 수 있습니다.

• "새 대상"버튼을 클릭하고 "빈 대상 만들기"를 선택하십시오.

• "Fragment Name"필드에 조각의 클래스 이름을 입력하십시오. “FirstFragment”를 사용하고 있습니다.
• "레이아웃 XML 만들기"확인란이 선택되어 있는지 확인하십시오.
• “Fragment Layout Name”필드를 완성하십시오. “fragment_first”를 사용하고 있습니다.
• "마침"을 클릭하십시오.

FirstFragment 서브 클래스 및 해당 "fragment_first.xml"레이아웃 리소스 파일이 프로젝트에 추가됩니다. FirstFragment도 탐색 그래프에 대상으로 나타납니다.

탐색 편집기에서 FirstFragment를 선택하면 "속성"패널에이 대상에 대한 정보 (예 : 클래스 이름 및 코드의 다른 곳에서이 대상을 참조하는 데 사용할 ID)가 표시됩니다.

헹구고 반복하여 프로젝트에 SecondFragment 및 ThirdFragment를 추가하십시오.

'텍스트'탭으로 전환하면 이러한 변경 사항을 반영하여 XML이 업데이트 된 것을 확인할 수 있습니다.

모든 내비게이션 그래프에는 사용자가 앱을 시작할 때 표시되는 시작 목적지가 있습니다. 위의 코드에서는 FirstFragment를 앱의 시작 위치로 사용하고 있습니다. '디자인'탭으로 전환하면 하우스 아이콘이 표시되며 FirstFragment도 그래프의 시작 목적지로 표시됩니다.

다른 시작점을 사용하려면 문제의 활동 또는 조각을 선택한 다음 "속성"패널에서 "시작 대상 설정"을 선택하십시오.

또는 코드 수준에서 다음과 같이 변경할 수 있습니다.

프래그먼트 레이아웃 업데이트

이제 목적지가 있습니다. 현재보고있는 조각을 항상 명확하게 알 수 있도록 몇 가지 사용자 인터페이스 요소를 추가하겠습니다.

각 조각에 다음을 추가하겠습니다.

• 조각의 제목이 포함 된 TextView
• 사용자가 한 조각에서 다음 조각으로 이동할 수있는 버튼

각 레이아웃 리소스 파일의 코드는 다음과 같습니다.

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

목적지를 행동으로 연결

다음 단계는 행동을 통해 목적지를 연결하는 것입니다.

간단한 드래그 앤 드롭을 사용하여 탐색 편집기에서 조치를 작성할 수 있습니다.

• 에디터의“디자인”탭이 선택되어 있는지 확인하십시오.
• 탐색하려는 목적지 오른쪽으로 마우스를 가져갑니다. ...에서이 경우에는 FirstFragment입니다. 원이 나타납니다.
• 탐색 할 목적지로 커서를 클릭하고 끕니다. 에SecondFragment입니다. 파란색 선이 나타납니다. SecondFragment가 파란색으로 강조 표시되면 커서를 놓아 대상간에 링크를 만듭니다.

FirstFragment와 SecondFragment를 연결하는 동작 화살표가 있습니다. 이 화살표를 클릭하여 선택하면 "속성"패널이 업데이트되어 시스템 할당 ID를 포함하여이 작업에 대한 일부 정보가 표시됩니다.

이 변경 사항은 탐색 그래프의 XML에도 반영됩니다.

… … …

헹구고 반복하여 SecondFragment를 ThirdFragment에 연결하는 동작과 ThirdFragment를 FirstFragment에 연결하는 동작을 만듭니다.

탐색 그래프 호스팅

탐색 그래프는 앱의 대상과 동작을 시각적으로 표현하지만 이러한 동작을 호출하려면 몇 가지 추가 코드가 필요합니다.

탐색 그래프를 만든 후에는 해당 활동의 레이아웃 파일에 NavHostFragment를 추가하여 탐색 그래프를 활동 내부에서 호스팅해야합니다. 이 NavHostFragment는 탐색이 발생할 수있는 컨테이너를 제공하며 사용자가 앱을 탐색 할 때 프래그먼트를 스왑 및 스왑해야합니다.

프로젝트의 "activity_main.xml"파일을 열고 NavHostFragment를 추가하십시오.

<? xml version = "1.0"encoding = "utf-8"?> // NavHostFragment // 역할을 할 조각을 만듭니다

위 코드에서 app : defaultNavHost =”true”를 사용하면 시스템의“뒤로”버튼을 누를 때마다 탐색 호스트가 인터셉트 할 수 있으므로 앱은 항상 탐색 그래프에 설명 된 탐색을 따릅니다.

NavController로 전환 트리거

다음으로 NavHostFragment 내에서 탐색 프로세스를 관리하는 새로운 구성 요소 인 NavController를 구현해야합니다.

새 화면으로 이동하려면 Navigation.findNavController를 사용하여 NavController를 검색하고 navigate () 메서드를 호출 한 다음 탐색 할 대상의 ID 또는 호출하려는 작업을 전달해야합니다. 예를 들어, 사용자를 FirstFragment에서 SecondFragment로 이동시키는“action_firstFragment_to_secondFragment”를 호출합니다.

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

사용자는 버튼을 클릭하여 새 화면으로 이동하므로 OnClickListener도 구현해야합니다.

이러한 변경을 한 후 FirstFragment는 다음과 같아야합니다.

android.os.Bundle 가져 오기; import android.support.annotation.NonNull; import android.support.annotation.Nullable; android.support.v4.app.Fragment 가져 오기; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import androidx.navigation.NavController; import androidx.navigation.Navigation; 공용 클래스 FirstFragment는 조각을 확장합니다. {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Public View 오버라이드 onCreateView (LayoutInflater 인플레이터, ViewGroup 컨테이너, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @void public void 재정의 onViewCreated (@NonNull보기, @Nullable 번들 저장 인스턴스 상태) {버튼 버튼 = (버튼) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@ public void onClick (View v) 재정의 {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment); }}); }}

다음으로 MainActivity를 열고 다음을 추가하십시오.

• NavigationView.OnNavigationItemSelectedListener : 탐색 항목에서 이벤트를 처리하기위한 리스너
• SecondFragment.OnFragmentInteractionListener : 탐색 편집기를 통해 SecondFragment를 만들 때 생성 된 인터페이스

MainActivity는 조각과 활동 사이의 통신을 허용하는 onFragmentInteraction () 메소드도 구현해야합니다.

import android.support.v7.app.AppCompatActivity; android.os.Bundle 가져 오기; android.net.Uri 가져 오기; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull; Public 클래스 MainActivity 확장 AppCompatActivity가 NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener를 구현 함 {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @ 공개 부울 재정의 onNavigationItemSelected (@NonNull MenuItem item) {return false; } @ public void onFragmentInteraction (Uri uri) 재정의 {}}

내비게이션 추가

나머지 앱 탐색을 구현하려면 onViewCreated 블록을 복사 / 붙여 넣기하고 수정하여 올바른 버튼 위젯과 탐색 동작을 참조해야합니다.

SecondFragment를 열고 다음을 추가하십시오.

@void public void onViewCreated (@NonNull 뷰보기, @Nullable 번들 저장 인스턴스 상태) 재정의 {버튼 버튼 = (버튼) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@ public void onClick (View v) 재정의 {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_secondFragment_to_thirdFragment); }}); }

그런 다음 ThirdFragment의 onViewCreated 블록을 업데이트하십시오.

@void public void onViewCreated (@NonNull 뷰보기, @Nullable 번들 저장 인스턴스 상태) 재정의 {버튼 버튼 = (버튼) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@ public void onClick (View v) 재정의 {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_thirdFragment_to_firstFragment); }}); }

마지막으로, ThirdFragment.OnFragmentInteractionListener 인터페이스를 MainActivity에 추가하는 것을 잊지 마십시오 :

공용 클래스 MainActivity 확장 AppCompatActivity는 NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener를 구현합니다. {

Android 기기 또는 Android 가상 기기 (AVD)에서이 프로젝트를 실행하고 탐색을 테스트하십시오. 다른 버튼을 클릭하여 세 조각 모두를 탐색 할 수 있어야합니다.

커스텀 전환 애니메이션 만들기

이 시점에서 사용자는 앱 주위를 이동할 수 있지만 각 조각 간의 전환은 매우 갑작 스럽습니다. 이 마지막 섹션에서는 Navigation 구성 요소를 사용하여 각 전환에 다른 애니메이션을 추가하여보다 매끄럽게 진행합니다.

사용하려는 모든 애니메이션은 "res / anim"디렉토리의 자체 애니메이션 리소스 파일에 정의되어 있어야합니다. 프로젝트에“res / anim”디렉토리가없는 경우 다음 디렉토리를 만들어야합니다.

• 프로젝트의“res”폴더를 Control- 클릭하고“New> Android Resource Directory”를 선택하십시오.
• 이 디렉토리에 "anim"이라는 이름을 지정하십시오.
• “리소스 유형”드롭 다운을 열고“애니메이션”을 선택하십시오.
• "확인"을 클릭하십시오.

페이드 아웃 애니메이션을 정의하여 시작해 보겠습니다.

• 프로젝트의 "res / anim"디렉토리를 Control- 클릭하십시오.
• "New> Animation resource file"을 선택하십시오.
• 이 파일 이름을 "fade_out"으로 지정하십시오.
• "fade_out"파일을 열고 다음을 추가하십시오.

위 단계를 반복하여“slide_out_left”라는 두 번째 애니메이션 리소스 파일을 만든 후 다음을 추가하십시오.

“slide_out_right”라는 세 번째 파일을 만들고 다음을 추가하십시오.

이제 탐색 편집기를 통해 이러한 애니메이션을 작업에 할당 할 수 있습니다.사용자가 FirstFragment에서 SecondFragment로 이동할 때마다 페이드 아웃 애니메이션을 재생하려면

• 탐색 그래프를 열고 "디자인"탭이 선택되어 있는지 확인하십시오.
• FirstFragment를 SecondFragment에 연결하는 동작을 클릭하여 선택합니다.
• "속성"패널에서 "전환"섹션을 클릭하여 확장합니다. 기본적으로이 섹션의 모든 드롭 다운은 "없음"으로 설정되어 있어야합니다.
• “Enter”드롭 다운을 열어 SecondFragment가 백 스택의 맨 위로 전환 될 때마다 재생되는 애니메이션을 제어합니다. "fade_out"애니메이션을 선택하십시오.

"디자인"탭으로 전환하면이 애니메이션이 "action_firstFragment_to_secondFragment"에 추가 된 것을 볼 수 있습니다.

Android 장치 또는 AVD에서 업데이트 된 프로젝트를 실행하십시오. FirstFragment에서 SecondFragment로 이동할 때마다 페이드 아웃 효과가 나타납니다.

"속성"패널을 다시 살펴보면 "입력"이 애니메이션을 적용 할 수있는 전환의 유일한 부분이 아님을 알 수 있습니다. 다음 중에서 선택할 수도 있습니다.

• 출구: 프래그먼트가 스택을 떠날 때 재생되는 애니메이션
• 팝 엔터 : 프래그먼트가 스택의 상단을 채울 때 재생되는 애니메이션
• 팝 이탈 : 조각이 스택의 맨 아래로 전환 될 때 재생되는 애니메이션

전환의 다른 부분에 다른 애니메이션을 적용하여 실험 해보십시오. 완성 된 프로젝트를 GitHub에서 다운로드 할 수도 있습니다.

마무리

이 기사에서는 Navigation Architecture 컴포넌트를 사용하여 사용자 정의 전환 애니메이션이 포함 된 단일 활동, 다중 단편 애플리케이션을 작성하는 방법을 살펴 보았다. Navigation 구성 요소를 사용하여 프로젝트를 이러한 종류의 응용 프로그램 구조로 마이그레이션 했습니까? 아래 의견에 알려주십시오!