Ստեղծեք ոլորման տեսք Swift- ով ՝ 9 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:49

Մի քանի ամիս առաջ ես չգիտեի swift- ի և Xcode- ի առկայությունը: Այսօր ես կարողացա զարգացնել հավելվածի մի փոքր մասը, որը ցանկանում եմ ստեղծել: Ես կարողացա թույն բան ստեղծել, որը կցանկանայի կիսել ձեզ հետ:

Այս ձեռնարկում ես ձեզ կտանեմ ոլորման տեսարան կառուցելու գործընթացի միջոցով, որում օգտվողները կվերահղվեն, երբ նրանք ցանկանում են գրանցել նոր հաշիվ: Theանապարհին ես անպայման ձեզ տեսական բացատրություններ կտամ մեր արած գործերի վերաբերյալ, որպեսզի դուք իրականում հասկանաք, թե ինչ ենք անում:

Նախքան դա անելը, եկեք խոսենք այն մասին, թե ինչ է Swift- ը և Xcode- ը.

1. Swift- ը հզոր և ինտուիտիվ ծրագրավորման լեզու է macOS- ի, iOS- ի, watchOS- ի և tvOS- ի համար: Swift կոդ գրելն ինտերակտիվ է և զվարճալի, շարահյուսությունը հակիրճ, բայց արտահայտիչ, և Swift- ը ներառում է ժամանակակից հատկանիշներ, որոնք դուր են գալիս մշակողները: Swift կոդն ապահով է դիզայնով, բայց նաև արտադրում է ծրագրակազմ, որն աշխատում է կայծակնային արագությամբ: Այն նախագծված է աշխատելու Apple- ի Cocoa and Cocoa Touch շրջանակների և Apple- ի արտադրանքի համար գրված Objective-C կոդի մեծ մասի հետ: Այն կառուցված է բաց կոդով LLVM կազմողի շրջանակով և Xcode- ում ներառված է 2014-ին թողարկված 6-րդ տարբերակից: Apple- ի հարթակներում այն օգտագործում է Objective-C գործարկման գրադարանը, որը թույլ է տալիս գործարկել C, Objective-C, C ++ և Swift ծածկագրերը: մեկ ծրագրի շրջանակներում:

2. Xcode- ը macOS- ի համար ինտեգրված զարգացման միջավայր է (IDE), որը պարունակում է ծրագրակազմի մշակման գործիքների փաթեթ, որը մշակվել է Apple- ի կողմից ՝ macOS, iOS, watchOS և tvOS ծրագրերի մշակման համար:

Քայլ 1: Ներբեռնեք Xcode

Xcode 10 -ը ներառում է այն ամենը, ինչ ձեզ հարկավոր է Apple- ի բոլոր հարթակների համար զարմանալի ծրագրեր ստեղծելու համար: Այժմ Xcode- ը և գործիքները հիանալի տեսք ունեն macOS Mojave- ի նոր Dark Mode- ում: Աղբյուրի կոդի խմբագիրը թույլ է տալիս ավելի հեշտ ձևափոխել կամ վերափոխել ծածկագիրը, տեսնել համապատասխան տողին զուգահեռ աղբյուրի կառավարման փոփոխությունները և արագորեն ստանալ մանրամասներ վերևի կոդի տարբերությունների վերաբերյալ: Դուք կարող եք կառուցել ձեր սեփական գործիքը անհատականացված արտացոլման և տվյալների վերլուծության միջոցով: Swift- ը ավելի արագ է կազմում ծրագրակազմը, օգնում է ձեզ ավելի արագ ծրագրեր տրամադրել և ստեղծում է նույնիսկ ավելի փոքր երկուական ֆայլեր: Թեստային փաթեթները բազմիցս արագ են ավարտվում, թիմի հետ աշխատելը ավելի պարզ և անվտանգ է և շատ ավելին:

