Navigointikomponentti, Suunnittelukuvion suunnittelu

(9.9.2020)

Tässä blogissa haluaisin tuoda teille sisäkkäisen kaavion ja keskustelun tietojen siirtämisestä kahden kohteen välillä.

Sisäkkäinen navigointikaavio

Navigointikaaviota voidaan käyttää ryhmittelemään joukko kohteita yhdessä ja käyttämään niitä uudelleen. Esimerkiksi käytät näkymää, jota voidaan käyttää sovelluksen useissa paikoissa. Joten luot erillisen asettelutiedoston ja sisällytät sen vain minne haluat käyttää sitä uudelleen. Sama pätee nav-graafiin. Yhteinen kulku voidaan sisällyttää useisiin paikkoihin erottamalla se diff XML-tiedostoon.

Selitys esimerkillä: Mukautettu ateria

Healthify-sovelluksen mukautetun aterian ominaisuus auttaisi käyttäjää luomaan ateriayhdistelmiä. Jos käyttäjä pitää hedelmistä ja paahtoleivistä aamiaisella, hänen ei tarvitse lisätä molempia joka päivä. Hän voisi luoda näistä kahdesta tuotteesta yhdistelmäaterian ja tarkistaa kyseisen yhdistelmän. Tämä on valtava plus säästää aikaa.

Mukautettu ateriavirta @ (silmukka)

Yllä on Mukautettu ateriavirta; Käyttäjä voi nimetä ateriansa ja lisätä ateriansa kohteet yhdistelmän luomiseksi. Jos yksinkertaista ruokalajia ei ole saatavilla, hän voi lisätä ainesosat.

Lisää-painike vie käyttäjän hakunäyttöön ja etsitty ruoka voidaan lisätä luetteloon ja lopuksi tallentaa se napsauttamalla Tallenna-painikkeella, ja käyttäjä näkee onnistumisnäytön, ja sitten siirrymme takaisin näyttöön, josta tämä vuokausi alkoi.

Luodaan navigointikaavio Luo yhdistelmävuoka.



xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/create\_meal\_graph"
app:startDestination="@id/createMealFragment">
android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" >
android:id="@+id/action\_createMealFragment\_to\_save"
app:destination="@id/processMealFragment" /> android:id="@+id/action\_createMealFragment\_to\_add"
app:destination="@id/searchFoodFragment" />
android:id="@+id/searchFoodFragment"
android:name="com.example.healthify.SearchFoodFragment"
android:label="search\_food"
tools:layout="@layout/fragment\_search\_food"/>

android:id="@+id/processMealFragment"
android:name="com.example.healthify.ProcessMealFragment"
android:label="done"
tools:layout="@layout/fragment\_process\_meal"/>

Joten tässä meillä on CreateMealFragment, jossa on 2 toimintoa:

  1. action\_createMealFragment\_to\_save -> kun käyttäjä napsauttaa Tallenna-painiketta syötettyään aterian nimen ja ainesosat, hän siirtyy kohtaan ProcessMealFragment Joten kyseisen toiminnon kohde on processMealFragment.
  2. action\_createMealFragment\_to\_add -> Kun käyttäjä napsauttaa plus-kuvaketta lisätäksesi lisää ainesosia yhdistelmään, siirrymme hakunäyttöön, jossa voit etsi ruokaa ja lisää se, joten tämän toiminnon kohde on searchFoodFragment.

Tässä virrassa on 3 erilaista koukkua.

Luo ateriakoukut

Käyttäjä voi osallistua tähän kulkuun napsauttamalla Luo COMBO-painiketta aterianseuranta-näytössä (kuva 1) tai Luo COMBO-painike ateriayhdistelmänäytöstä (kuva 2) tai hakukierroksen ADD FOOD -painikkeesta (kuva 3).

