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.

• 

  Lumikha ng iOS Apps Sa Swift 3

  Ang iOS 10 ay inilabas na lamang, at kasama nito ang Swift 3. Ang Swift ay isang bagong pangprogramang lengggwahe mula sa Apple, partikular na idinisenyo para sa paglikha ng iOS, macOS, at...
• 

  Ilapat ang Mga Filter ng Larawan Gamit ang Core Image sa Swift

  Kung nais mong matuklasan kung paano magdagdag ng mga epekto ng larawan sa iOS, nakarating ka sa tamang lugar. Sa tutoryal na ito ay makakalikha ka ng isang simpleng app na maglalapat ng ilang ...
• 

  iOS 10: Paglikha ng Pagbabago na Mga Abiso sa Pag-abiso

  Sa tutoryal na ito, matututunan mo kung paano gamitin ang bagong porma ng UserNotificationsUI sa iOS 10 upang lumikha ng mga pasadyang interface para sa iyong lokal na ...
• 

  Magsimula Sa isang Template ng iOS App sa 60 Segundo

  Ang CodeCanyon ay may daan-daang mga template ng iOS app na maaari mong gamitin upang mag-umpisa ang iyong pag-unlad. Ipapakita sa iyo ng video na ito kung paano ilagay at baguhin ang ...