Swift-サードパーティのアラートポップアップボックスコンポーネント（SCLAlertView）の使用
Swift Use Third Party Alert Pop Up Box Component
アラートプロンプトボックス（メッセージプロンプトボックス）は
アプリ 開発には絶対に欠かせないものです。プロンプト情報を表示するだけでなく、インタラクティブ機能を備えた選択ダイアログボックスや入力ダイアログボックスとして使用されることもあります。通常は使用します
ios 付属しています
UIAlertController 達成するコンポーネント。でも
UIAlertController 使い方は簡単ですが、スタイルや機能に限りがあります。この記事では、優れたサードパーティを紹介します
アラート コンポーネント：
SCLAlertView 。
1つは、インストールと構成です
（1）から
GitHub 最新のコードをダウンロードする：
https://github.com/vikmeup/SCLAlertView-Swift （2）ダウンロードしたソースパッケージ内
SCLAlertView.xcodeproj プロジェクトにドラッグアンドドロップします。
（3）エンジニアリング->
一般 ->
埋め込まれたバイナリ アイテム、置く
SCLAlertView.framework に追加します。
（4）最後に、
SCLAlertView 場所
インポート 入ってください。
2.基本的な使用法
1.簡単な使用例
（1）効果画像ボタンをクリックすると、共通のメッセージプロンプトボックスがページにポップアップ表示されます。
（2）サンプルコード
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import UIKit import SCLAlertView class ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()}@IBAction func showInfo(_ sender: Any) {//Pop up a general message prompt boxSCLAlertView().showInfo('This is the title', subTitle: 'This is the body content of the general message prompt box.') }override func didReceiveMemoryWarning() {super.didReceiveMemoryWarning()} } |
2.組み込みのメッセージボックススタイル
上記で使用した一般的なメッセージプロンプトボックスに加えて、
SCLAlertView デフォルトで次のように提供されます
7 プロンプトボックスにはさまざまな種類があり（それぞれさまざまな色とアイコンで表されます）、さまざまなシーンや通知の種類に応じて対応するスタイルを選択できます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //Common message prompt box SCLAlertView().showInfo('This is the title', subTitle: 'This is the body content of the general message prompt box.') //Edit the message prompt box SCLAlertView().showEdit('This is the title', subTitle: 'This is to edit the text of the message prompt box.') //Notification message prompt box SCLAlertView().showNotice('This is the title', subTitle: 'This is the body content of the notification message prompt box.') //Warning prompt box SCLAlertView().showWarning('This is the title', subTitle: 'This is the text of the warning box.') //Error prompt box SCLAlertView().showError('This is the title', subTitle: 'This is the text of the warning box.')//Success prompt box SCLAlertView().showSuccess('This is the title', subTitle: 'This is the text of the success prompt box.')//Waiting for the prompt box SCLAlertView().showWait('This is the title', subTitle: 'This is waiting for the text of the prompt box.') |
レンダリングは次のとおりです。
3.閉じるボタンのテキストを変更します
デフォルトでは、メッセージボックスの下にある[完了（閉じる）]ボタンのタイトルは 'です。
完了 '、メソッドを使用できます
3 パラメーター （
closeButtonTitle ）その他に変更。
| 1 2 3 | //Success prompt box SCLAlertView().showSuccess('This is the title', subTitle: 'This is the text of the success prompt box.',closeButtonTitle: 'determine') |
レンダリングは次のとおりです。
4.元のメッセージのポップアップ方法（showTitle）
どんなに
showInfo（） はい、
showError（） 幸いなことに、彼らは実際に内部的に呼び出します
showTitle（） 方法。さまざまな写真や色をその中に渡すだけで、さまざまなスタイルを表示できます。
（1）直接使用することもできます
showTitle（） カスタムポップアップボックスを表示します。コードは次のとおりです。
| 1 2 3 4 5 | SCLAlertView().showTitle('Mail sent successfully', subTitle: 'We will get back to you within 10 working days.',timeout: nil, completeText: 'determine' , style: .info,colorStyle: 0xffae3e, colorTextButton: 0xFFFFFF,circleIconImage: UIImage(named: 'email.png'),animationStyle: .topToBottom) |
（2）レンダリングは次のとおりです。
5.プロンプトボックスのアニメーション効果
上記のサンプルコードから、
AnimationStyle パラメータ。これは、プロンプトボックスのアニメーション形式を制御するために使用されます。デフォルトは上から下ですが、次のように他の値に変更できます：
- noAnimation ：アニメーション効果なし
- 上から下へ ：上から下に表示
- bottomToTop ：下から上に表示
- 左から右へ ：左から右に表示
- 右から左へ ：右から左に表示されます
6.プロンプトボックスの内容を動的に変更します
プロンプトボックスが表示されたら、それを使用して戻ることができます
SCLAlertViewResponder プロンプトボックス内のタイトルとテキストコンテンツを変更するオブジェクト。
| 1 2 3 4 5 6 | //Display waiting prompt box let alertViewResponder = SCLAlertView().showWait('This is the title', subTitle: 'This is the text content.')//Modify the content of the prompt box alertViewResponder.setTitle('Edit Title') alertViewResponder.setSubTitle('Edit body content') |
7.コードを使用してプロンプトボックスを閉じます
プロンプトボックスがポップアップした後。ただし、プロンプトボックスのボタンをクリックしてプロンプトボックスを閉じる場合を除きます。コードで返すこともできます
SCLAlertViewResponder オブジェクト
閉じる（） それを閉じる方法。
| 1 2 3 4 5 | //Display waiting prompt box let alertViewResponder = SCLAlertView().showWait('This is the title', subTitle: 'This is the text content.')//Close the prompt box alertViewResponder.close() |
3つの高度な使用法
1.フォントスタイルを変更します
以下では、カスタムプロンプトボックスコンポーネントを実装し、外観スタイルをカスタマイズして使用します（タイトルテキストを拡大し、本文テキストを縮小し、ボタンテキストを太字にします）。
| 1 2 3 4 5 6 7 8 9 10 11 12 | //Customize the prompt box style let appearance = SCLAlertView.SCLAppearance(kTitleFont: UIFont(name: 'HelveticaNeue', size: 22)!, //Title text fontkTextFont: UIFont(name: 'HelveticaNeue', size: 12)!, //Body text fontkButtonFont: UIFont(name: 'HelveticaNeue-Bold', size: 14)! //Button text font ) //Use a custom style prompt box let alert = SCLAlertView(appearance: appearance)//Show prompt box alert.showInfo('This is the title', subTitle: 'This is the body content of the general message prompt box.') |
2.閉じるボタンを非表示にします
| 1 2 3 4 5 6 7 8 9 10 | //Customize the prompt box style let appearance = SCLAlertView.SCLAppearance(showCloseButton: false //Do not display the close button ) //Use a custom style prompt box let alert = SCLAlertView(appearance: appearance)//Show prompt box alert.showInfo('This is the title', subTitle: 'This is the body content of the general message prompt box.') |
3.しばらく待って、プロンプトボックスを自動的に閉じます
これは、多くの場合、上の非表示の閉じるボタンと組み合わせて使用されます。たとえば、操作が成功したことをユーザーに確認しますが、ユーザーがプロンプトボックスを手動で閉じる必要はありません。表示されます
3 秒は自動的に消えます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | //Customize the prompt box style let appearance = SCLAlertView.SCLAppearance(showCloseButton: false //Do not display the close button ) //Use a custom style prompt box let alert = SCLAlertView(appearance: appearance) //Display the prompt box (closed after 3 seconds) let timeout = SCLAlertView.SCLTimeoutConfiguration(timeoutValue: 3) {print('The prompt box is automatically closed') } alert.showInfo('This is the title', subTitle: 'This is the body content of the general message prompt box.', timeout: timeout) |
4.複数のボタンを追加します
プロンプトボックスに閉じるボタンがあるだけでは不十分な場合があり、ユーザーがクリックしたボタンに応じてプログラムが異なるビジネスロジックを実行できるように、1つ以上のボタンを追加する必要がある場合があります。
| 1 2 3 4 5 6 7 8 9 10 11 12 | let alertView = SCLAlertView() alertView.addButton('First button', target:self, selector:#selector(firstButtonTapped)) alertView.addButton('Second button') {print('Second button click') } alertView.showSuccess('This is the title', subTitle: 'Multiple buttons added below', closeButtonTitle: 'cancel')//The first button click event corresponds func firstButtonTapped() {print('The first button click') } |
5.頭のアイコンを非表示にします
デフォルトでは、プロンプトボックスの先頭に目立つ丸いアイコンが表示されます。非表示にすることができます。
| 1 2 3 4 5 6 7 8 | //Customize the prompt box style let appearance = SCLAlertView.SCLAppearance(showCircularIcon: false //Hide the head icon ) //Use a custom style prompt box let alertView = SCLAlertView(appearance: appearance) alertView.showSuccess('This is the title', subTitle: 'This is the text of the tooltip.') |
6.頭のアイコンを変更します
次に、プロンプトボックスの先頭にあるアイコンを電子メールの画像に置き換えます。
| 1 2 3 | let alertViewIcon = UIImage(named: 'email.png') SCLAlertView().showSuccess('This is the title', subTitle: 'This is the text of the tooltip.',circleIconImage: alertViewIcon) |
7.テキスト入力ボックスを追加します
次の例では、プロンプトボックス内に2つのテキスト入力ボックスを追加して、ユーザー名とパスワードをそれぞれ入力します。 'をクリックすると
決定する 'ボタンをクリックすると、コンテンツがコンソールに出力されます。
| 1 2 3 4 5 6 7 8 9 10 11 12 | let alert = SCLAlertView() //Add the first input box let textField1 = alert.addTextField('username') //Add a second input box let textField2 = alert.addTextField('password') textField2.isSecureTextEntry = true alert.addButton('determine') {print(textField1.text!, textField2.text!) } alert.showEdit('log in', subTitle: 'Please enter your username and password', closeButtonTitle: 'cancel') |
8.カスタムビューを追加します
プロンプトボックスにボタンとテキスト入力ボックスを追加するだけでなく、任意のカスタムを作成することもできます
見る プロンプトボックスの内容として表示します。次の例では、プロンプトボックス内に日付選択コントロールを表示し、[']をクリックします。
決定する 'ボタンは、選択した日付もコンソールに出力します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | let alert = SCLAlertView() //Create date picker let datePicker = UIDatePicker(frame: CGRect(x:0, y:0, width:236, height:150)) //Set the date picker area to Chinese, then the picker date is displayed in Chinese datePicker.locale = Locale(identifier: 'zh_CN') //Only date selection datePicker.datePickerMode = .date //Use the date picker as a custom view of the prompt box alert.customSubview = datePicker //Add OK button alert.addButton('determine', backgroundColor: UIColor.brown, textColor: UIColor.yellow) {let formatter = DateFormatter()formatter.dateFormat = 'yyyy MM month dd day'print(formatter.string(from: datePicker.date)) } alert.showInfo('Please select a date', subTitle: '', closeButtonTitle: 'cancel') |
4、すべてのカスタムスタイル
前のセクションから、
SCLAlertView.SCLAppearance 構成プロンプトボックスの各要素のスタイルをカスタマイズできます。もちろん
SCLAlertView.SCLAppearance 構成できる属性はこれらよりはるかに多く、すべての属性を以下にリストします。使用することを選択できます。
1、ボタン（ボタン）関連
| 1 2 3 4 | kButtonFont: UIFont //Button font buttonCornerRadius : CGFloat //Button rounded corners showCloseButton: Bool //Whether to display the close button kButtonHeight: CGFloat //Button height |
2.アイコン（サークル画像）関連
| 1 2 3 4 5 | showCircularIcon: Bool //Whether to display the icon kCircleTopPosition: CGFloat //Circle head position kCircleBackgroundTopPosition: CGFloat //Circle background head position kCircleHeight: CGFloat //Circular height size kCircleIconHeight: CGFloat //Icon height size |
3.テキスト（テキスト）関連
| 1 2 3 4 5 6 7 | kTitleFont: UIFont //Title text font kTitleTop:CGFloat //Title text position kTitleHeight:CGFloat //Title text height kTextFont: UIFont //Content text font kTextHeight: CGFloat //Content text height kTextFieldHeight: CGFloat //Text input box height kTextViewdHeight: CGFloat //Text view height |
4.プロンプトボックス全体が関連しています
| 1 2 3 4 5 6 7 | kDefaultShadowOpacity: CGFloat //The background transparency of the shadow mask behind the prompt box is displayed kWindowWidth: CGFloat //The width of the prompt box kWindowHeight: CGFloat //Height of prompt box shouldAutoDismiss: Bool // Whether to automatically close the prompt box after clicking the button fieldCornerRadius : CGFloat //Rounded corners of text input box contentViewCornerRadius : CGFloat //Content view rounded corners disableTapGesture: Bool // Whether to disable gestures (if we add a tableview as a subview, we can set this property to true) |
元のテキストは次のとおりです。 www.hangge.com 元のリンクを保持してください： http://www.hangge.com/blog/cache/detail_1672.html
