create account

How to display pop up in iOS development using SCLAlertView by andrixyz

View this thread on: hive.blogpeakd.comecency.com
· @andrixyz · (edited)
$19.30
How to display pop up in iOS development using SCLAlertView
![Screen Shot 2018-01-28 at 2.41.15 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517163590/waktc7ae7dxdqox17r7b.png)

#### 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.
![Screen Shot 2018-01-26 at 6.23.33 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517123791/wvmpja1yjktqgpvxb3sl.png)
<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
![Screen Shot 2018-01-28 at 2.27.24 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124476/klslbd8lkvdhmuvdj0u3.png)
 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.
![Screen Shot 2018-01-28 at 2.32.20 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124757/w12qyigu4mtza48oggrc.png)
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.
![Screen Shot 2018-01-28 at 2.36.16 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517124995/nogv4oxp2ss1gq2vtwf8.png)
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
![Screen Shot 2018-01-28 at 2.37.55 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125106/n45dnvxe0dguw3n9wopt.png)
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.
![Screen Shot 2018-01-28 at 2.41.15 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125482/y7kuwwmfsvwg7osc7lqx.png)
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. 
![Screen Shot 2018-01-28 at 2.49.16 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517125780/u8qgqcqmxp2wh6dyw1kf.png)
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/>
👍  , , , , , , , , ,
properties (23)
authorandrixyz
permlinkhow-to-display-pop-up-in-ios-development-using-sclalertview
categoryutopian-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}}
created2018-01-28 18:18:57
last_update2018-01-30 21:24:39
depth0
children3
last_payout2018-02-04 18:18:57
cashout_time1969-12-31 23:59:59
total_payout_value13.625 HBD
curator_payout_value5.676 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,573
author_reputation1,144,619,513,316
root_title"How to display pop up in iOS development using SCLAlertView"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,068,429
net_rshares2,958,303,491,301
author_curate_reward""
vote details (10)
@redart ·
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)**
properties (22)
authorredart
permlinkre-andrixyz-how-to-display-pop-up-in-ios-development-using-sclalertview-20180130t212455376z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-30 21:24:57
last_update2018-01-30 21:24:57
depth1
children0
last_payout2018-02-06 21:24:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation6,723,529,098,076
root_title"How to display pop up in iOS development using SCLAlertView"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,668,520
net_rshares0
@steemitstats ·
@andrixyz, Contribution to open source project, I like you and upvote.
properties (22)
authorsteemitstats
permlink20180128t182034560z-post
categoryutopian-io
json_metadata{"tags":["utopian-io"]}
created2018-01-28 18:19:33
last_update2018-01-28 18:19:33
depth1
children0
last_payout2018-02-04 18:19:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length70
author_reputation351,882,871,185
root_title"How to display pop up in iOS development using SCLAlertView"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,068,574
net_rshares0
@utopian-io ·
### 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>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](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**
properties (22)
authorutopian-io
permlinkre-andrixyz-how-to-display-pop-up-in-ios-development-using-sclalertview-20180131t155554666z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-31 15:55:54
last_update2018-01-31 15:55:54
depth1
children0
last_payout2018-02-07 15:55:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,506
author_reputation152,955,367,999,756
root_title"How to display pop up in iOS development using SCLAlertView"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,890,713
net_rshares0