Xcode 10 -ը ներառում է Swift 4.2 -ը, որն ավելի արագ է կազմում ձեր ծրագրակազմը, օգնում է ձեզ ավելի արագ ծրագրեր մատուցել և ստեղծում է նույնիսկ ավելի փոքր երկուական ֆայլեր: Swift 4.0 -ի համեմատ ՝ Swift- ի վերջին կոմպիլյատորը կարող է ավելի քան երկու անգամ ավելի արագ կառուցել մեծ ծրագրեր:* Նոր Xcode նոր կառուցման համակարգի հետ համատեղ, ձեր ամենօրյա խմբագրման, կառուցման և փորձարկման աշխատանքային ընթացքը շատ ավելի արագ է: Օպտիմիզացված Mac- ի վերջին միջուկային սարքավորման համար ՝ Xcode- ը և Swift- ը ստեղծում են կայծակնային արագ զարգացման հարթակ:

Քայլ 2: Եկեք սկսենք

Այսպիսով, այն, ինչ մենք անելու ենք, գնալ Xcode և ստեղծել նոր նախագիծ: Երբ մենք սեղմում ենք նոր նախագծի վրա, մեր ծրագիրը կլինի մեկ դիտման ծրագիր: Նրանց համար, ովքեր չգիտեն, մեկ դիտման ծրագիրը նշանակում է, որ ձեզ հարկավոր կլինի ամեն ինչ զրոյից սկսել, և որ կլինի մեկ դիտում, որը մենք կարող ենք ծրագրավորել:

Անվանեք ձեր արտադրանքը TutorialApp: Եթե դուք փորձառու ծրագրավորող եք, որը ծրագրեր է հրապարակում App Store- ում, հավանաբար կունենաք թիմ, բայց եթե դուք նորեկ եք և որևէ հավելված հրապարակված չեք, կարող եք բաց թողնել այս դաշտը: Կազմակերպության անվան մեջ կարող եք գրել ընկերության անունը, եթե այն ունեք, իմ դեպքում ես պարզապես կպահեմ MacBook Pro- ն: Այնուհետև կազմակերպության նույնացուցիչը համարվում է ձեր նախագծի յուրահատուկ նույնացուցիչի նման մի բան, հետևաբար, կարող եք գրել այն, ինչ ցանկանում եք: Լեզուն հաստատ արագ կլինի:

Այսպիսով, կտտացրեք հաջորդը և եկեք պահպանենք նախագիծը աշխատասեղանին, որպեսզի այն հեշտ լինի մուտք գործել:

