העברת עיצובים ב-XML ל-Material 3 ב-Compose

כשמשתמשים בפיתוח נייטיב באפליקציה קיימת, צריך להעביר את ערכות העיצוב של Material XML כדי להשתמש ב-MaterialTheme לרכיבי פיתוח נייטיב. כלומר, לעיצוב של האפליקציה יהיו שני מקורות אמת: העיצוב שמבוסס על View והעיצוב של Compose. כל שינוי בסגנון צריך להתבצע בכמה מקומות. אחרי שהאפליקציה תעבור מיגרציה מלאה ל-Compose, צריך להסיר את ה-XML של העיצוב.

אפשר להשתמש בכלי Material Theme Builder כדי להעביר צבעים.

כשמתחילים את ההעברה מ-XML ל-Compose, מעבירים את העיצוב ל-Material 3 Compose.

מילון מונחים

מונח הגדרה
MaterialTheme הפונקציה הקומפוזבילית שמספקת עיצוב (צבעים, טיפוגרפיה, צורות) לרכיבי ממשק המשתמש של Compose.
Shape אובייקט Compose שמשמש להגדרת צורות של רכיבים בהתאמה אישית עבור MaterialTheme.
Typography אובייקט Compose שמשמש להגדרת סגנונות טקסט מותאמים אישית (משפחות גופנים, גדלים, משקלים) עבור MaterialTheme.
Color אובייקט Compose שמשמש להגדרת ערכות צבעים מותאמות אישית ל-MaterialTheme.
עיצוב XML מערכת העיצוב של Android מוגדרת בקובצי XML ומשמשת את מערכת התצוגה.

מגבלות

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

  • המדריך הזה מתמקד רק בהעברה ל-Material 3. אם אתם רוצים להעביר מערכות עיצוב חלופיות, תוכלו לעיין במאמרים בנושא Material 2 או מערכות עיצוב בהתאמה אישית ב-Compose.
  • המטרה הסופית היא לבצע העברה מלאה ל-Compose, שתאפשר להסיר את העיצוב של XML. במדריך הזה מוסבר איך לבצע את ההעברה, אבל לא מוסבר איך להסיר סופית את העיצוב של XML.

שלב 1: הערכת מערכת העיצוב

זיהוי מערכת העיצוב שבה נעשה שימוש בפרויקט XML View. ניתוח נתיב ההעברה והשלבים הנדרשים להעברת מערכת העיצוב הקיימת ל-Material 3 ב-Compose.

שלב 2: זיהוי קובצי המקור של ערכת הנושא

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

אפשר לעשות שימוש חוזר במשאבים כמו מחרוזות, ולא צריך להעביר אותם.

שלב 3: העברת צבעים

מעבירים את ערכות הצבעים הכהות והבהירות מ-XML למקבילות שלהן ב-Material 3 Compose.

שלב 4: העברה של צורות וטיפוגרפיה בהתאמה אישית

  • אם האפליקציה משתמשת בצורות בהתאמה אישית:

    1. בקטע הקוד של Compose, מגדירים אובייקט Shape כדי לשכפל את הגדרות הצורה של ה-XML.

    2. מעבירים את אובייקט Shape אל MaterialTheme.

      פרטים נוספים זמינים במאמר בנושא צורות.

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

    1. בקטע הקוד של Compose, מגדירים אובייקט Typography כדי לשכפל את סגנונות הטקסט והגדרות הגופן של XML.

    2. מעבירים את אובייקט Typography אל MaterialTheme.

      פרטים נוספים זמינים במאמר בנושא טיפוגרפיה.

שלב 5: מאמתים את העברת העיצוב

תמיד צריך להשתמש בערכי העיצוב הקיימים מתוך עיצוב ה-XML המקורי כמקור האמת לעיצוב Material החדש ב-Compose. אסור להמציא ערכי עיצוב חדשים במהלך ההעברה, כדי לשמור על עקביות המותג ולהימנע מנסיגות חזותיות.

מוודאים שכל הערכים החדשים של נושא Compose תואמים לערכי ה-XML הקיימים. אל תקודדו ערכים שהועברו.