תוֹכֶן

• מהו רכיב ארכיטקטורת הניווט?
• הוספת עורך הניווט ל- Android Studio
• תלות בפרוייקט: ממשק ניווט וניווט בממשק המשתמש
• קבל סקירה חזותית של הניווט באפליקציה שלך
• אוכלוסיית תרשים הניווט: הוספת יעדים
• עדכון פריסות השברים שלך
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• חיבור היעדים שלך עם פעולות
• אירוח גרף הניווט
• מעביר מעברים עם NavController
• הוספת ניווט נוסף
• יצירת אנימציות מעבר בהתאמה אישית
• מסיימים

במהלך כנס ה- I / O של 2018, גוגל הודיעה על גישה חדשה לפיתוח אפליקציות אנדרואיד.

ההמלצה הרשמית של גוגל היא ליצור פעילות יחידה המשמשת כנקודת הכניסה העיקרית של האפליקציה שלך ואז לספק את שאר תוכן האפליקציה שלך כקטעים.

למרות שהמחשבה ללהטט בכל אותם עסקאות קטעים ומחזורי חיים שונים עשויה להישמע כמו סיוט, ב- I / O 2018 גוגל השיקה גם את רכיב אדריכלות הניווט שנועד לעזור לך לאמץ סוג זה של מבנה פעילויות יחיד.

במאמר זה נראה לך כיצד להוסיף את רכיב הניווט לפרויקט שלך וכיצד תוכל להשתמש בו כדי ליצור במהירות ובקלות אפליקציה אחת, מרובת שברים מרובים, בעזרת מעט עורך הניווט החדש של Android Studio. לאחר שיצרת וחיברתם את השברים שלכם, אנו נשפר את המעברים הסטנדרטיים של אנדרואיד באמצעות רכיב הניווט ועורך כדי ליצור מגוון של אנימציות מעבר הניתנות להתאמה אישית מלאה.

מהו רכיב ארכיטקטורת הניווט?

חלק מ- Android JetPack, רכיב ארכיטקטורת הניווט עוזר לך לדמיין את המסלולים השונים דרך היישום שלך ופשט את תהליך יישום המסלולים הללו, במיוחד כשמדובר בניהול עסקאות קטעים.

כדי להשתמש ברכיב הניווט, יהיה עליכם ליצור תרשים ניווט, שהוא קובץ XML המתאר כיצד הפעילויות והקטעים של האפליקציה שלכם קשורים זה לזה.

תרשים ניווט מורכב מ:

• יעדים: המסכים האישיים אליהם יכול המשתמש לנווט
• פעולות: המסלולים שהמשתמש יכול לעבור בין יעדי האפליקציה שלך

אתה יכול להציג ייצוג חזותי של תרשים הניווט של הפרויקט שלך בעורך הניווט של Android. להלן תמצא תרשים ניווט המורכב משלושה יעדים ושלוש פעולות כפי שהוא מופיע בעורך הניווט.

רכיב הניווט נועד לעזור לך ליישם את מבנה האפליקציות המומלץ החדש של גוגל, כאשר פעילות אחת "מארחת" את תרשים הניווט, וכל היעדים שלך מיושמים כקטעים. במאמר זה, נעקוב אחר הגישה המומלצת הזו וליצור יישום המורכב מ- MainActivity ושלושה יעדי קטעים.

עם זאת, רכיב הניווט אינו מיועד רק ליישומים בעלי מבנה מומלץ זה. לפרויקט יכולות להיות גרפי ניווט מרובים, ותוכלו להשתמש בשברים ופעילויות כיעדים בתוך גרפי הניווט. אם אתה מעביר פרויקט גדול ובוגר למרכיב הניווט, ייתכן שיהיה לך קל יותר להפריד את זרימות הניווט של האפליקציה שלך לקבוצות, כאשר כל קבוצה מורכבת מפעילות "עיקרית", חלקים קשורים וגרף הניווט שלה.

הוספת עורך הניווט ל- Android Studio