Նոր նախագիծը բաղկացած է երեք ֆայլից ՝ AppDelegate.swift, ViewController.swift և այս ձեռնարկի աստղից ՝ Main.storyboard: Տեղակայման տեղեկատվության ներքո ՝ Սարքի կողմնորոշում ընդհանուր նախագծի կարգավորումներում, սարքերը դարձրեք iPhone: Քանի որ սա միայն դիմանկարային ծրագիր է, ապանշեք Landscape Leftand Landscape Right ընտրանքները: Բացեք Main.storyboard- ը ծրագրի նավիգատորում `այն կառուցված ինտերֆեյսում դիտելու համար.

Մենք չենք պատրաստվում որևէ փոփոխություն կատարել կազմաձևում և անմիջապես կանցնենք հիմնական պատմատախտակին: Քանի որ մենք կազմել ենք մեկ դիտման ծրագիր, մենք ստեղծել ենք մեկ պարզ, դատարկ դիտում: Սա մի բան է, որի վրա մենք պետք է աշխատենք:

Քայլ 3: Աշխատեք UI- ում

Դիտումների վերահսկիչի պաշտոնական սցենարի տերմինաբանությունը «տեսարան» է, բայց դուք կարող եք այդ տերմինները փոխարինել միմյանց: Տեսարանը ներկայացնում է պատմվածքի տախտակում դիտման վերահսկիչ:

Այստեղ դուք տեսնում եք մեկ դիտման վերահսկիչ, որը պարունակում է դատարկ տեսք: Սլաքը, որը ցույց է տալիս դիտիչի վերահսկիչը ձախից, ցույց է տալիս, որ այն սկզբնական տեսքի վերահսկիչն է, որը պետք է ցուցադրվի այս սցենարի համար: Պատկերի խմբագրում դասավորության ձևավորումն իրականացվում է օբյեկտների գրադարանից (տես վերևի աջ անկյունը) ձեր դիտման վերահսկիչի մեջ քաշելով:

Պատմվածքների խմբագիրն աշխատելու պատկերացում կազմելու համար Օբյեկտների գրադարանից մի քանի հսկիչ քաշեք դատարկ դիտման վերահսկիչի մեջ, ինչպես երևում է տեսանյութում:

Կառավարիչները ներքև քաշելիս դրանք պետք է հայտնվեն ձախ կողմում գտնվող Փաստաթղթի ուրվագծում:

Դուք կարող եք ստեղծել օգտագործողի միջերեսը, որը ցանկանում եք: Իմ դեպքում ես օգտագործել եմ այն, ինչ տեսնում եք նկարում:

Քայլ 4. Մշակել Երկրորդ դիտման վերահսկիչ և նախաձեռնել Segues (անցումներ)

Այսպիսով, իմ հավելվածում, երբ օգտվողը սեղմում է «Գրանցել նոր հաշիվ» կոճակը, ես ցանկանում եմ, որ նա վերահղվի դեպի գրանցման հաշվի էջ: Այսպիսով, այդ նպատակով յուրաքանչյուր էջ նոր տեսարան է, նոր ցուցադրում: Այդ պատճառով մենք պետք է ստեղծենք երկրորդ դիտման վերահսկիչ, որը կարող եք գտնել օբյեկտի գրադարանում:

Մուտքագրեք դիտման վերահսկիչ և տեղադրեք այն ձեր սկզբնական տեսքի վերահսկիչի կողքին: Այս տեսարանը պատասխանատու կլինի գրանցման դիտման վերահսկիչի համար: Այդ էջի վերահղումը կարող է իրականացվել երկու եղանակով.

1. մենք կարող ենք դա անել ձեռքով, երբ մենք գործողություն ենք կապում կոճակից մյուս դիտման հսկողության հետ
2. մենք կարող ենք դա անել ծրագրված

Այն, ինչ ես որոշեցի անել, դա ձեռքով պատրաստելն է: Դա պարզ է այսպես.

1. Կտտացրեք մեկ կոճակ ձեր կոճակի վրա (իմ դեպքում ՝ գրանցել նոր հաշիվ)
2. Պահեք հրամանը և ձախ մկնիկը կտտացրեք այն ՝ գրանցման կառավարման տեսարան քաշելու համար:
3. Թողարկեք այն այնտեղ և ընտրեք «Ներկայացրեք մոդալապես»

Քայլ 5: Ստեղծեք ծրագրավորման դաս գրանցման գործընթացի համար

Այսպիսով, այժմ մենք ցանկանում ենք ստեղծել նոր տեսարանի կոդավորման հատուկ դաս:

Դա անելու համար դուք պետք է կատարեք հետևյալ քայլերը.

• աջ սեղմեք ձեր ծրագրի թղթապանակի վրա
• կտտացրեք նոր ֆայլի վրա, որը կոչվում է կակաոյի հպման դաս
• դասարանում գրել. RegisterVC
• ՇԱՏ ԿԱՐԵՒՈՐ! Համոզվեք, որ ենթադասը պետք է լինի UIViewController տիպի
• լեզուն պետք է արագ լինի:
• կտտացրեք հաջորդ և պահպանեք ձեր կակաոյի դասը ձեր նախագծի հիմնական արմատում:
• Կտտացրեք պատմվածքի հիմնական տախտակին և գնացեք նոր դիտման վերահսկիչ
• կտտացրեք դեղին կոճակին, որը տեղադրված է դրա վերևում
• աջ կողմում գնացեք դասի տեսուչ և հղում կատարեք Register VC- ին (Costum class, class = RegisterVC

Քայլ 6: Կառուցեք էջի հորիզոնական սահեցում

IOS- ում ոլորման դիտումներն օգտագործվում են էկրանին ամբողջությամբ չտեղավորվող բովանդակությունը դիտելու համար: Ոլորման դիտումներն ունեն երկու հիմնական նպատակ.

Թույլատրել օգտվողներին քաշել այն բովանդակության տարածքը, որը ցանկանում են ցուցադրել, թույլ տալ, որ օգտվողները մեծացնեն կամ փոքրացնեն ցուցադրվող բովանդակությունը ՝ օգտագործելով պտտվող ժեստերը: IOS ծրագրերում օգտագործվող ընդհանուր հսկողությունը `UITableView- ը UIScrollView- ի ենթադաս է և ապահովում է էկրանից ավելի մեծ բովանդակություն դիտելու հիանալի միջոց:

