מדריך למתחילים לפיתוח iOS ממשק - חלק א '

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

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

אנו נדון הסיבות, השלבים, וכלים לפיתוח האפליקציה, ובסופו של דבר תוכל לעקוב אחר הדרכה קלה לעצב את היישום הבסיסי iPhone באמצעות Xcode.

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

הערה: תזדקק למחשב עם Macintosh Operating System (Mac OS) עבור התקנת Xcode, פיתוח יישומים והגשת אפליקציות, אין שום דרך לעשות זאת ב- Windows באופן חוקי.

למה לפתח עבור אפל?

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

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

מנקודת המבט של הפיתוח, Apple אוהב דברים פשוטים, וזה חל על המוצרים שלהם ומסגרות. iOS הוא מערכת ההפעלה אשר סמכויות כל התקנים ניידים של אפל. אלה כוללים iPod Touch, iPhone ו- iPad. אז זכור בעת פיתוח יישומים עבור iPhone, אתה יכול להיות פיתוח עבור כל המכשירים האחרים עם iOS!

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

Objective-C היא שפת התכנות הליבה המפעילה את כל המסגרות שלהם. יחד עם Objective-C, תוכלו גם לפתח את היישום iPhone עם קוקו טאץ ', מסגרת התכנות המניעה אינטראקציית משתמש ב- iOS.

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

תכנון iPhone שלך App מבנה

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

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

הגרוע ביותר, הוא מחזיר אותך ללוח השרטוט.

אני ממליץ לשרטט כמה רעיונות מחוספסים עבור כמה עמודים (או צפיות) של הבקשה שלך. פשוט לצייר צורה מלבנית, אולי 5 או 6 צורות על גיליון נייר, ולאחר מכן לצייר את התכונות הרצויות על כל תצוגה של האפליקציה שלך.

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

להלן בניתי אוסף קצר של אלמנטים שונים בר ממשק המשתמש:

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

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

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

עיצוב Photoshop Mockups

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

אם אתה מחפש לבנות אפליקציה שאתה באמת צריך ליצור פיקסל מושלם mockup עיצובים מההתחלה.

כדי להתחיל, אנחנו צריכים לדון הגדרות Photoshop. מאז אנחנו בעיצוב עבור iPhone אנחנו צריכים לשקול 2 סגנונות עיצוב שונים. ה תצוגת ה- iPhone הרגילה היא 320 x 480 פיקסלים. עם זאת iPhone 4 כולל רשתית אשר מכפילה את כמות הפיקסלים באותו גודל מסך. אז כדי לך להכפיל את הרזולוציה ל -640 x 960 פיקסלים ולעצב את הפריסות שלך לתקן זה.

זה אומר שאתה גם צריך ליצור 2 קבוצות של סמלים עבור mockups שלך. במקור הסמלים יהיה מוגדר 163ppi אבל תצטרך כולל סמלים עם 326ppi עבור iPhone 4. הסמלים מסומנים באופן מסורתי @ 2x בסוף שם הקובץ שלהם, כגון “[email protected]“.

עכשיו בואו למטב את הגדרות המסמך החדש שלנו. תחילה נצטרך לערוך כמה העדפות, לכן גישה אל Photoshop> עריכה> העדפות> מדריכי, רשת ופרוסות. אנחנו נהיה הגדרת Gridline שלנו כל 20px עם subdivisions בשעה 2. בעת תכנון לתצוגה רשתית קו 2px יציג נקודה אחת על המסך. זהו כלל חשוב שעליך לזכור כדי לשנות את קנה המידה של האפליקציה שלך.

אני נוטה למצוא את זה קל יותר לבנות את העיצובים שלי עם רזולוציה גבוהה יותר ואז קנה המידה אותם למטה, אבל אתה יכול נסה את שתי השיטות ולראות מה מתאים לך ביותר. אנו משתמשים ב -640 x 960 פיקסלים ב -326ppi - שמור זאת כהגדרה קבועה מראש אם אתה חושב שתשתמש בה לעתים קרובות.

בניין עם רכיבי תבנית

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

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

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

פיתוח Apps ב Xcode

כלי הפיתוח עבור iOS ו- Mac OS X תכנות נקרא בשם Xcode. אם אתה מפעיל OS X Lion אתה יכול למצוא Xcode וכל החבילות המתאימות בחינם חנות מק.

לאחר ההתקנה הושלמה, הפעל את Xcode ואת מסך הפתיחה שלה צריך לבוא. מכאן אתה יכול לטעון פרויקט מבוגר או לבחור לעשות אחד חדש. עכשיו אתה צריך ללחוץ “צור פרוייקט Xcode חדש“, אז חלון התבנית יגיע עם כמה אפשרויות. תחת iOS> יישום, לחץ על “יחיד View יישום” ופגע “הבא”. אתה יכול תן לאפליקציה החדשה שם, כמו מבחן (רצוי אין רווחים), ואז על מזהה חברה, הקלד בכל מילה כגון החברה שלי, ולבסוף לבחור ספרייה ופגע “להציל”.

Xcode תבנה את ספריית הקבצים ותשלח אותך לחלון חדש לעבודה. אתה אמור לראות הרבה אפשרויות קובץ ברשימה, אבל תיקייה אשר נקרא על שם היישום שלך הוא המוקד העיקרי.

עם Xcode יש לך שתי אפשרויות לעיצוב רכיבי הקצה הקדמי. הקלאסי xib / nib פורמט הוא סטנדרטי ל- Mac OS X ו- iOS Apps, אשר מחייב אותך לעצב תצוגת דף חדשה בכל פעם. עם זאת, כפי שאתה יוצר יותר צפיות באפליקציה אחת את כמות קבצי nib יכול להיות מכריע מדי, אז חדש לוח התכנון הקובץ מחזיקה את כל תצוגות nib שלך בחלונית אחת העורך. מכאן תוכל להסיר ולהוסיף רכיבי ממשק משתמש ותכונות בקלות.

בנוסף תוכלו להתקל .ח ו .M קבצים באותה קבוצת תיקיות. אלה שמות קבצים קצרים עבור כותרת ו יישום קוד. קבצים אלה הם המקום שבו אתה כותב את כל הפונקציות Objective-C והמשתנים הדרושים להפעלת היישום. זה יכול להיות רעיון טוב כדי להסביר איך עובד עם Xcode MVC (דגם, תצוגה, בקר), אשר הסיבה שאנחנו צריכים 2 קבצים עבור כל בקר.

MVC תכנות היררכיה

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

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

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

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

עם ידע זה לא צריך להיות קשה להתחיל לבנות את היישומים הראשונים שלך. כפי שהוזכר מוקדם יותר, Objective-C היא שפת התכנות הליבה שתשתמש בה כדי לפתח את האפליקציה. הוא בנוי על שפת C עם תחביר מעודכן ועוד כמה פרדיגמות נוספות. אתה צריך הרבה זמן כדי להכיר את השפה, אבל עבור שיעור מתחילים אני ממליץ על סדרת הדרכה מ Mobiletuts+.

עיצוב תצוגת עם

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

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

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

ספריית האובייקטים

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

מהתפריט הנפתח של ספריית האובייקטים, אתר ובחר Windows & ברים. עכשיו לחץ על סרגל ניווט, גרור אותו לתוך חלון התצוגה ומקם אותו ישירות מתחת לשחור שורת מצב (עם סמל הסוללה). אנו יכולים להתאים אישית את תיאור הכותרת של העמוד כעת. לחץ פעמיים על הטקסט שקורא כעת “כותרת“, ותראה תווית בשם “כותרת” בחלונית Utilities, אשר ניתן לשנות את תיאור הכותרת ל “מבחן” משם. מכה “להיכנס” כדי לראות את השינוי.

שוב בחלונית Windows & Bars, גלול למטה כדי למצוא את סרגל לשוניות, ולאחר מכן גרור אותו לתוך חלון התצוגה והנח אותו בתחתית האפליקציה. כברירת מחדל אלה 2 אלמנטים נראה פנטסטי.

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

בוא נוסיף גם לחצן כרטיסייה נוספת בסרגל התחתון של האפליקציה. העבר את סמן העכבר לחלונית Windows & Bars וגלול מטה אל פריט שורת הלשונית, ישירות מתחת לשורת הלשונית. גרור את זה לתוך חלון האפליקציה והנח אותו באמצע שני הלחצנים הקיימים של לשוניות. אם אתה לוחץ פעמיים על כפתור חדש זה אתה יכול לראות כמה אפשרויות נוספות בחלונית Utilities, אתה משנה את הפריט תמונה ו כותרת משם. לדוגמה, שיניתי את הכותרת ל “הפוך” עבור הפריט 'טאב בר' שנוסף לאחרונה.

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

הישאר מכוון לחלק השני

זה מסכם את החלק הראשון שלנו של המדריך עבור iPhone App עיצוב ופיתוח. בחלק הבא נעמיק קצת יותר לתוך Objective-C ו- Cocoa Touch, ובסופו של דבר תלמד לבנות אפליקציית iPhone מתפקדת, תישאר מעודכן!

גלריית העיצוב של iOS

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

מרוץ ספליטר