כדי לעזור לך להפיק את המרב ממרכיב הניווט, Android Studio 3.2 Canary ומעלה כולל עורך ניווט חדש.

כדי לאפשר עורך זה:

• בחר "סטודיו אנדרואיד> העדפות ..." בסרגל התפריטים של אולפן Android.
• בתפריט השמאלי, בחר "ניסוי."
• אם הוא עדיין לא נבחר, בחר בתיבת הסימון "הפעל את עורך הניווט".

• לחץ על "אישור."
• הפעל מחדש את סטודיו אנדרואיד.

תלות בפרוייקט: ממשק ניווט וניווט בממשק המשתמש

צרו פרויקט חדש עם ההגדרות שבחרתם, ואז פתחו את קובץ build.gradle שלו והוסיפו שבר ניווט וניווט Ui כתלות בפרוייקט:

תלות {יישום fileTree (dir: libs, כוללים:) יישום com.android.support:appcompat-v7:28.0.0 יישום com.android.support.constraint: פריסת אילוץ: 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 test: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

קבל סקירה חזותית של הניווט באפליקציה שלך

כדי ליצור תרשים ניווט:

• לחץ על בקרה על ספריית ה- "res" של הפרויקט שלך ובחר "New> Directory Resource Android".
• פתח את התפריט הנפתח "סוג משאבים" ובחר "ניווט."
• בחר "אישור."
• לחץ על שליטה על ספריית ה- res / navigation שלך החדשה ובחר "חדש> קובץ משאב ניווט."
• פתח את התפריט הנפתח "סוג משאבים" ובחר "ניווט."

• תן שם קובץ זה; אני משתמש ב" nav_graph. "
• לחץ על "אישור."

פתח את קובץ ה- res / navigation / nav_graph שלך, ועורך הניווט יופעל אוטומטית. בדומה לעורך הפריסה, עורך הניווט מחולק לכרטיסיות "עיצוב" ו"טקסט ".

אם תבחר בכרטיסייה "טקסט", תראה את ה- XML ​​הבא:

<? xml version = "1.0" encoding = "utf-8"?> // ניווט הוא צומת השורש של כל גרף ניווט //

בכרטיסייה "עיצוב" תוכלו לבנות ולערוך חזותית את הניווט של האפליקציה.

משמאל לימין, עורך הניווט מורכב מ:

• רשימת יעדים: זה מפרט את כל היעדים המרכיבים את תרשים הניווט הספציפי הזה, בתוספת הפעילות בה מתארח תרשים הניווט.
• עורך הגרפים: עורך הגרפים מספק סקירה חזותית של כל יעדי הגרף והפעולות המחוברות ביניהם.
• עורך התכונות: אם בחרת יעד או פעולה בעורך הגרפים, החלונית "תכונות" תציג מידע על הפריט שנבחר כעת.

אוכלוסיית תרשים הניווט: הוספת יעדים

גרף הניווט שלנו כרגע ריק. נוסיף כמה יעדים.

אתה יכול להוסיף פעילויות או קטעים שכבר קיימים, אך אתה יכול גם להשתמש בתרשים הניווט כדי ליצור במהירות ובקלות שברים חדשים:

• לחץ על לחצן "יעד חדש" ולחץ על "צור יעד ריק".

• בשדה "שם שבר", הזן את שם הכיתה של השבר שלך; אני משתמש ב"ראשית פרגון ".
• ודא שתיבת הסימון "צור פריסת XML" מסומנת.
• השלם את השדה "שם פריסת שבר"; אני משתמש ב" fragment_first ".
• לחץ על "סיום".

כעת תתווסף פרוייקט תת-תחום משנה של FirstFragment וקובץ משאבי הפריסה "fragment_first.xml". FirstFragment יופיע גם כיעד בתרשים הניווט.

אם תבחר ב- FirstFragment בעורך הניווט, החלונית "תכונות" תציג מידע כלשהו על יעד זה, כגון שם המחלקה שלו והזיהוי בו תשתמש כדי להפנות יעד זה במקום אחר בקוד שלך.

יש לשטוף ולחזור על מנת להוסיף פרוייקט SecondFragment ו- ThirdFragment לפרויקט שלך.

עבור לכרטיסייה "טקסט" ותראה שה- XML ​​עודכן כך שישקף שינויים אלה.

לכל גרף ניווט יעד התחלה, שהוא המסך שמוצג כאשר המשתמש מפעיל את האפליקציה שלך. בקוד שלעיל אנו משתמשים ב- FirstFragment כיעד ההתחלה של האפליקציה שלנו. אם תעבור לכרטיסייה "עיצוב", תבחין בסמל בית, המסמן גם את FirstFragment כיעד ההתחלה של הגרף.

אם אתה מעדיף להשתמש בנקודת התחלה אחרת, בחר בפעילות או בקטע המדובר ואז בחר "הגדר יעד התחל" מהחלונית "תכונות".

לחלופין, באפשרותך לבצע שינוי זה ברמת הקוד:

עדכון פריסות השברים שלך

עכשיו יש לנו את היעדים שלנו, בואו נוסיף כמה אלמנטים בממשק המשתמש כך שתמיד ברור איזה קטע אנו צופים כעת.

אני הולך להוסיף את כל הדברים הבאים לכל קטע:

• מבט טקסט המכיל את כותרת השבר
• כפתור שיאפשר למשתמש לנווט משבר אחד למשנהו

להלן הקוד עבור כל קובץ משאב פריסה:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

חיבור היעדים שלך עם פעולות

השלב הבא הוא קישור היעדים שלנו באמצעות פעולות.

ניתן ליצור פעולה בעורך הניווט באמצעות גרירה ושחרור פשוטים:

• ודא שנבחר בכרטיסייה "עיצוב" של העורך.
• רחף מעל הצד הימני של היעד שאתה רוצה לנווט מ, שבמקרה זה FirstFragment. מעגל אמור להופיע.
• לחץ וגרור את הסמן ליעד שאליו ברצונך לנווט ל, שהוא SecondFragment. קו כחול אמור להופיע. כאשר SecondFragment מודגש בכחול, שחרר את הסמן ליצירת קישור בין יעדים אלה.

כעת אמור להיות חץ פעולה המקשר את FirstFragment ל- SecondFragment. לחץ כדי לבחור בחץ זה, והחלונית "תכונה" תתעדכן כדי להציג מידע על פעולה זו, כולל מזהה שהוקצה על ידי המערכת.

שינוי זה בא לידי ביטוי גם ב- XML ​​של תרשים הניווט:

… … …

יש לשטוף ולחזור כדי ליצור פעולה המקשרת את SecondFragment ל- ThirdFragment ופעולה המקשרת את ThirdFragment ל- FirstFragment.

אירוח גרף הניווט

תרשים הניווט מספק ייצוג חזותי של היעדים והפעולות של האפליקציה שלך, אך כדי להפעיל פעולות אלה דרוש קוד נוסף.

לאחר שיצרת תרשים ניווט, עליך לארח אותה בתוך פעילות על ידי הוספת NavHostFragment לקובץ הפריסה של אותה פעילות. NavHostFragment זה מספק מיכל בו הניווט יכול להתרחש ויהיה גם אחראי להחלפת שברים פנימה והחוצה כאשר המשתמש מנווט סביב האפליקציה שלך.

פתח את קובץ ה- "Activity_main.xml" של הפרויקט שלך והוסף NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // צור שבר שישמש כ- NavHostFragment //

בקוד שלעיל, האפליקציה: defaultNavHost = "true" מאפשרת למארח הניווט ליירט בכל פעם שנלחץ על כפתור "Back" של המערכת, כך שהאפליקציה תמיד מכבדת את הניווט המתואר בתרשים הניווט שלך.

מעביר מעברים עם NavController

בשלב הבא עלינו ליישם NavController, שהוא רכיב חדש שאחראי על ניהול תהליך הניווט בתוך NavHostFragment.

כדי לנווט למסך חדש, עליכם לאחזר NavController באמצעות Navigation.findNavController, התקשרו לשיטת הניווט () ואז העבירו את מזהה היעד אליו אתם מנווטים או הפעולה שאליה אתם רוצים לנקוט. לדוגמה, אני קורא "action_firstFragment_to_secondFragment", שיעביר את המשתמש מ- FirstFragment, ל- 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; יבוא android.support.annotation.NonNull; יבוא android.support.annotation. ביטול; יבוא android.support.v4.app.Fragment; יבוא android.view.Layout Inflater; יבוא android.view.View; יבוא android.view.ViewGroup; יבוא android.widget.Button; יבוא androidx.navigation.NavController; יבוא androidx.navigation.Navigation; FirstFragment בכיתה ציבורית מרחיב את השבר {public FirstFragment () {} @ חלף את הריק הציבורי onCreate (Bundle savedInstanceState) {super.onCreate (SavedInstanceState); if (getArguments ()! = null) {}} @ החלף את התצוגה הציבורית onCreateView (מתנפח LayoutInflater, מיכל ViewGroup, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @ העבר חלל ציבורי ב-ViewCreated (תצוגת @NNNull תצוגה, @ צרור מוחלט saveInstanceState) {לחצן לחצן = (כפתור) view.findViewById (R.id.button); button.setOnClickListener (View.OnClickListener חדש () {@ הפעל את הריק לציבור onClick (הצג v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naondragment_navragment) }}); }}

בשלב הבא, פתח את MainActivity שלך והוסף את הדברים הבאים:

• NavigationView.OnNavigationItem SelectedListener: מאזין לטיפול באירועים בפריטי ניווט
• SecondFragment.OnFragmentInteractionListener: ממשק שנוצר כאשר יצרת את SecondFragment דרך עורך הניווט

MainActivity צריך גם ליישם את שיטת onFragmentInteraction () המאפשרת תקשורת בין השבר והפעילות.

יבוא android.support.v7.app.AppCompatActivity; יבוא android.os.Bundle; יבוא android.net.Uri; יבוא android.view.MenuItem; יבוא android.support.design.widget.NavigationView; יבוא android.support.annotation.NonNull; המעמד הציבורי MainActivity מרחיב את AppCompatActivity מיישם את NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@ הפעל חלל מוגן onCreate (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); } @ הרחק את הציבור הבוליאני הציבורי ב- NavigationItem Selected (פריט פריט MenuNull) {return falsk; } @ ביטול חלל ציבורי ב-FragmentInteraction (אורי uri) {}}