Ի՞նչ են օգտագործում ենթաէջերը հորիզոնական սահեցման մեջ:

Դե, եթե ես ստեղծեի 6 տարբեր էջեր, դա կնշանակեր, որ ես պետք է հատուկ դասարան ստեղծեի նրանցից յուրաքանչյուրի համար, և այդքան էլ հարմար չէ տեղեկատվությունը մի դասարանից մյուսին փոխանցելը: Երբ, օրինակ, ես մուտքագրում եմ իմ էլ. Փոստը, այնուհետև սեղմում եմ հաջորդ, եթե այլ դիտման վերահսկիչ ունեմ, ես կթողնեմ View Controller- ի առաջին էջը, իսկ հետո կներկայացվի երկրորդը: Այս դեպքում, առաջին դիտիչի վերահսկիչի տեղեկատվությունը պետք է փոխանցվի հաջորդին, այնուհետև `երրորդ դիտիչի վերահսկիչին և այլն: էջերը և ուղարկեք դրանք սերվերին: Այսպիսով, սա իսկապես բարդ կլիներ:

Այսպիսով, անցնելով այս դիտման վերահսկիչի ստեղծմանը, իմ դեպքում ես ունեի 5 էջ, որոնք ցանկանում էի ստեղծել.

1. Էլ
2. Ամբողջական Անուն
3. Գաղտնաբառ
4. Ծննդյան ամսաթիվ
5. Սեռը

Սա նշանակում է, որ դիտման վերահսկիչը, որը մենք կստեղծենք, պետք է լինի 5 անգամ ավելի մեծ, քան մենք պատրաստել էինք նախկինում:

Ընտրեք ձեր դիտման վերահսկիչը և գնացեք վերևի, աջ անկյուն և կտտացրեք տիրակալի պատկերակին և խմբագրեք Simulated Size- ը: Լայնությունը և բարձրությունը կարգավորելու համար դուք կընտրեք Freeform: Էկրանի կանխադրված լայնությունը, որը հարմար է iphone 8 -ի համար, 375 է, այնպես որ, եթե ես բազմապատկեմ 375*5 = 1875. Եվ ահա, դուք ունեք ընդլայնված դիտման վերահսկիչ:

Նմանապես, դուք հետևում եք նույն գործընթացին բոլոր տարբեր հեռախոսների և էկրանի չափերի համար:

Ոլորման տեսքը աշխատեցնելու համար մեզ անհրաժեշտ է ոլորման դիտման օբյեկտ: Scroll View- ն ապահովում է հավելվածի պատուհանի չափից ավելի մեծ բովանդակություն ցուցադրելու մեխանիզմ: Կտտացրեք այս օբյեկտի վրա, քաշեք այն և տեղադրեք այն դիտման վերահսկիչի վերին ձախ անկյունում և համոզվեք, որ X և Y զրոյական դիրքերում են, և ձգումը համապատասխանաբար ձեր դիտման վերահսկիչին է:

Ոլորել դիտումը թույլ է տալիս մեզ միայն ոլորել, ուրիշ ոչինչ: Այնուհետև մենք պետք է ավելացնենք բովանդակության տեսք, որը կպահի այլ դիտումներ: Դուք կարող եք գտնել UIView- ը `այն ներկայացնում է ուղղանկյուն շրջան, որտեղ այն գծում և ստանում է իրադարձություններ` օբյեկտի գրադարանում: Պարզապես, կտտացրեք և քաշեք այն ոլորման տեսքի մեջ և ևս մեկ անգամ ՝ համապատասխանաբար ձգեք այն:

Ձախ վահանակից ընտրեք ոլորման տեսքը, և մենք կկոչենք հավասարեցում 0, 0, 0, 0 և կավելացնենք սահմանափակումներ: Նույնը արեք բովանդակության դիտման համար:

Քայլ 7. Հորիզոնական սահեցման ենթաէջերի համար օգտագործողի միջերեսի մշակում

Այս քայլում դուք պետք է ստեղծեք ձեր ենթաէջերի UI- ն: Այն, ինչ ես որոշեցի անել, նախատիպ պատրաստել Sketch- ում, այնուհետև այն կառուցել Xcode- ում:

Քայլ 8. Իրականացրեք դիզայնը Xcode- ում

Հաջորդ քայլը այս դիզայնի ներդրումն է Xcode- ում: Դա անելու համար դուք պետք է ելքային կապեր ստեղծեք բոլոր ենթաէջերի համար և ստեղծեք ևս մեկը «մայր տեսքի» համար, այսինքն ՝ մեկ ելքային կապ ամբողջ դիտման վերահսկիչի համար:

Պատմության տախտակի տարրերը կապված են աղբյուրի կոդի հետ: Կարևոր է հասկանալ, թե ինչ կապ ունի սցենարի տախտակը ձեր գրած կոդի հետ:

Պատմության վահանակում տեսարանը ներկայացնում է բովանդակության մեկ էկրան և, որպես կանոն, մեկ դիտման վերահսկիչ: Դիտումների վերահսկիչները կիրառում են ձեր հավելվածի վարքագիծը և կառավարում են մեկ բովանդակության տեսք ՝ իր ենթադիտումների հիերարխիայով: Նրանք համակարգում են տեղեկատվության հոսքը ծրագրի տվյալների մոդելի, որն ընդգրկում է ծրագրի տվյալները և այն տվյալները, որոնք ցուցադրում են այդ տվյալները, կառավարում են դրանց բովանդակության դիտումների կյանքի ցիկլը, կարգավորում են կողմնորոշման փոփոխությունները, երբ սարքը պտտվում է, և որոշում են նավիգացիան ձեր ծրագրի ներսում:, և կիրառել վարքագիծը ՝ արձագանքելու օգտվողի մուտքին: IOS- ում դիտման վերահսկիչի բոլոր օբյեկտները UIViewController տիպի են կամ դրա ենթադասերից մեկը:

Դուք սահմանում եք ձեր դիտման վերահսկիչների վարքագիծը կոդի մեջ `ստեղծելով և գործարկելով հատուկ դիտման վերահսկիչի ենթադասեր: Այնուհետև կարող եք կապ հաստատել ձեր դասատախտակի այդ դասերի և տեսարանների միջև ՝ ձեր ծածկագրում սահմանված վարքագիծը և ձեր սցենարի տախտակում ձեր սահմանած օգտագործողի միջերեսը ստանալու համար:

