Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS 10
Code

Lumikha ng Pasadyang Alerto Controller sa iOS 10

by
Difficulty:BeginnerLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Pambungad

Ang isang UIAlertController ay ginagamit upang magpakita ng isang alerto ng mensahe sa isang app. Halimbawa, kung may naganap na pagkakamali, ang alerto ay maaaring magpakita ng paglalarawan at mga pindutan upang magsagawa ng karagdagang pagkilos. Maaari kang gumamit ng mga alerto upang gumawa ng mga gumagamit mag-log in o mag-sign up, ipakita ang mga resulta ng isang pagkilos na ginawa nila, o mag-alok ng ilang higit pang mga kagamitan ng pagpipilian sa halimbawa kapag wala kang pwesto para sa dagdag na mga pindutan sa isang screen ngunit kailangan mo ang mga gumagamit upang maisagawa ilang higit pang mga aksyon sa isang tukoy na bagay sa app.

Dahil sa iOS 9, pinalitan ng Apple ang UIAlertView na may UIAlertController. Hindi mo na kailangang idagdag ang UIAlertViewDelegate sa iyong klase at magagawa na ngayong estilo ang iyong alerto hangga't gusto mo. Maaari mong ipasadya ang mga font ng pamagat at mensahe, palitan ang kulay ng background, at magdagdag ng mga espasyo ng teksto. Para sa kapakanan ng pagtuturo na ito lumikha kami ng isang demonstrasyong app na may tatlong mga pindutan, at ang bawat isa ay magsunog ng iba't ibang nagawa na mga alerto. Maaari mong i-download ito mula sa repo ng pinagmulang pagtuturo sa GitHub. Ngayon tingnan natin kung gaano kadali na bumuo ng mga pasadyang alerto!

Alerto Gamit ang Espasyo ng Teksto

Ang unang alerto na aming gagawin ay may isang nakalakip na TextField kung saan maaari kang maglagay ng kahit anong gusto mo mula sa iOS na pindutan. Upang magpasimula ng isang UIAlertController, kailangan mong magsimula sa tatlong linyang ito:

Sa unang linya, nagtakda kami ng isang simpleng pisi bilang isang pamagat ng alerto. Sa ikalawang linya ay ang mensahe na pisi na ipapakita sa ibaba mismo ng pamagat. Sa ikatlong linya, ang uri ng alerto ay nakalagay na sa .alert.  (Ang isa pang pagpipilian ay .actionSheet, ngunit hindi mo maaaring ipasadya ang isang action sheet tulad ng maaari mong isang alerto.)

Sa isang alerto na taga-kontrol, ang mga pindutan ay tinukoy bilang UIAlertAction elements. Kaya kami ay gumawa ng isang UIAlertAction, na siyang magiging unang pindutan sa ilalim-kaliwang bahagi ng aming alerto.

Tinawagan namin ang aksyon na ito sa SubmitAction, itakda ang pamagat nito sa "Isumite", binigyan ito ng estilo ng default, at para sa humahawal nito, nakapagbigay ang nilalaman ng isang patlang ng teksto. Dahil ang mga patlang ng teksto sa alerto ay may isang index, pinili namin ang unang isa sa posisyon 0. Pagkarapos ay makikita namin kung paano magdagdag ng maramihang mga patlang ng teksto sa isang alerto.

Sa sandaling napindot mo ang pindutang Isumite sa iyong alerto, i-print ng Xcode console ang teksto na iyong ipinasok at balewalain ang alerto.

Lumikha ng isang pindutan upang itago lamang ang aming alerto:

Tulad ng makikita mo, ang aksyon na ito ay walang tagahawak. Iyon ay dahil gusto naming balewalain ang alerto at magsagawa ng walang iba pang mga aksyon.   Ang pindutan na ito ay magpapakita ng isang pulang pamagat ng Kanselahin dahil itinakda namin ang estilo nito a bilang .destructive, na mauunawaan ng Apple API.

Bago idagdag ang dalawang mga pagkilos na ito sa Alerto, kailangan naming simulan ang aming espasyo ng teksto:

Kung pamilyar ka sa UITextFields, makilala mo ang mga ito bilang karaniwang mga katangian na naglalagay ng mga katangian tulad ng hitsura at uri ng pindutan, uri ng autocorrection, mensahe ng placeholder, at malinaw na pindutan. (Naitakda namin ang malinaw na pindutan upang ipakita kapag nagsimula ka ng paglalagay ng isang bagay.)

Ngayon, tapusin natin ang ating alerto.

Hindi ginagamit ng UIAlertController ang mga pagpipilian ng mga aksyon, kaya dapat naming idagdag ang mga ito nang isa-isa. Panghuli, ilalagay namin ang alerto gaya ng gagawin namin sa iba pang controller sa kasalukuyang() function.