הוספת ניווט נוסף

כדי ליישם את שאר הניווט של האפליקציה שלנו, עלינו רק להעתיק / להדביק את הבלוק onViewCreated ולבצע מספר ציוצים כך שנפנה אל יישומוני הכפתורים הנכונים ופעולות הניווט.

פתח את ה- SecondFragment שלך והוסף את הדברים הבאים:

@Orride חלל ציבורי ב-ViewCreated (תצוגת תצוגה של NNNull, @ Bundle מוחלט SaveInstanceState) {כפתור כפתור = (כפתור) view.findViewById (R.id.button2); button.setOnClickListener (View.OnClickListener חדש () {@ הפעל את הריק לציבור onClick (הצג v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naFragment_naFragment_) }}); }

לאחר מכן, עדכן את הבלוק onViewCreated של ThirdFragment:

@Orride חלל ציבורי ב-ViewCreated (תצוגת @NNNull תצוגה, צרור @ Nullable SaveInstanceState) {לחצן לחצן = (כפתור) view.findViewById (R.id.button3); button.setOnClickListener (תצוגה חדשה. OnClickListener () {@ הפעל את הריק לציבור onClick (הצג v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naFragment_Fragment) }}); }

לבסוף, אל תשכח להוסיף את ממשק ה- ThirdFragment.OnFragmentInteractionListener למערכת MainActivity שלך:

MainActivity בכיתה ציבורית מרחיב את AppCompatActivity מיישם את NavigationView.OnNavigationItem SelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

הפעל פרויקט זה במכשיר אנדרואיד או מכשיר וירטואלי אנדרואיד (AVD) ובדוק את הניווט. אתה אמור להיות מסוגל לנווט בין שלושת השברים על ידי לחיצה על הכפתורים השונים.

יצירת אנימציות מעבר בהתאמה אישית

בשלב זה, המשתמש יכול לנוע סביב האפליקציה שלך, אך המעבר בין כל קטע הוא די פתאומי. בחלק האחרון הזה, נשתמש ברכיב הניווט כדי להוסיף אנימציה שונה לכל מעבר, כך שהם מתרחשים בצורה חלקה יותר.

כל הגדרה שאני רוצה להשתמש בה חייבת להיות מוגדרת בקובץ משאב האנימציה שלה, בתוך ספריית "res / anim". אם הפרוייקט שלך כבר לא מכיל ספריית "res / anim", תצטרך ליצור אחת:

• לחץ על שליטה על תיקיית "המילואים" של הפרויקט שלך ובחר "חדש> מדריך משאבים אנדרואיד."
• תן למדריך הזה את השם "אנימציה".
• פתח את התפריט הנפתח "סוג משאבים" ובחר "אנימציה".
• לחץ על "אישור."