Xcode- ն արդեն ստեղծել է այնպիսի դասարան, որին ավելի վաղ էիք նայում ՝ ViewController.swift և այն միացրել այն տեսարանին, որի վրա դուք աշխատում եք ձեր սցենարի տախտակում: Ավելացնելով ավելի շատ տեսարաններ, դուք ինքներդ կկապեք այս կապը Ինքնության տեսուչի հետ: Ինքնության տեսուչը թույլ է տալիս խմբագրել ձեր օբյեկտի ինքնության հետ կապված ձեր պատմվածքի տախտակի օբյեկտի հատկությունները, օրինակ ՝ որ դասին է պատկանում օբյեկտը:

Ստեղծեք վարդակներ UI Elements- ի համար Outlet- ը հնարավորություն է տալիս անդրադառնալ ինտերֆեյսի օբյեկտներին `այն օբյեկտներին, որոնք դուք ավելացրել եք ձեր storyboard- ին` աղբյուրի կոդի ֆայլերից: Ելք ստեղծելու համար Control-drag- ը ձեր storyboard- ի որոշակի օբյեկտից տեղափոխեք դիտման վերահսկիչ ֆայլ: Այս գործողությունը ստեղծում է ձեր դիտման վերահսկիչ ֆայլում գտնվող օբյեկտի համար հատկություն, որը թույլ է տալիս մուտք գործել և շահարկել այդ օբյեկտը կոդից գործարկման ժամանակ

