FCAlertView 1.4.0

FCAlertView 1.4.0

测试已测试
语言语言 Obj-CObjective C
许可证 MIT
发布最新发布2017年8月

Nima Tahami 维护。



FCAlertView 是一个扁平可定制的 AlertView,使用 Objective C 编写。

[![CI Status](http://img.shields.io/travis/Nima Tahami/FCAlertView.svg?style=flat)](https://travis-ci.org/Nima Tahami/FCAlertView)

Logo

BackgroundImage BackgroundImage BackgroundImage BackgroundImage BackgroundImage BackgroundImage

快速链接

1. Swift
2. 安装
3. 示例应用
4. 添加 FCAlertView
5. 基础定制
6. 额外定制
7. 新定制(V1.1.0 之后)
8. 动画
9. 添加文本字段
10. 按钮操作
11. 其他辅助方法

Swift

有关 FCAlertView 的 Swift 版本,请点击此处。感谢 Kris Penney 编写 Swift 库。

安装

手动安装

克隆或下载此仓库。然后只需将文件夹 FCAlertView 拖动到你的 Xcode 项目中。请确保拖动整个文件夹,这包括一些 alert 类型所需的资产。

示例

FCAlertView附带示例应用,您可以使用该应用尝试以下所有定制。在使用示例应用之前,建议您先通读所有文档。要使用示例应用,请克隆或下载 FCAlertView,打开并运行 Example/FCAlertView.xcworkspace

添加 FCAlertView

首先,将以下内容添加到您的 View Controller 中:

#import "FCAlertView.h"

展示 FCAlertView

FCAlertView *alert = [[FCAlertView alloc] init];
	
[alert showAlertInView:self
             withTitle:@"Alert Title"
          withSubtitle:@"This is your alert's subtitle. Keep it short and concise. 😜👌"
       withCustomImage:nil
   withDoneButtonTitle:nil
            andButtons:nil];

展示选项

您还可以使用以下方式展示您的 FCAlertView:

选择特定的 UIWindow

[alert showAlertInWidnow:self.view.window
             withTitle:@"Alert Title"
          withSubtitle:@"This is your alert's subtitle. Keep it short and concise. 😜👌"
       withCustomImage:nil
   withDoneButtonTitle:nil
            andButtons:nil];

使用 UIApplication Window

此方法还将您的 alert 展现在最前面,以确保键盘或其他元素不会遮挡它。

[alert showAlertWithTitle:@"Alert Title"
          withSubtitle:@"This is your alert's subtitle. Keep it short and concise. 😜👌"
       withCustomImage:nil
   withDoneButtonTitle:nil
            andButtons:nil];

基础定制

  • 标题 (NSString): 您可以保留标题为 nil 或赋予它一个 NSString.

  • 副标题 (NSString): FCAlertView 总是要求提供一个副标题,即使您只想输入几个字,也请在此处添加,而不是在标题中,并将标题保留为 nil请看这个截图作为示例。

  • 自定义图片 (UIImage): 您可以保留这个图片为 nil 或赋予它一个将在提醒框顶部显示的 UIImage请看这个截图作为示例。

  • 完成按钮标题 (NSString): 您可以将其保留为 nil 以显示“确定”作为关闭提醒框的按钮,或者赋予它一个 NSString

  • 按钮 (NSStrings 的 NSArray): 如果您想在提醒框中添加按钮,只需在此处添加一个包含 1 到 2 个按钮标题的 NSString 数组,超过 2 个将被忽略,因为这是您可以添加的最大自定义按钮数量(除完成按钮外)。请向下阅读有关按钮和操作的更多信息。

使用操作块添加按钮

或者,您可以使用操作块这样添加按钮到 FCAlertView

[alert addButton:@"Button" withActionBlock:^{
    // Put your action here
}];

完成按钮的操作块

[alert doneActionBlock:^{ 
    // Put your action here
}];

额外定制

本节包括所有您可以用来定制提醒框的细微细节,这使得 FCAlertView 非常可定制。或者,您可以选择保留其现状并享受其简单性。

色彩方案

默认情况下,FCAlertView 不包含色彩方案,与 UIAlertView 类似,但您可以通过添加以下行来添加一个:

alert.colorScheme = [UIColor colorWithRed:150.0f/255.0f green:150.0f/255.0f blue:150.0f/255.0f alpha:1.0];

如果您已向您的提醒框添加了自定义图片,它将默认使用色彩方案进行着色。要防止这种情况发生,请添加:

alert.avoidCustomImageTint = YES; // Off by default

FCAlertView 还提供了一套预制的颜色供您使用

alt text

#####感谢 flatuicolors.com 为我们提供美丽的平色调板

只需选择您想用于 AlertView 的颜色,并添加

alert.colorScheme = alert.flatBlue; // Replace "Blue" with your preferred color from the image above

深色模式

使用此行为您的 FCAlert 应用上一款美丽的深色主题:

alert.darkTheme = YES;

标题和副标题样式

通过添加以下内容更改标题颜色:

alert.titleColor = alertView.flatPurple;

通过添加以下内容更改副标题颜色:

alert.subTitleColor = alertView.flatBlue;

通过添加以下内容更改标题字体:

alert.titleFont = [UIFont fontWithName:@"Avenir" size:30.0];

通过添加以下内容更改副标题字体:

alert.subtitleFont = [UIFont fontWithName:@"Avenir" size:15.0];

您也可以在标题或副标题中使用富文本格式化的文本!

NSString *text = @"My Alert Title";

NSDictionary *attrib = @{
                         NSForegroundColorAttributeName: [UIColor blackColor],
                         NSFontAttributeName: [UIFont systemFontOfSize:18.0 weight:UIFontWeightRegular]
                         };
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:text attributes:attrib];

NSRange nameRange = [text rangeOfString:@"Title"];
UIFont *italics = [UIFont systemFontOfSize:18.0 weight:UIFontWeightHeavy];
[str setAttributes:@{NSFontAttributeName:italics} range:nameRange];
// Use the string as a title!
[alert showAlertWithAttributedTitle:str withSubtitle:@"This is my subtitle!" withCustomImage:_alertImage withDoneButtonTitle:nil andButtons:self.arrayOfButtonTitles];
// Or use it as a subtitle!
[alert showAlertWithTitle:@"My Title" withAttributedSubtitle:str withCustomImage:_alertImage withDoneButtonTitle:nil andButtons:self.arrayOfButtonTitles];
// Or use it as both!
[alert showAlertWithAttributedTitle:str withAttributedSubtitle:str withCustomImage:_alertImage withDoneButtonTitle:nil andButtons:self.arrayOfButtonTitles];

按钮颜色

更改按钮的标题颜色:

alert.firstButtonTitleColor = [UIColor blueColor];
alert.secondButtonTitleColor = [UIColor blueColor];

更改按钮的背景颜色:

alert.firstButtonBackgroundColor = [UIColor whiteColor];
alert.secondButtonBackgroundColor = [UIColor blackColor];

圆角

使用以下内容根据需要更改 FCAlertView 的圆角:

alert.cornerRadius = 4; // Replace 4 with your desired corner radius amount (Set to 0.1 if you don't want rounding)

提醒类型

FCAlertView 伴随 6 种预设的提醒类型:成功、警告、警告、进度、带心跳的评分、带星号的评分,只需在初始化 FCAlertView 后添加一行。

成功

[alert makeAlertTypeSuccess];

警告

[alert makeAlertTypeCaution];

警告

[alert makeAlertTypeWarning];

进度

[alert makeAlertTypeProgress];

使用爱心进行评分

将您的警告转换为评分警告,允许用户使用爱心进行评分。

[alert makeAlertTypeRateHearts:^(NSInteger rating) {
    NSLog(@"Your Hearts Rating: %ld", (long)rating); // Use the Rating as you'd like
}];

使用星级进行评分

将您的警告转换为评分警告,允许用户使用星级进行评分。

[alert makeAlertTypeRateStars:^(NSInteger rating) {
    NSLog(@"Your Stars Rating: %ld", (long)rating); // Use the Rating as you'd like
}];

取消显示 FCAlertView

有多种方法可以取消显示 FCAlertView

外部触摸关闭

当用户在警告之外地方点击时,您可以添加以下行来关闭警告

alert.dismissOnOutsideTouch = YES;

自动关闭警告

在 AlertView 显示后经过一定时间后,可以通过添加以下行来取消显示 AlertView

alert.autoHideSeconds = 5; // Replace 5 with the number of Seconds you'd like the view to appear for before dismissing itself

完成按钮或任何自定义按钮

所有按钮,包括完成/取消按钮,均会使 FCAlertView 取消显示。

手动取消显示

如果您想要手动取消显示 AlertView,只需将以下行添加到需要的位置即可

[alert dismissAlertView];

隐藏完成/取消按钮

如果您想在不显示按钮的情况下显示 AlertView(仅用于显示通知或对某事的批准)或者您希望所有按钮都是您自己添加的自定义按钮。只需隐藏完成按钮,通过添加以下行实现

alert.hideDoneButton = YES;

隐藏所有按钮

如果您想要简单地从警告中隐藏所有按钮,可以通过添加以下行实现

alert.hideAllButtons = YES;

请注意,隐藏完成/取消按钮和/或隐藏所有按钮会触发安全关闭机制,强制外部触摸关闭始终开启。

新定制(V1.1.0 之后)

背景模糊

简单地在 AlertView 后面的窗口/视图的背景上添加模糊效果

alert.blurBackground = YES;

圆形按钮

如果您希望按钮脱离警告的框并且看起来更圆,请使用

alert.detachButtons = YES;

完整圆形自定义图片

如果您希望您的警告自定义图片为完整的圆形图像宽度,请使用

alert.fullCircleCustomImage = YES;

自定义图片缩放

如果您希望您的警告自定义图片缩放到特定的尺寸,请使用

alert.customImageScale = 1.5; // Change 1.5 to how big or small you want to scale your custom alert image ranged from 0 to 2

隐藏分隔线

要隐藏在警告的“完成”按钮和自定义按钮之间出现的分隔线,请添加以下内容:

alert.hideSeparatorLineView = YES;

声音

打开警告时播放音频,只需传入您的音频文件名即可

[alert setAlertSoundWithFileName:@"Ding.mp3"];

注意: 要使此功能正常工作,请将以下框架添加到您的项目中: AVFoundationAudioToolbox

动画

自然弹跳动画

为警告视图添加更多自然界动画,例如响应型弹跳按钮等。请添加以下行

alert.bounceAnimations = YES;

将警告动画过渡到视图中

在呈现警告时,让警告从不同的方向动画进入,而不仅仅是默认的显示动画。

alert.animateAlertInFromTop = YES; // Change "Top" to "Bottom", "Left", or "Right" as you desire

将警告动画移出视图

在取消警告时,让警告向不同的方向动画移出,而不仅仅是默认的消失动画。

alert.animateAlertOutToTop = YES; // Change "Top" to "Bottom", "Left", or "Right" as you desire

添加文本字段

简单地将文本字段(最多4个字段)添加到您的警告中,为每个新字段添加此行,并在按下任何AlertView按钮时获取返回的文本

[alert addTextFieldWithPlaceholder:@"Email Address" andTextReturnBlock:^(NSString *text) {
    NSLog(@"The Email Address is: %@", text); // Do what you'd like with the text returned from the field
}];

按钮操作

为了检测按钮上的操作,请执行以下操作

首先将 FCAlertViewDelegate 添加到视图控制器的 @interface 中,如下所示

#import <UIKit/UIKit.h>
#import "FCAlertView.h"

@interface ViewController : UIViewController <FCAlertViewDelegate>

@end

现在添加您的 FCAlertView,其中需要呈现按钮

	FCAlertView *alert = [[FCAlertView alloc] init];
	
	alert.delegate = self;

    [alert showAlertInView:self
                 withTitle:@"Alert Title"
              withSubtitle:@"This is your alert's subtitle. Keep it short and concise. 😜👌"
           withCustomImage:nil
       withDoneButtonTitle:nil
                andButtons:@[@"Button 1", @"Button 2"]]; // Set your button titles here

在添加您的 FCAlertView 后,您可以通过添加此方法到您的类中检测按钮触摸

- (void) FCAlertView:(FCAlertView *)alertView clickedButtonIndex:(NSInteger)index buttonTitle:(NSString *)title {
    if ([title isEqualToString:@"Button 1"]) { // Change "Button 1" to the title of your first button
        // Perform Action for Button 1
    }
    
    if ([title isEqualToString:@"Button 2"]) {
        // Perform Action for Button 2
    }
}

完成按钮方法

如果您还想检测完成/取消按钮的按钮触摸,请在您的类中添加此方法

- (void)FCAlertDoneButtonClicked:(FCAlertView *)alertView {
	// Done Button was Pressed, Perform the Action you'd like here.
}

其他辅助方法

确保将 FCAlertViewDelegate 添加到视图控制器的 @interface 中,如下所示

#import <UIKit/UIKit.h>
#import "FCAlertView.h"

@interface ViewController : UIViewController <FCAlertViewDelegate>

@end

以及设置您的 FCAlertView 的代理,如下所示

  FCAlertView *alert = [[FCAlertView alloc] init];
  alert.delegate = self;

检测 FCAlertView 被取消时的操作

- (void)FCAlertViewDismissed:(FCAlertView *)alertView {
	// Your FCAlertView was Dismissed, Perform the Action you'd like here.
}

检测 FCAlertView 即将呈现时的操作

- (void)FCAlertViewWillAppear:(FCAlertView *)alertView {	
	// Your FCAlertView will be Presented, Perform the Action you'd like here.
}

未来的定制

FCAlertView 是一个持续进行的项目,目标是成为最常用的 iOS 自定义 AlertView。改进和更改正在进行中,以下是与之相关的即将到来的功能

  • Swift 兼容 ✓
  • 添加文本字段 ✓
  • 模糊背景 ✓
  • 框架定制 ✓
  • 警告声音 ✓
  • 横幅定向 ✓
  • 更多自定义动画 ✓
  • 更多类型的警告(包括进度类型)✓
  • iPad 兼容警告(已在所有设备上进行测试)✓
  • 改进按钮高亮显示和定制✓
  • 缺少什么?创建一个拉取请求或带有您的建议的问题。

关于 FCAlertView

FCAlertView 是一个完全可定制的精美 AlertView。我设计 FCAlertView 是因为我一直想要能够更改默认 UIAlertView 的不同属性。在设计上,FCAlertView 看起来类似于默认的 AlertView,然而,当您开始根据特定需求进行定制时,您会发现它还能做更多的事情,同时看起来更简洁、锐利。

FCAlertView 允许您指定按钮数量、视图的颜色方案、添加小图像、在一定时间后隐藏视图等。有关如何自定义 FCAlertView 以满足您的提示的完整说明,请参阅 http://github.com/nimati/FCAlertView

关于 FC 库的愿景

我的目标是创建一套不同类型的库,每个库针对 iOS 的特定 UI 元素,目的是提高设计并添加更多自定义功能。因此,FCAlertView 是一个更扁平/可定制的 AlertView。在这种思维模式下,我希望创建更多的 FC 库,例如 FCActionSheet、FCNotification(快速应用内提示)、FCPopoverView、FCGuideView(引导用户了解您的应用)。如果您也有关于 FC 库的建议,请提出一个问题并告诉我。

最终,FCLibraries 的存在是为了改善您的应用对最终用户的视觉和感受。因此,所有改进和建议都欢迎。

干杯🍻

作者

Nima Tahami 创建和设计。

精美色彩调色板归功于 flatuicolors.com

精美图标的归功于 ionicons.com

许可

FCAlertView 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。