נתחיל בהגדרת אנימציה דהויה:

• לחץ על שליטה על תיקיית "res / anim" של הפרויקט שלך.
• בחר "חדש> קובץ משאב לאנימציה."
• תן לקובץ זה את השם "fade_out."
• פתח את קובץ ה- "fade_out" והוסף את הדברים הבאים:

חזור על השלבים שלעיל כדי ליצור קובץ משאב אנימציה שני, בשם "slide_out_left", ואז הוסף את הדברים הבאים:

צור קובץ שלישי בשם "slide_out_right" והוסף את הדברים הבאים:

כעת תוכל להקצות אנימציות אלה לפעולות שלך באמצעות עורך הניווט.כדי להפעיל את האנימציה הנמוגה בכל פעם שהמשתמש מנווט מ- FirstFragment ל- SecondFragment:

• פתח את תרשים הניווט וודא שבכרטיסייה 'עיצוב' נבחרה.
• לחץ כדי לבחור בפעולה המקשרת את FirstFragment ל- SecondFragment.
• בלוח "תכונות", לחץ כדי להרחיב את החלק "מעברים". כברירת מחדל, כל תפריט שנמצא בחלק זה צריך להיות מוגדר כ- "ללא".
• פתח את התפריט הנפתח "Enter", השולט על ההנפשה המופעלת בכל פעם ש- SecondFragment עובר לראש הערימה האחורית. בחר את האנימציה "fade_out".

אם תעבור לכרטיסייה "עיצוב", תראה שהאנימציה זו נוספה ל" action_firstFragment_to_secondFragment. "

הפעל את הפרויקט המעודכן במכשיר אנדרואיד או AVD. כעת עליך להיתקל באפקט של דהייה בכל פעם שאתה מנווט מ- FirstFragment ל- SecondFragment.

אם תסתכל שוב על החלונית "תכונות", תראה ש"הזנה "אינה החלק היחיד במעבר בו תוכל להחיל אנימציה. אתה יכול גם לבחור בין:

• יציאה: האנימציה שמתנגנת כאשר שבר עוזב את הערימה
• פופ כניסה: האנימציה שמתנגנת כאשר שבר מאכלס את ראש הערימה
• יציאת פופ: האנימציה שמתנגנת כאשר שבר עוברת לתחתית הערימה

נסה להתנסות על ידי החלת אנימציות שונות על חלקים שונים במעברים שלך. אתה יכול גם להוריד את הפרויקט שהושלם מ- GitHub.

מסיימים

במאמר זה בדקנו כיצד ניתן להשתמש ברכיב ארכיטקטורת הניווט כדי ליצור אפליקציה יחידה, מרובת שברים, הכוללת אנימציות מעבר בהתאמה אישית. האם רכיב הניווט שכנע אותך להעביר את הפרויקטים שלך למבנה יישומים מסוג זה? ספר לנו בתגובות למטה!