İçerik
- Gezinme Mimarisi Bileşeni Nedir?
- Gezinti Düzenleyiciyi Android Studio'ya Ekleme
- Proje bağımlılıkları: Gezinme Parçası ve Gezinme Arayüzü
- Uygulamanızın navigasyonuyla ilgili görsel bir genel bakış alın
- Gezinti Grafiğini Doldurma: Hedef ekleme
- Parça düzenlerinizi güncelleme
- Fragment_first.xml
- Fragment_second.xml
- Fragment_third.xml
- Hedeflerinizi eylemlerle bağlama
- Gezinti Grafiğini Barındırma
- NavController ile geçişleri tetikleme
- Daha fazla gezinme ekleme
- Özel geçiş animasyonları oluşturma
- Sarma
2018’nin G / Ç konferansı sırasında Google, Android uygulamaları geliştirmek için yeni bir yaklaşım ilan etti.
Google’ın resmi önerisi, uygulamanızın ana giriş noktası işlevi gören tek bir Etkinlik oluşturmak ve ardından uygulamanızın içeriğinin geri kalanını fragmanlar olarak sunmaktır.
Tüm bu farklı parça işlemlerini ve yaşam döngülerini hokkabazlık düşüncesi bir kabus gibi görünse de, G / Ç 2018’de Google, bu tür tek bir Faaliyet yapısını benimsemenize yardımcı olmak için tasarlanmış Gezinme Mimarisi Bileşenini de başlattı.
Bu makalede, Navigasyon bileşenini projenize nasıl ekleyebileceğinizi ve Android Studio’nun yeni Navigasyon Düzenleyicisi’nden biraz yardımı ile tek bir Faaliyetli, çok parçalı bir uygulamayı hızlı ve kolay bir şekilde oluşturmak için nasıl kullanabileceğinizi göstereceğiz. Parçalarınızı oluşturup bağladıktan sonra, bir dizi tamamen özelleştirilebilir geçiş animasyonu oluşturmak için Gezinme bileşenini ve Düzenleyiciyi kullanarak Android'in standart parça geçişlerini geliştireceğiz.
Gezinme Mimarisi Bileşeni Nedir?
Android JetPack'in bir parçası olan Gezinme Mimarisi Bileşeni, uygulamanızdaki farklı rotaları görselleştirmenize yardımcı olur ve özellikle parça işlemlerini yönetme söz konusu olduğunda bu rotaları uygulama işlemini basitleştirir.
Navigasyon bileşenini kullanmak için, uygulamanızın Faaliyetlerinin ve parçalarının birbirleriyle nasıl ilişkili olduğunu açıklayan bir XML dosyası olan Navigasyon Grafiği oluşturmanız gerekir.
Bir Gezinme Grafiği şunlardan oluşur:
- Gidilecek: Kullanıcının gidebileceği bireysel ekranlar
- Eylemler: Kullanıcının, uygulamanızın hedefleri arasında alabileceği rotalar
Android Studio’nun Navigasyon Düzenleyici’de projenizin Navigasyon Grafiğinin görsel temsilini görüntüleyebilirsiniz. Aşağıda, Gezinti Düzenleyicisi'nde göründüğü gibi üç hedef ve üç eylemden oluşan bir Gezinme Grafiği bulacaksınız.
Navigasyon bileşeni, Google’ın önerilen yeni bir uygulama yapısını uygulamanıza yardımcı olmak için tasarlanmıştır; burada tek bir Faaliyetin Navigasyon Grafiğini "barındırdığı" ve tüm hedeflerinizin bir parçası olarak uygulanır. Bu makalede, bu önerilen yaklaşımı takip edeceğiz ve bir MainActivity ve üç bölüm hedefinden oluşan bir uygulama oluşturacağız.
Ancak, Navigasyon bileşeni sadece bu önerilen yapıya sahip uygulamalar için değildir. Bir projede birden fazla Navigasyon Grafiği olabilir ve parçaları ve Aktiviteleri bu Navigasyon Grafikleri içindeki hedefler olarak kullanabilirsiniz. Büyük ve olgun bir projeyi Navigasyon bileşenine geçiriyorsanız, uygulamanızın gezinme akışlarını, her grubun bir “ana” Etkinlikten, ilgili bazı parçalardan ve kendi Gezinme Grafiğinden oluştuğu gruplara ayırmayı daha kolay bulabilirsiniz.
Gezinti Düzenleyiciyi Android Studio'ya Ekleme
Navigasyon bileşeninden en iyi şekilde yararlanmanıza yardımcı olmak için Android Studio 3.2 Canary ve daha yeni bir navigasyon editörü bulunmaktadır.
Bu düzenleyiciyi etkinleştirmek için:
- Android Studio menü çubuğundan “Android Studio> Tercihler…” seçeneğini seçin.
- Soldaki menüden “Deneysel” i seçin.
- Henüz seçili değilse, “Gezinti Düzenleyicisini Etkinleştir” onay kutusunu işaretleyin.
- “Tamam” ı tıklayın.
- Android Studio'yu yeniden başlatın.
Proje bağımlılıkları: Gezinme Parçası ve Gezinme Arayüzü
İstediğiniz ayarlarla yeni bir proje oluşturun, daha sonra build.gradle dosyasını açın ve proje bağımlılıkları olarak gezinti parçası ve gezinme kullanıcı adını ekleyin:
bağımlılıklar {application fileTree (dir: libs, include:) uygulama com.android.support:appcompat-v7:28.0.0 uygulama com.android.support.constraint: constraint-layout: 1.1.3 // Aşağıdakileri ekleyin // uygulama "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI, bazı yardımcı işlevlere // uygulama sağlar "android.arch.navigation: navigation-ui: 1.0.0-alpha05" application com .android.support: support-v4: 28.0.0 testUygulama junit: junit: 4.12 androidTestUygulama com.android.support.test: koşucu: 1.0.2 androidTestUygulama com.android.support.test.espresso: espresso-çekirdek: 3.0.2 }
Uygulamanızın navigasyonuyla ilgili görsel bir genel bakış alın
Gezinti Grafiği oluşturmak için:
- Projenizin "res" dizinini Control tuşunu basılı tutarak tıklayın ve "Yeni> Android Kaynak Dizini" ni seçin.
- “Kaynak türü” açılır penceresini açın ve “gezinme” seçeneğini seçin.
- “Tamam” ı seçin.
- Yeni “res / navigation” dizininizi kontrol tuşunu tıklayın ve “Yeni> Navigasyon kaynak dosyası” nı seçin.
- “Kaynak türü” açılır penceresini açın ve “Gezinme” seçeneğini seçin.
- Bu dosya adını verin; “Nav_graph” kullanıyorum.
- “Tamam” ı tıklayın.
“Res / navigation / nav_graph” dosyanızı açın, Navigasyon Düzenleyici otomatik olarak başlayacaktır. Mizanpaj düzenleyicisine benzer şekilde, Gezinti Düzenleyicisi “Tasarım” ve “Metin” sekmelerine ayrılmıştır.
“Metin” sekmesini seçerseniz, aşağıdaki XML’yi göreceksiniz:
<? xml version = "1.0" encoding = "utf-8"?> // Navigasyon ’her gezinme grafiğinin kök düğümüdür //
“Tasarım” sekmesi, uygulamanızın navigasyonunu görsel olarak oluşturabileceğiniz ve düzenleyebileceğiniz yerdir.
Soldan sağa, Navigasyon Düzenleyici şunlardan oluşur:
- Bir Hedef listesi: Bu, bu özel Navigasyon Grafiğini oluşturan tüm hedefleri ve Navigasyon Grafiğinin bulunduğu etkinliği listeler.
- Grafik Düzenleyici: Grafik Düzenleyici, tüm grafiğin hedeflerine ve bunları birleştiren işlemlere görsel bir genel bakış sağlar.
- Nitelikler Düzenleyicisi: Grafik Düzenleyicide bir hedef veya eylem seçerseniz, “Öznitelikler” paneli o an seçili olan öğeyle ilgili bilgileri görüntüler.
Gezinti Grafiğini Doldurma: Hedef ekleme
Navigasyon Grafiğimiz şu anda boş. Bazı hedefleri ekleyelim.
Zaten var olan Etkinlikler veya bölümleri ekleyebilirsiniz, ancak yeni parçaları hızla ve kolayca oluşturmak için Gezinme Grafiğini de kullanabilirsiniz:
- “Yeni Hedef” düğmesine bir kez tıklayın ve “Boş hedef oluştur” seçeneğini seçin.
- “Parça Adı” alanına, parçanızın sınıf adını girin; “FirstFragment” kullanıyorum.
- “Mizanpaj XML oluştur” onay kutusunun seçili olduğundan emin olun.
- “Fragment Layout Name” alanını doldurun; “Fragment_first” kullanıyorum.
- “Son” düğmesini tıklayın.
Bir FirstFragment alt sınıfı ve buna karşılık gelen “fragment_first.xml” düzen kaynak dosyası şimdi projenize eklenecek. FirstFragment, Gezinme Grafiğinde de bir hedef olarak görünecektir.
Gezinti Düzenleyicisi'nde FirstFragment'i seçerseniz, “Öznitelikler” paneli, bu hedefle ilgili bazı bilgileri (sınıf adı ve bu hedefe kodunuzda başka bir yerde başvurmak için kullanacağınız kimlik gibi) görüntüler.
Projenize bir SecondFragment ve ThirdFragment eklemek için durulayın ve tekrarlayın.
“Metin” sekmesine geçin; XML'in bu değişiklikleri yansıtacak şekilde güncellendiğini göreceksiniz.
Her Gezinme Grafiği, kullanıcı uygulamanızı başlattığında görüntülenen ekran olan bir başlangıç hedefine sahiptir. Yukarıdaki kodda, uygulamanın başlangıç hedefi olarak FirstFragment'i kullanıyoruz. “Tasarım” sekmesine geçerseniz, FirstFragment'i grafiğin başlangıç hedefi olarak işaretleyen bir ev simgesi göreceksiniz.
Farklı bir başlangıç noktası kullanmayı tercih ediyorsanız, söz konusu Etkinlik veya bölümü seçin ve ardından “Öznitelikler” panelinden “Başlangıç Hedefini Ayarla” yı seçin.
Alternatif olarak, bu değişikliği kod düzeyinde yapabilirsiniz:
Şimdi hedeflerimiz var, şu anda hangi parçayı görüntülediğimizi her zaman netleştirmek için bazı kullanıcı arabirimi öğelerini ekleyelim. Her bölüme aşağıdakileri ekleyeceğim: Her mizanpaj kaynak dosyasının kodu aşağıdadır: Bir sonraki adım, hedeflerimizi eylemlerle bağlamak. Basit sürükle ve bırak özelliğini kullanarak Gezinti Düzenleyici'de bir eylem oluşturabilirsiniz:Parça düzenlerinizi güncelleme
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Hedeflerinizi eylemlerle bağlama
Şimdi FirstFragment'i SecondFragment ile ilişkilendiren bir eylem oku olmalı. Bu oku seçmek için tıklayın; “Öznitelik” paneli, sistem tarafından atanan kimliği de dahil olmak üzere bu eylemle ilgili bazı bilgileri görüntülemek için güncellenecektir.
Bu değişiklik aynı zamanda Navigasyon Grafiğinin XML'sine de yansır:
SecondFragment'i ThirdFragment'e bağlayan bir eylem ve ThirdFragment'i FirstFragment'e bağlayan bir eylem oluşturmak için durulayın ve tekrarlayın. Gezinme Grafiği, uygulamanızın hedeflerini ve eylemlerini görsel olarak gösterir, ancak bu işlemleri başlatmak için bazı ek kodlar gerekir. Bir Navigasyon Grafiği oluşturduktan sonra, o Aktivitenin düzen dosyasına bir NavHostFragment ekleyerek bir Aktivite içinde barındırmanız gerekir. Bu NavHostFragment, navigasyonun gerçekleşebileceği bir kapsayıcı sağlar ve kullanıcı uygulamanızda gezinirken parçaları içeri ve dışarı kaydırmaktan da sorumlu olacaktır. Projenizin “activity_main.xml” dosyasını açın ve bir NavHostFragment ekleyin. <? xml version = "1.0" encoding = "utf-8"?> // NavHostFragment // olarak işlev görecek bir parça oluşturun // Yukarıdaki kodda, app: defaultNavHost = "true", sistemin “Geri” düğmesine her basıldığında Navigasyon Ana Bilgisayarının araya girmesini sağlar, böylece uygulama Navigasyon Grafiğinizde açıklanan navigasyonu her zaman onurlandırır. Daha sonra, bir NavHostFragment içerisinde gezinme sürecini yönetmekten sorumlu olan yeni bir bileşen olan bir NavController uygulamamız gerekiyor. Yeni bir ekrana gitmek için, Navigation.findNavController'ı kullanarak bir NavController almanız, navigate () yöntemini çağırmanız ve ardından gitmek istediğiniz hedefin kimliğini veya çağırmak istediğiniz eylemi iletmeniz gerekir. Örneğin, kullanıcıyı FirstFragment'ten SecondFragment'e taşıyacak olan “action_firstFragment_to_secondFragment” i çağırıyorum: NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment); Kullanıcı bir düğmeye tıklayarak yeni bir ekrana geçecektir, bu yüzden bir OnClickListener da uygulamamız gerekiyor. Bu değişiklikleri yaptıktan sonra, FirstFragment şöyle görünmelidir: android.os.Bundle alma; android.support.annotation.NonNull dosyasını içe aktarın; android.support.annotation.Nullable dosyasını içe aktarın; android.support.v4.app.Fragment dosyasını içe aktarın; android.view.LayoutInflater alma; android.view.View içeri aktar; android.view.ViewGroup içeri aktar; android.widget.Button öğesini içe aktarın; androidx.navigation.NavController dosyasını içe aktarın; androidx.navigation.Navigation öğesini içe aktarın; genel sınıf FirstFragment, {public FirstFragment () {} @Override genel void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Genel Görünümü genel görüntüle onCreateView (LayoutInflater inflater, ViewGroup kabı, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View görünümü, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Genel geçersiz kılma onClick (Görünüm v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); }} Ardından, MainActivity'nizi açın ve aşağıdakileri ekleyin: MainActivity'nin ayrıca, parça ile Etkinlik arasındaki iletişime izin veren onFragmentInteraction () yöntemini uygulaması gerekir. android.support.v7.app.AppCompatActivity içeri aktarma; android.os.Bundle alma; android.net.Uri'yi içe aktarın; android.view.MenuItem alma; android.support.design.widget.NavigationView ürününü içe aktarın; android.support.annotation.NonNull dosyasını içe aktarın; genel sınıf MainActivity, AppCompatActivity öğesini genişletir NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override korumalı geçersiz onCreate (BundI savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem maddesi) {return false; } @Override public void onFragmentInteraction (Uri uri) {}} Uygulamamızın navigasyonunun geri kalan kısmını uygulamak için, onViewCreated bloğunu kopyalayıp yapıştırmamız ve doğru düğme widget'lerine ve navigasyon işlemlerine referans vermemiz için birkaç ayar yapmamız yeterlidir. SecondFragment'inizi açın ve aşağıdakileri ekleyin: @ Genel geçersiz boşluğu onViewCreated (@ Boş Görünüm görünümü, @ Boş Düzenlenebilir Paket KaydıInstanceState) {Düğme düğmesi = (Düğme) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@Genel geçersiz kılma onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); } Ardından, ThirdFragment’in ViewCreated bloğunu güncelleyin: @ Genel geçersiz boşluğu görüntüle onCreated (@ Boş Görünüm görünümü, @ Boş Yuvarlanacak Paket kaydedildiInstanceState) {Düğme düğmesi = (Düğme) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Genel geçersiz kılma onClick (Görünüm v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); } Son olarak, ThirdFragment.OnFragmentInteractionListener arayüzünü MainActivity'nize eklemeyi unutmayın: genel sınıf MainActivity, AppCompatActivity öğesini genişletir NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener { Bu projeyi Android cihazınızda veya Android Sanal Cihazınızda (AVD) çalıştırın ve navigasyonu test edin. Farklı düğmelere tıklayarak her üç parça arasında da gezinebilmelisiniz. Bu noktada, kullanıcı uygulamanızın etrafında hareket edebilir, ancak her bölüm arasındaki geçiş oldukça ani olur. Bu son bölümde, her bir geçişe farklı bir animasyon eklemek için Gezinme bileşenini kullanacağız, böylece daha sorunsuz olurlar. Kullanmak istediğiniz her animasyon, bir “res / anim” dizini içinde, kendi animasyon kaynak dosyasında tanımlanmalıdır. Projeniz zaten bir "res / anim" dizini içermiyorsa, bir tane oluşturmanız gerekir: Fade-out bir animasyon tanımlayarak başlayalım: “Slide_out_left” adlı ikinci bir animasyon kaynak dosyası oluşturmak için yukarıdaki adımları tekrarlayın, ardından şunları ekleyin: “Slide_out_right” adlı üçüncü bir dosya oluşturun ve aşağıdakileri ekleyin: Artık bu animasyonları Navigasyon Düzenleyici üzerinden eylemlerinize atayabilirsiniz.Kullanıcı FirstFragment'ten SecondFragment'e her bir gezinti yaparken solma animasyonu oynatmak için: Gezinti Grafiğini Barındırma
NavController ile geçişleri tetikleme
Daha fazla gezinme ekleme
Özel geçiş animasyonları oluşturma
“Tasarım” sekmesine geçerseniz, bu animasyonun “action_firstFragment_to_secondFragment” e eklendiğini göreceksiniz.
Güncellenen projeyi Android cihazınızda veya AVD'de çalıştırın. Artık FirstFragment'ten SecondFragment'e geçtiğinizde solma etkisiyle karşılaşmalısınız. “Nitelikler” paneline bir kez daha bakarsanız, “Giriş” in bir animasyon uygulayabileceğiniz geçişin tek parçası olmadığını göreceksiniz. Ayrıca aşağıdakiler arasından seçim yapabilirsiniz: Geçişlerinizin farklı bölümlerine farklı animasyonlar uygulayarak deneme yapmayı deneyin. Tamamlanan projeyi GitHub'dan da indirebilirsiniz. Bu yazıda, özel geçiş animasyonlarıyla tamamlanan tek bir Aktiviteli, çok parçalı bir uygulama oluşturmak için Gezinti Mimarisi bileşenini nasıl kullanabileceğinizi inceledik. Navigation bileşeni sizi projelerinizi bu tür bir uygulama yapısına geçirmeye ikna etti mi? Aşağıdaki yorumlarda bize bildirin!Sarma