HOOK 1 : Ateriaseuranta-näyttö



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/meal\_tracker\_graph"
app:startDestination="@id/mealTrackerFragment"> android:id="@+id/mealTrackerFragment"
android:name="com.example.healthify.MealTrackerFragment"
android:label="MealTrackerFragment"
tools:layout="@layout/fragment\_meal\_tracker">
android:id="@+id/action\_merge\_flow"
app:destination="@id/create\_meal\_graph" />
...

Täällä meillä on MealTrackerFragment ja olemme sisällyttäneet siihen luo ateriakaavio. Luo COMBO-painikkeen napsautuksella käyttäjä tulee luomaan ateriavirta.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_merge\_flow)
}

HOOK 2 : Ateriayhdistelmäruutu



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/my\_meal\_graph"
app:startDestination="@id/myMealFragment"> android:id="@+id/myMealFragment"
android:name="com.example.healthify.MyMealFragment"
android:label="MyMealFragment"
tools:layout="@layout/fragment\_my\_meal">
android:id="@+id/action\_create\_meal"
app:destination="@id/create\_meal\_graph" />
...

Täällä on MyMealFragment ja meillä on mukana create\_meal\_graph. Napsauttamalla Luo COMBO -painiketta käyttäjä tulee luomaan ateriavirta.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_create\_meal)
}

Koukku 3 : Hakuvuoro, tässä ymmärretään sisäkkäinen kaavio sekä kuinka tietoja välitetään kahden kohteen välillä

Navigointi antaa sinun liittää tietoja navigointitoimintoon määrittelemällä kohteen argumentit. Esimerkiksi tässä tapauksessa voimme välittää ateriatyypin (aamiainen, lounas, päivällinen) argumenttina Luo ateriafragmentti.

Yleensä sinun on mieluummin suositeltavaa välittää vain pieni määrä tietoja määränpäiden välillä . Sinun tulisi esimerkiksi antaa avain objektin noutamiseksi pikemminkin kuin itse objektin välittäminen, koska kaikkien tallennettujen tilojen kokonaismäärä on rajoitettu Androidissa. Jos sinun on siirrettävä suuria määriä dataa, harkitse ViewModel käyttöä.

Tietojen välittämiseksi sinun on määritettävä argumentti kohdekappaleessa, johon haluat vastaanottaa tietoja.

Tässä esimerkissä lähetämme ateriatyypin 3 dif koukusta, ja sen saa CreateMealFragment. Joten meidän on määritettävä arg in CreateMealFragment.

 android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" > android:name="mealType"
app:argType="string"
android:defaultValue="" />

Jos argumenttityyppi tukee nolla-arvoja, voit ilmoittaa nollan oletusarvon käyttämällä android:defaultValue="@null".

Voit tarkistaa kaikki tuetut argumenttityypit osoitteesta TÄSTÄ .

Voimme välittää argumentit myös Deeplink-linkin kautta.

 android:id="@+id/deepLink"
app:uri="www.example.com/createMealFragment/{mealType}"
android:autoVerify="true"/>

Luo lähettäjän fragmentista joukko argumentteja ja välitä se nav-ohjaimeen.



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/search\_meal\_graph"
app:startDestination="@id/searchMealFragment"> android:id="@+id/searchMealFragment"
android:name="com.example.healthify.SearchMealFragment"
android:label="SearchMealFragment"
tools:layout="@layout/fragment\_search\_meal">
android:id="@+id/action\_add\_meal"
app:destination="@id/create\_meal\_graph" />
...

companion object {
const val MEAL\_TYPE = "mealType"
// this value should be same as argument name in nav graph
}
val bundle = bundleOf(MEAL\_TYPE to "Breakfast")findNavController().navigate(R.id.action\_add\_meal,bundle)

Tämä oli pieni keskustelu sisäkkäisistä kaavioista, navigaattorin käytöstä ja tietojen siirtämisestä kahden kohteen välillä.

Toivon artikkeli oli informatiivinen sinulle. Jos sinulla on palautetta tai kyselyä, kirjoita minulle.

Till Happy Learning!

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *