FCAlertView 是一个扁平可定制的 AlertView,使用 Objective C 编写。
[](https://travis-ci.org/Nima Tahami/FCAlertView)
1. Swift
2. 安装
3. 示例应用
4. 添加 FCAlertView
5. 基础定制
6. 额外定制
7. 新定制(V1.1.0 之后)
8. 动画
9. 添加文本字段
10. 按钮操作
11. 其他辅助方法
有关 FCAlertView 的 Swift 版本,请点击此处。感谢 Kris Penney 编写 Swift 库。
克隆或下载此仓库。然后只需将文件夹 FCAlertView
拖动到你的 Xcode 项目中。请确保拖动整个文件夹,这包括一些 alert 类型所需的资产。
FCAlertView附带示例应用,您可以使用该应用尝试以下所有定制。在使用示例应用之前,建议您先通读所有文档。要使用示例应用,请克隆或下载 FCAlertView,打开并运行 Example/FCAlertView.xcworkspace
。
首先,将以下内容添加到您的 View Controller 中:
#import "FCAlertView.h"
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:
[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];
此方法还将您的 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 还提供了一套预制的颜色供您使用
#####感谢 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
当用户在警告之外地方点击时,您可以添加以下行来关闭警告
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;
请注意,隐藏完成/取消按钮和/或隐藏所有按钮会触发安全关闭机制,强制外部触摸关闭始终开启。
简单地在 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"];
注意: 要使此功能正常工作,请将以下框架添加到您的项目中: AVFoundation
和 AudioToolbox
。
为警告视图添加更多自然界动画,例如响应型弹跳按钮等。请添加以下行
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;
- (void)FCAlertViewDismissed:(FCAlertView *)alertView {
// Your FCAlertView was Dismissed, Perform the Action you'd like here.
}
- (void)FCAlertViewWillAppear:(FCAlertView *)alertView {
// Your FCAlertView will be Presented, Perform the Action you'd like here.
}
FCAlertView 是一个持续进行的项目,目标是成为最常用的 iOS 自定义 AlertView。改进和更改正在进行中,以下是与之相关的即将到来的功能
FCAlertView 是一个完全可定制的精美 AlertView。我设计 FCAlertView 是因为我一直想要能够更改默认 UIAlertView 的不同属性。在设计上,FCAlertView 看起来类似于默认的 AlertView,然而,当您开始根据特定需求进行定制时,您会发现它还能做更多的事情,同时看起来更简洁、锐利。
FCAlertView 允许您指定按钮数量、视图的颜色方案、添加小图像、在一定时间后隐藏视图等。有关如何自定义 FCAlertView 以满足您的提示的完整说明,请参阅 http://github.com/nimati/FCAlertView。
我的目标是创建一套不同类型的库,每个库针对 iOS 的特定 UI 元素,目的是提高设计并添加更多自定义功能。因此,FCAlertView 是一个更扁平/可定制的 AlertView。在这种思维模式下,我希望创建更多的 FC 库,例如 FCActionSheet、FCNotification(快速应用内提示)、FCPopoverView、FCGuideView(引导用户了解您的应用)。如果您也有关于 FC 库的建议,请提出一个问题并告诉我。
最终,FCLibraries 的存在是为了改善您的应用对最终用户的视觉和感受。因此,所有改进和建议都欢迎。
干杯
由 Nima Tahami 创建和设计。
精美色彩调色板归功于 flatuicolors.com。
精美图标的归功于 ionicons.com。
FCAlertView 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。