Gezinme bileşeni, uygulamanızın özelliklerini yönetmek için bir gezinme grafiği kullanır. yardımcı olabilir. Gezinme grafiği her bir Sprint’i içeren bir veri yapısıdır ve bunlar arasındaki bağlantılara göre değerlendireceksiniz.
Hedef türleri
Üç genel hedef türü vardır: barındırılan, iletişim kutusu ve etkinlik. İlgili içeriği oluşturmak için kullanılan Aşağıdaki tabloda bu üç hedef türü ve amaçları özetlenmektedir.
Tür |
Açıklama |
Kullanım örnekleri |
---|---|---|
Barındırılan |
Gezinme ana makinesinin tamamını doldurur. Yani barındırılan bir hedefin boyutu, gezinme ana makinesinin boyutuyla aynıdır ve önceki hedefler görünmez. |
Ana ekran ve ayrıntı ekranları. |
Dialog |
Yer paylaşımı kullanıcı arayüzü bileşenlerini sunar. Bu kullanıcı arayüzü, gezinme ana makinesinin konumuna veya boyutuna bağlı değildir. Önceki hedefler hedefin altında görünür. |
Uyarılar, seçimler, formlar. |
Etkinlik |
Uygulamadaki benzersiz ekranları veya özellikleri temsil eder. |
Gezinme bileşeninden ayrı olarak yönetilen yeni bir Android etkinliği başlatan gezinme grafiğine çıkış noktası görevi verir. Modern Android geliştirmede uygulama tek bir etkinlikten oluşur. Bu nedenle, etkinlik hedeflerinin en iyi şekilde kullanılması, üçüncü taraf etkinlikleriyle etkileşim kurduğunuzda veya taşıma sürecinin bir parçası olarak gerçekleştirilir. |
Bu doküman, barındırdığınız dilin en yaygın temel hedefleri belirlemenize yardımcı olur. Bilgi edinmek için aşağıdaki kılavuzlara bakabilirsiniz: diğer hedefler:
Çerçeveler
Her durum için aynı genel iş akışı geçerli olsa da, projeyi tam olarak nasıl gezinme ana makinesi ve grafiği, kullandığınız kullanıcı arayüzü çerçevesine bağlıdır.
- Oluştur:
NavHost
composable'ı kullanın. Şunu kullanarak birNavGraph
ekleyin: Kotlin DSL. Grafiği iki şekilde oluşturabilirsiniz:- NavHost'un bir parçası olarak: Gezinme grafiğini doğrudan
NavHost
ekleme işleminin bir parçasıdır. - Programatik olarak:
NavController.createGraph()
yöntemini kullanın birNavGraph
oluşturun ve bunu doğrudanNavHost
öğesine aktarın.
- NavHost'un bir parçası olarak: Gezinme grafiğini doğrudan
- Parçalar: Görünümler kullanıcı arayüzü çerçevesiyle parçaları kullanırken
NavHostFragment
, düzenleyen kullanıcı olarak. Gezinme oluşturmanın birkaç yolu vardır grafik:- Programatik olarak: Kotlin DSL'yi kullanarak
NavGraph
veNavHostFragment
üzerinde doğrudan uygulayabilirsiniz.- Her ikisi için Kotlin DSL ile kullanılan
createGraph()
işlevi parçaları ile Oluşturma aynıdır.
- Her ikisi için Kotlin DSL ile kullanılan
- XML: Gezinme ana makinenizi ve grafiğinizi doğrudan XML'e yazın.
- Android Studio düzenleyicisi: Android Studio'daki GUI düzenleyicisini kullanarak grafiğinizi XML kaynak dosyası olarak oluşturun ve ayarlayın.
- Programatik olarak: Kotlin DSL'yi kullanarak
Oluştur
Compose'da yönlendirme tanımlamak için seri hale getirilebilir bir nesne veya sınıf kullanın. Bir rota
bir hedefe nasıl ulaşılacağını açıklar ve
gösterir. Rotalarınızı tanımladıktan sonra NavHost
kullanın.
composable'ı kullanarak gezinme grafiğinizi oluşturun. Aşağıdaki örneği inceleyin:
@Serializable
object Profile
@Serializable
object FriendsList
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Profile) {
composable<Profile> { ProfileScreen( /* ... */ ) }
composable<FriendsList> { FriendsListScreen( /* ... */ ) }
// Add more destinations similarly.
}
- Serileştirilebilir nesne, iki rotanın her birini temsil eder:
Profile
veFriendsList
. NavHost
composable'a yapılan çağrı, birNavController
ve bir rota geçer başlangıç hedefi için.- Lambda nihai olarak
NavHost
çağrısına iletildiNavController.createGraph()
veNavGraph
döndürür. - Her rota,
NavGraphBuilder.composable<T>()
ise hedefi sonuçtaNavGraph
. composable
öğesine iletilen lambda,NavHost
tarafından bunun için gösterilir seçeceğiz.
Lambda'yı anlama
NavGraph
öğesini oluşturan lambda'yı daha iyi anlamak için şunu göz önünde bulundurun:
snippet'tekiyle aynı grafiği oluşturmak yerine,
NavGraph
NavController.createGraph()
kullanarak ayrı ayrı oluşturup
NavHost
doğrudan:
val navGraph by remember(navController) {
navController.createGraph(startDestination = Profile)) {
composable<Profile> { ProfileScreen( /* ... */ ) }
composable<FriendsList> { FriendsListScreen( /* ... */ ) }
}
}
NavHost(navController, navGraph)
Bağımsız değişkenleri iletme
Verileri bir hedefe aktarmanız gerekiyorsa rotayı
parametresidir. Örneğin, Profile
rotası, name
içeren bir veri sınıfıdır.
parametresinden sonra bir değer girin.
@Serializable
data class Profile(val name: String)
Bu hedefe bağımsız değişkenler aktarmanız gerektiğinde bir örnek oluşturursunuz bağımsız değişkenleri sınıf oluşturucuya ileterek.
İsteğe bağlı bağımsız değişkenler için varsayılan değere sahip boş değer atanabilir alanlar oluşturun.
@Serializable
data class Profile(val nickname: String? = null)
Rota örneği alma
Rota örneğini NavBackStackEntry.toRoute()
veya
SavedStateHandle.toRoute()
. Şunu kullanarak bir hedef oluşturduğunuzda:
composable()
, NavBackStackEntry
parametre olarak kullanılabilir.
@Serializable
data class Profile(val name: String)
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
composable<Profile> { backStackEntry ->
val profile: Profile = backStackEntry.toRoute()
ProfileScreen(name = profile.name) }
}
Bu snippet'te aşağıdakilere dikkat edin:
Profile
rotası, navigasyondaki başlangıç hedefini belirtirname
için bağımsız değişken olarak"John Smith"
içeren grafik.- Hedefin kendisi
composable<Profile>{}
bloku. ProfileScreen
composable,profile.name
değerini kendi başına alırname
bağımsız değişkeni.- Dolayısıyla,
"John Smith"
değeriProfileScreen
öğesine iletilir.
Minimum örnek
NavController
ve NavHost
öğelerinin birlikte çalışmasına ilişkin tam bir örnek:
@Serializable
data class Profile(val name: String)
@Serializable
object FriendsList
// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
profile: Profile
onNavigateToFriendsList: () -> Unit,
) {
Text("Profile for ${profile.name}")
Button(onClick = { onNavigateToFriendsList() }) {
Text("Go to Friends List")
}
}
// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
Text("Friends List")
Button(onClick = { onNavigateToProfile() }) {
Text("Go to Profile")
}
}
// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
val navController = rememberNavController()
NavHost(navController, startDestination = Profile(name = "John Smith")) {
composable<Profile> { backStackEntry ->
val profile: Profile = backStackEntry.toRoute()
ProfileScreen(
profile = profile,
onNavigateToFriendsList = {
navController.navigate(route = FriendsList)
}
)
}
composable<FriendsList> {
FriendsListScreen(
onNavigateToProfile = {
navController.navigate(
route = Profile(name = "Aisha Devi")
)
}
)
}
}
}
Snippet'te gösterildiği gibi, NavController
öğesini
composable'lar için bir etkinlik NavHost
'a gösterilir. Yani composable’larınız
NavHost
öğesinin bir lambda ilettiği () -> Unit
türünde bir parametreye sahiptir
NavController.navigate()
.
Parçalar
Önceki bölümlerde belirtildiği gibi, parçaları kullanırken kullanarak programlı bir gezinme grafiği oluşturmak için Kotlin DSL, XML veya Android Studio düzenleyicisi.
Aşağıdaki bölümlerde bu farklı yaklaşımlar ayrıntılı olarak açıklanmaktadır.
Programatik olarak
Kotlin DSL, programlı bir gezinme grafiği oluşturmak için parçalar. Birçok bakımdan, XML kullanmaya kıyasla daha düzenli ve moderndir. kaynak dosya.
İki ekranlı gezinme grafiğinin uygulandığı aşağıdaki örneği düşünün.
İlk olarak, NavHostFragment
oluşturmanız gerekir. Bu öğe, şunları içermemelidir:
app:navGraph
öğesi:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Sonra NavHostFragment
id
ayarını şuraya geçirin:
NavController.findNavController
. Bu, NavController'ı
NavHostFragment
.
Ardından, NavController.createGraph()
çağrısı, grafiği
NavController
ve dolayısıyla NavHostFragment
şunları da ekler:
@Serializable
data class Profile(val name: String)
@Serializable
object FriendsList
// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)
// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
startDestination = Profile(name = "John Smith")
) {
// Associate each destination with one of the route constants.
fragment<ProfileFragment, Profile> {
label = "Profile"
}
fragment<FriendsListFragment, FriendsList>() {
label = "Friends List"
}
// Add other fragment destinations similarly.
}
DSL'nin bu şekilde kullanılması,
Oluştur'un önceki bölümüne gidin. Örneğin, hem burada hem de
NavController.createGraph()
işlevi, NavGraph
oluşturur. Aynı şekilde
NavGraphBuilder.composable()
, grafiğe derlenebilir hedefler ekler
NavGraphBuilder.fragment()
, parça hedefi ekler.
Kotlin DSL'nin nasıl kullanılacağı hakkında daha fazla bilgi için NavGraphBuilder DSL'yi seçin.
XML
XML dosyasını doğrudan kendiniz yazabilirsiniz. Aşağıdaki örnek projeyi yansıtır ve iki ekran örneğine eşdeğerdir.
İlk olarak bir NavHostFragment
oluşturun. Bu işlem, gezinme ana makinesi olarak
gerçek gezinme grafiğini içerir.
Minimum bir NavHostFragment
kullanımı:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="@navigation/nav_graph" />
</FrameLayout>
NavHostFragment
, app:navGraph
özelliğini içeriyor. Bu özelliği kullan
gezinme grafiğinizi gezinme ana makinesine bağlamak için. Bu,
Grafiği nasıl uygulayabileceğinize ilişkin bir örnek:
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph"
app:startDestination="@id/profile">
<fragment
android:id="@+id/profile"
android:name="com.example.ProfileFragment"
android:label="Profile">
<!-- Action to navigate from Profile to Friends List. -->
<action
android:id="@+id/action_profile_to_friendslist"
app:destination="@id/friendslist" />
</fragment>
<fragment
android:id="@+id/friendslist"
android:name="com.example.FriendsListFragment"
android:label="Friends List" />
<!-- Add other fragment destinations similarly. -->
</navigation>
Farklı hedefler arasındaki bağlantıları tanımlamak için işlemler kullanırsınız. İçinde
Bu örnekte, profile
parçası
friendslist
. Daha fazla bilgi için Gezinme işlemlerini kullanma ve
parçalarını kullanın.
Düzenleyici
Uygulamanızın gezinme grafiğini,
Android Studio'ya gidin. Bu temelde, verilerinizi oluşturmak ve düzenlemek için kullanabileceğiniz
NavigationFragment
XML, önceki bölümde gösterildiği gibi).
Daha fazla bilgi için Gezinme düzenleyici konusuna bakın.
İç içe yerleştirilmiş grafikler
İç içe yerleştirilmiş grafikleri de kullanabilirsiniz. Bu, bir grafiği gezinme olarak kullanmayı içerir seçeceğiz. Daha fazla bilgi için İç içe yerleştirilmiş grafikler konusuna bakın.
Diğer Okumalar
Daha temel gezinme kavramları için aşağıdaki kılavuzlara bakın:
- Genel bakış: Navigasyon uygulamasının genel bakışını okuduğunuzdan emin olun bir bileşenidir.
- Etkinlik hedefleri: Hedeflerin nasıl uygulanacağına ilişkin örnekler yönlendiren reklamlar da vardır.
- Diyalog hedefleri: Hedeflerinize ulaşmanıza yardımcı olacak hedefler kullanıcıyı bir iletişim kutusuna götürebilir.
- Bir hedefe gitme: Nasıl yapıldığını açıklayan ayrıntılı bir kılavuz bir hedeften diğerine gitmektir.
- İç içe yerleştirilmiş grafikler: Gezinme çubuğunda nasıl iç içe yerleştirileceğine dair ayrıntılı kılavuz bir arada kullanabilirsiniz.