Sa aming demonstrasyong app, nakalagay na ang lahat ng koda sa itaas sa isang Pindutan, kaya kung patakbuhin mo ang app at pindutin ito, dapat mong makita ang isang bagay tulad nito:

Alert controller with 1 text field

Kung naglagay ka ng isang bagay sa walang laman na patlang ng teksto at pindutin ang Isumite, ang iyong Xcode console ay i-print ito.

Alerto Gamit ang Tatlong Text Field

Ngayon ay lumikha tayo ng bagong alerto na may maramihang Mga Patlang ng Teksto upang lumikha ng isang prompt sa pag-login. Magsisimula ulit tayo sa tatlong linya na nagpapasimula ng aming alerto:

Mayroon pa kaming dalawang Pindutan, isa upang magsagawa ng isang aksyon sa pag-login at ang pindutan na kanselahin:

Tulad ng iyong nakikita, ang aming alerto ay may tatlong mga patlang ng teksto. Ang mga ito ay na-index ng kanilang posisyon. Ituturing namin ang nangungunang bilang ang pangalan ng gumagamit, ang gitna bilang ang password, at ang huling bilang isang numero ng telepono.

Ngayon ay magdagdag ng isang pindutang Kanselahin:

Susunod na gagawin namin at baguhin ang username Field ng Teksto:

Ang koda sa itaas ay mukhang medyo katulad sa aming unang halimbawa, kasama ang pagdaragdag ng halimbawa ng textColor.

Katulad din para sa pangalawang patlang ng teksto:

Dahil ang mga password ay karaniwang dapat na nakatago, itinakda namin ang pag-gawa ng   isSecureTextEntry sa aming field na teksto. Ang command na ito ay magpapalit ng mga character na nagta-type mo gamit ang mga tuldok, tulad ng ginagawa ng mga patlang ng password sa isang website.  Itinakda din namin ang kulay ng teksto sa pula.

At ang ikatlong elemento ng teksto, para sa field ng numero ng telepono:

Ang keyboardType na katangian ay nakalagay na bilang .numberPad dito, kaya ipapakita lamang ng app ang numerikong pang-pindutan. Maaari mo ring mapansin na binago namin ang mga disenyo ng letra ng lugar na ito ng teksto sa American Typewriter sa huling linya ng koda.

Kami ay halos tapos na kailangan lang na idagdag ang aming mga aksyon at ipakita muli ang AlertController:

Ngayon, kung patakbuhin mo ang app at gawin ang alertong ito, makakakita ka ng ganito:

Alert controller with 3 text fields

Kung subukan mong ilagay ng isang bagay sa mga patlang ng teksto, makikita mo ang pagbabago na estilo na inilapat namin.

Customized text fields in the Alert

Alerto na May Apat na Pindutan

Para sa isang pangwakas na halimbawa, ipapakita ko sa iyo ang isang alerto na may apat na mga pagkilos at ilang iba't ibang estilo.

Dahil ipasadya namin ang mga pamagat at mensahe ng alerto na ito sa ibang pagkakataon, ang aming pagbabago ng koda ay magkakaroon ng mga walang laman na pisi para sa ngayon:

Narito kung paano namin magawa ang disenyo ng mga titik at laki ng mga patlang ng pamagat at mensahe:

Sa unang dalawang linya itinakda namin ang pangalan at laki ng titik bilang isang Diskyunaryo ng NSFontAttributeName. Mangyaring tandaan na kailangan mong ilagay ang tamang PostScript na pangalan ng titik na nais mong gamitin, kung hindi man ay makikilala ito ng Xcode at ipapakita ang default na titik. Ang iOS Font site ay isang reperensya sa tamang mga pangalan ng titik.

Dito din namin itakda ang pamagat at mga pisi ng mensahe na may isang halimbawa ng NSMutableAttributedString.

Lumikha ng apat na pagkilos, kabilang ang default na Kanselahin ang isa:

Bago ilagay ang mga pagkilos na ito sa aming alerto, hayaan ang istilo nito nang kaunti.

Kahit na ang UIAlertController API ay limitado, upang ang mga taga-gawa ay hindi maaaring ganap na baguhin ang default na istraktura, maaari naming baguhin ang estilo nito habang nagawa namin ang koda sa itaas.

Sa wakas maaari naming idagdag ang lahat ng mga pagkilos at ipakita ang aming alerto:

Ngayon, kung pinapatakbo mo ang iyong koda, makakakuha ka ng ganito:

Alert Controller with 4 buttons

Konklusyon

Sa pagtuturo na ito, lumikha kami ng serye ng mga pasadyang UIAlertViews na may mga patlang ng teksto at pagbabago na estilo. Umaasa ako na magagamit mo ang kaalaman na ito para sa iyong susunod na iOS app.

Samantala, tingnan ang ilan sa aming iba pang mga tutoryal sa pagpapaganda ng Swift at iOS app.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.