1. Բացեք ձեր storyboard- ը, Main.storyboard:
2. Կտտացրեք Օգնականի կոճակին Xcode գործիքագոտում ՝ Xcode- ի վերին աջ անկյունում ՝ օգնական խմբագրիչը բացելու համար: Եթե ցանկանում եք ավելի շատ տարածք աշխատել, փլուզեք ծրագրի նավիգատորը և օգտակար տարածքը ՝ կտտացնելով Navigator և Utilities կոճակները Xcode գործիքագոտում:
3. Կարող եք նաև փլուզել ուրվագծային տեսքը:

Խմբագրի ընտրիչի տողում, որը հայտնվում է խմբագրի օգնականի վերևում, փոխեք օգնական խմբագիրը Preview- ից Preview- ի Automatic> ViewController.swift:

Կտտացրեք ենթաէջին և քաշեք կոդի համապատասխան դասարան:

Քայլ 9: Ինտեգրեք հատուկ ժեստեր

ՍԱIPՄԱՆ ժեստ

Սահեցման ժեստը տեղի է ունենում, երբ օգտագործողը մեկ կամ մի քանի մատ էկրանի վրայով շարժում է որոշակի հորիզոնական կամ ուղղահայաց ուղղությամբ: Օգտագործեք UISwipeGestureRecognizer դասը `սահելու ժեստերը հայտնաբերելու համար:

Սահեցման ժեստի իրականացում

Քայլ 1. Ավելացրեք սահեցնելու ժեստ (ներ) ՝ viewDidLoad () մեթոդում:

անտեսել func viewDidLoad () {super.viewDidLoad ()

թող swipeLeft = UISwipeGestureRecognizer (թիրախը ՝ ինքն, գործողությունը ՝ #ընտրիչ (handleGesture)) swipeLeft.direction =. ձախը self.view.addGestureRecognizer (swipeLeft)

թող swipeRight = UISwipeGestureRecognizer (թիրախ ՝ ինքն, գործողություն ՝ #ընտրիչ (handleGesture)) swipeRight.direction =. աջ self.view.addGestureRecognizer (swipeRight)

թող swipeUp = UISwipeGestureRecognizer (թիրախը ՝ ես, գործողությունը ՝ #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

թող swipeDown = UISwipeGestureRecognizer (թիրախը ՝ ինք, գործողությունը ՝ #ընտրիչ (handleGesture)) swipeDown.direction =. Down self.view.addGestureRecognizer (swipeDown)}

Քայլ 2. Ստուգեք ժեստերի հայտնաբերումը handleGesture () մեթոդի մեջ func handleGesture (ժեստ. UISwipeGestureRecognizer) -> Անվավեր {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if gesture.direction == UISwipeGesture left {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

Իմ հավելվածում ես ուզում էի օգտագործել swipeRight- ը, բայց ազատ մնացի օգտագործել այն, որն ավելի հարմար է ձեր դիմումի համար:

Այժմ, եկեք սա ներդնենք մեր ծածկագրում:

Մենք գնում ենք regjistVC.swift, որը մենք ստեղծել էինք նախկինում և գրում ենք կոդը, ինչպես տեսնում եք նկարներում:

ԿՈԴԻ բացատրություն

թույլ տվեք, որ current_x- ը ստանա ScrollView- ի ընթացիկ դիրքը (հորիզոնական դիրք), թող screen_width- ը ստանա էկրանի լայնությունը, այս չափից հանելով ՝ new_x- ը թույլ տա ոլորման ներկայիս դիրքից, և վերադառնամ էկրանի լայնությամբ, եթե current_x> 0 մինչև, եթե այն 0 -ից ավելի չէ: - 0 -ն 1 -ին էջն է:

Եվ մենք ավարտեցինք:

Լավ աշխատանք տղերք: