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



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:
let alert = UIAlertController(title: "AlertController Tutorial", message: "Submit something", preferredStyle: .alert)
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.
// Submit button let submitAction = UIAlertAction(title: "Submit", style: .default, handler: { (action) -> Void in // Get 1st TextField's text let textField = alert.textFields![0] print(textField.text!) })
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:
// Cancel button let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
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:
// Add 1 textField and customize it alert.addTextField { (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Type something here" textField.clearButtonMode = .whileEditing }
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.
// Add action buttons and present the Alert alert.addAction(submitAction) alert.addAction(cancel) present(alert, animated: true, completion: nil)
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:



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:
let alert = UIAlertController(title: "Login example", message: "Insert username, password & phone No.", preferredStyle: .alert)
Mayroon pa kaming dalawang Pindutan, isa upang magsagawa ng
isang aksyon sa pag-login at ang pindutan na kanselahin:
// Login button let loginAction = UIAlertAction(title: "Login", style: .default, handler: { (action) -> Void in // Get TextFields text let usernameTxt = alert.textFields![0] let passwordTxt = alert.textFields![1] let phoneTxt = alert.textFields![2] print("USERNAME: \(usernameTxt.text!)\nPASSWORD: \(passwordTxt.text!)\nPHONE NO.: \(phoneTxt.text!)") })
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:
// Cancel button let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
Susunod na gagawin namin at baguhin ang username Field ng
Teksto:
// Add 1 textField (for username) alert.addTextField { (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Type your username" textField.textColor = UIColor.green }
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:
// Add 2nd textField (for password) alert.addTextField { (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Type your password" textField.isSecureTextEntry = true textField.textColor = UIColor.red }
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:
// Add 3rd textField (for phone no.) alert.addTextField { (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .numberPad textField.placeholder = "Type your phone no." textField.textColor = UIColor.blue textField.font = UIFont(name: "AmericanTypewriter", size: 14) }
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
:
// Add action buttons and present the Alert alert.addAction(loginAction) alert.addAction(cancel) present(alert, animated: true, completion: nil)
Ngayon, kung patakbuhin mo ang app at gawin ang alertong
ito, makakakita ka ng ganito:



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



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:
let alert = UIAlertController(title: "", message: "", preferredStyle: .alert)
Narito kung paano namin magawa ang disenyo ng mga titik at
laki ng mga patlang ng pamagat at mensahe:
// Change font of the title and message let titleFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "AmericanTypewriter", size: 18)! ] let messageFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "HelveticaNeue-Thin", size: 14)! ] let attributedTitle = NSMutableAttributedString(string: "Multiple buttons", attributes: titleFont) let attributedMessage = NSMutableAttributedString(string: "Select an Action", attributes: messageFont) alert.setValue(attributedTitle, forKey: "attributedTitle") alert.setValue(attributedMessage, forKey: "attributedMessage")
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:
let action1 = UIAlertAction(title: "Action 1", style: .default, handler: { (action) -> Void in print("ACTION 1 selected!") }) let action2 = UIAlertAction(title: "Action 2", style: .default, handler: { (action) -> Void in print("ACTION 2 selected!") }) let action3 = UIAlertAction(title: "Action 3", style: .default, handler: { (action) -> Void in print("ACTION 3 selected!") }) // Cancel button let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
Bago ilagay ang mga pagkilos na ito sa aming alerto, hayaan
ang istilo nito nang kaunti.
// Restyle the view of the Alert alert.view.tintColor = UIColor.brown // change text color of the buttons alert.view.backgroundColor = UIColor.cyan // change background color alert.view.layer.cornerRadius = 25 // change corner radius
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:
// Add action buttons and present the Alert alert.addAction(action1) alert.addAction(action2) alert.addAction(action3) alert.addAction(cancel) present(alert, animated: true, completion: nil)
Ngayon, kung pinapatakbo mo ang iyong koda, makakakuha ka ng ganito:



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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly