 #### What Will I Learn? - Integrate SCLAlertView to iOS project - Install Cocoapods - Import SCLAlertView library - Implement SCLAlertView to display alert in various ways like show error, show warning, show success messages, etc #### Requirements - Xcode - Install Cocoapods - Understanding of Objective-C language in iOS development #### Difficulty - Basic #### Tutorial Contents <b>Integrate the library via Cocoapods</b> Make sure you have installed Cocoapods. Add this line at the Podfile ```pod 'SCLAlertView-Objective-C'```. This is the entire Podfile. ``` # Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'PopUpDemo' do # Uncomment the next line if you're using Swift or would like to use dynamic frameworks # use_frameworks! # Pods for PopUpDemo pod 'SCLAlertView-Objective-C' target 'PopUpDemoTests' do inherit! :search_paths # Pods for testing end target 'PopUpDemoUITests' do inherit! :search_paths # Pods for testing end end ``` After you write the code, go to the terminal and change directory to your project and run ```pod install``` command to install the dependency. Then, open up the .xcworkspace to be able to use libraries in the Podfile.  <b>Importing the library to ViewController</b> Go to your ViewController class, we will import SCLAlertView library and its style kit using these lines. ``` // // ViewController.h // PopUpDemo // // Created by Andri on 1/26/18. // Copyright © 2018 Andri. All rights reserved. // #import <UIKit/UIKit.h> #import "SCLAlertView.h" #import "SCLAlertViewStyleKit.h" @interface ViewController : UIViewController @end ``` After done with the import library, we will use and implement it in our ViewController.m class. <b>Use and implement the SCLAlertView</b> First of all, we'll initialize using common way like this line. We allocate using initWithNewWindow. ```SCLAlertView *alert = [[SCLAlertView alloc] initWithNewWindow];``` When we have declared, we'll try to show success alert first. Write down this line. ``` [alert showSuccess:@"Alert Success" subTitle:@"This is a your success info to user." closeButtonTitle:@"Done" duration:0.0f]; ``` We have some parameters above that consist of: - ```showSuccess``` this is a kind of alert type and also provide we to write message to the title - ```subTitle``` this is the detail of the alert we give to the users. - ```closeButtonTitle``` this is the text of our close button - ```duration``` specify how long the popup is showing to the screen. If we are using 0.0f, then the popup will never disappear like we write above. When you run the code, you will see the result like this  Okay, let's continue with the showError. It's almost identical except the showError method. Write these lines to show error. ``` [alert showError:@"Alert Error" subTitle:@"This is a more descriptive error text." closeButtonTitle:@"OK" duration:0.0f]; ``` And you will see the result like this.  The same goes to showWarning method, write this code ``` [alert showWarning:@"Hello Warning" subTitle:@"This is a more descriptive warning text." closeButtonTitle:@"Done" duration:0.0f]; ``` Run it, and you will see this.  We can also custom the alert using custom image and color using showCustom method with some additional parameters like this. ``` [alert showCustom:[UIImage imageNamed:@"git"] color:[UIColor grayColor] title:@"Custom" subTitle:@"Add a custom icon and color for your own type of alert!" closeButtonTitle:@"OK" duration:0.0f]; ``` The result will be like this  You can try another type by exploring the method of each alert type. And if we combine some alert type like these lines. ``` [alert showSuccess:@"Alert Success" subTitle:@"This is a your success info to user." closeButtonTitle:@"Done" duration:0.0f]; [alert showError:@"Alert Error" subTitle:@"This is a more descriptive error text." closeButtonTitle:@"OK" duration:0.0f]; [alert showNotice:@"Hello Notice" subTitle:@"This is a more descriptive notice text." closeButtonTitle:@"Done" duration:0.0f]; // Notice [alert showWarning:@"Hello Warning" subTitle:@"This is a more descriptive warning text." closeButtonTitle:@"Done" duration:0.0f]; // Warning [alert showInfo:@"Hello Info" subTitle:@"This is a more descriptive info text." closeButtonTitle:@"Done" duration:0.0f]; // Info [alert showEdit:@"Hello Edit" subTitle:@"This is a more descriptive info text with a edit textbox" closeButtonTitle:@"Done" duration:0.0f]; // Edit [alert showCustom:[UIImage imageNamed:@"git"] color:[UIColor grayColor] title:@"Custom" subTitle:@"Add a custom icon and color for your own type of alert!" closeButtonTitle:@"OK" duration:0.0f]; [alert showWaiting:@"Waiting..." subTitle:@"Blah de blah de blah, blah. Blah de blah de" closeButtonTitle:nil duration:0.0f]; [alert showQuestion:@"Question?" subTitle:@"SINI" closeButtonTitle:@"Dismiss" duration:0.0f]; ``` we'll see some stackup alert like this.  The next thing we are going to do is using the SCLAlertViewBuilder. This is the builder version to initialize and styling the builder. Write down this code. ``` SCLAlertViewBuilder *builder = [SCLAlertViewBuilder new] .addButtonWithActionBlock(@"Send", ^{ /*work here*/ }); SCLAlertViewShowBuilder *showBuilder = [SCLAlertViewShowBuilder new] .style(SCLAlertViewStyleWarning) .title(@"Title") .subTitle(@"Subtitle") .duration(0); [showBuilder showAlertView:builder.alertView onViewController:self]; ``` We first initialize the builder, and then ```addButtonWithActionBlock``` to be able to pass callback function when the action button is tapped. Then, we initialize the ```SCLAlertViewShowBuilder``` and give it warning style, give title, subtitle and duration. Then we show it using ```[showBuilder showAlertView:builder.alertView onViewController:self];```. When you run the app, you will see something like this.  If you tap the send button the callback function will be called. Okay, that's all about this alert tutorial. Thanks for reading this guide. #### Curriculum - https://utopian.io/utopian-io/@andrixyz/creating-floating-action-button-in-ios-development-like-in-path-app - https://utopian.io/utopian-io/@andrixyz/working-with-realm-to-create-a-simple-to-do-list-ios-app-development <br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@andrixyz/how-to-display-pop-up-in-ios-development-using-sclalertview">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>
author | andrixyz | ||||||
---|---|---|---|---|---|---|---|
permlink | how-to-display-pop-up-in-ios-development-using-sclalertview | ||||||
category | utopian-io | ||||||
json_metadata | {"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":24516405,"name":"SCLAlertView","full_name":"dogo/SCLAlertView","html_url":"https://github.com/dogo/SCLAlertView","fork":false,"owner":{"login":"dogo"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","sclalertview","ios","tutorial","objective-c"],"users":["interface","end","andrixyz"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1517163590/waktc7ae7dxdqox17r7b.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517123791/wvmpja1yjktqgpvxb3sl.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124476/klslbd8lkvdhmuvdj0u3.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124757/w12qyigu4mtza48oggrc.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124995/nogv4oxp2ss1gq2vtwf8.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125106/n45dnvxe0dguw3n9wopt.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125482/y7kuwwmfsvwg7osc7lqx.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125780/u8qgqcqmxp2wh6dyw1kf.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1517163590/waktc7ae7dxdqox17r7b.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517123791/wvmpja1yjktqgpvxb3sl.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124476/klslbd8lkvdhmuvdj0u3.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124757/w12qyigu4mtza48oggrc.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124995/nogv4oxp2ss1gq2vtwf8.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125106/n45dnvxe0dguw3n9wopt.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125482/y7kuwwmfsvwg7osc7lqx.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125780/u8qgqcqmxp2wh6dyw1kf.png"],"moderator":{"account":"redart","time":"2018-01-30T21:24:40.265Z","reviewed":true,"pending":false,"flagged":false}} | ||||||
created | 2018-01-28 18:18:57 | ||||||
last_update | 2018-01-30 21:24:39 | ||||||
depth | 0 | ||||||
children | 3 | ||||||
last_payout | 2018-02-04 18:18:57 | ||||||
cashout_time | 1969-12-31 23:59:59 | ||||||
total_payout_value | 13.625 HBD | ||||||
curator_payout_value | 5.676 HBD | ||||||
pending_payout_value | 0.000 HBD | ||||||
promoted | 0.000 HBD | ||||||
body_length | 7,573 | ||||||
author_reputation | 1,144,619,513,316 | ||||||
root_title | "How to display pop up in iOS development using SCLAlertView" | ||||||
beneficiaries |
| ||||||
max_accepted_payout | 1,000,000.000 HBD | ||||||
percent_hbd | 10,000 | ||||||
post_id | 33,068,429 | ||||||
net_rshares | 2,958,303,491,301 | ||||||
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
bobdos | 0 | 2,209,107,276 | 5% | ||
utopian-io | 0 | 2,948,920,638,587 | 2.17% | ||
steemitstats | 0 | 1,856,642,306 | 5% | ||
riyo.s94 | 0 | 623,443,406 | 100% | ||
murez-nst | 0 | 872,073,263 | 100% | ||
kennethz | 0 | 822,557,706 | 100% | ||
steven.tjg | 0 | 616,483,972 | 100% | ||
anharismail | 0 | 511,608,914 | 100% | ||
claraquarius | 0 | 1,870,935,871 | 5% | ||
zernard | 0 | 0 | 100% |
Thank you for the contribution. It has been approved. You can contact us on [Discord](https://discord.gg/uTyJkNm). **[[utopian-moderator]](https://utopian.io/moderators)**
author | redart |
---|---|
permlink | re-andrixyz-how-to-display-pop-up-in-ios-development-using-sclalertview-20180130t212455376z |
category | utopian-io |
json_metadata | {"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"} |
created | 2018-01-30 21:24:57 |
last_update | 2018-01-30 21:24:57 |
depth | 1 |
children | 0 |
last_payout | 2018-02-06 21:24:57 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 172 |
author_reputation | 6,723,529,098,076 |
root_title | "How to display pop up in iOS development using SCLAlertView" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 33,668,520 |
net_rshares | 0 |
@andrixyz, Contribution to open source project, I like you and upvote.
author | steemitstats |
---|---|
permlink | 20180128t182034560z-post |
category | utopian-io |
json_metadata | {"tags":["utopian-io"]} |
created | 2018-01-28 18:19:33 |
last_update | 2018-01-28 18:19:33 |
depth | 1 |
children | 0 |
last_payout | 2018-02-04 18:19:33 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 70 |
author_reputation | 351,882,871,185 |
root_title | "How to display pop up in iOS development using SCLAlertView" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 33,068,574 |
net_rshares | 0 |
### Hey @andrixyz I am @utopian-io. I have just upvoted you! #### Achievements - You have less than 500 followers. Just gave you a gift to help you succeed! - Seems like you contribute quite often. AMAZING! #### Suggestions - Contribute more often to get higher and higher rewards. I wish to see you often! - Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck! #### Get Noticed! - Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions! #### Community-Driven Witness! I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER! - <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a> - <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a> - Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a> [](https://steemit.com/~witnesses) **Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
author | utopian-io |
---|---|
permlink | re-andrixyz-how-to-display-pop-up-in-ios-development-using-sclalertview-20180131t155554666z |
category | utopian-io |
json_metadata | {"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"} |
created | 2018-01-31 15:55:54 |
last_update | 2018-01-31 15:55:54 |
depth | 1 |
children | 0 |
last_payout | 2018-02-07 15:55:54 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 1,506 |
author_reputation | 152,955,367,999,756 |
root_title | "How to display pop up in iOS development using SCLAlertView" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 33,890,713 |
net_rshares | 0 |