UAModalPanel 1.1.1

UAModalPanel 1.1.1

测试已测试
Lang语言 Obj-CObjective C
许可 BSD
发布最新发布2014年12月

Matt Coneybeare维护。



  • 作者
  • Matt Coneybeare

什么是 UAModalPanel?

UAModalPanel Example PicUAModalPanel Example Pic 2UAModalPanel Example Pic 3UAModalPanel Example Pic 4

UAModalPanel 是一个高度可定制的替代模态面板,您可以在视图控制器中弹出显示可能不需要一个完整新屏幕的内容。它具有弹跳动画、内容淡入和华丽的有杂色渐变的标题栏。它适用于 iPhone 和 iPad,在旋转与否的情况下都能正常工作。

示例视频

http://www.youtube.com/watch?v=AJDR0GAsV9E

步骤 0:前置条件

您将需要至少 Xcode 3.2 和 iOS 4.0+ 的项目

步骤 1:获取 UAModalPanel 文件(添加为 Git 子模块)

在终端导航到您项目目录的根目录,并运行以下命令(假设您的项目是一个 git 仓库)

git submodule add git://github.com/coneybeare/UAModalPanel.git Submodules/UAModalPanel
git commit -m 'UAModalPanel added as submodule'

这将在您的项目中创建一个新的子模块,将文件下载到项目中的 Submodules/UAModalPanel 目录,并创建一个具有更新 Git 仓库设置的新的提交。由于您将 UAModalPanel 添加为子模块,因此可以很容易地通过简单地执行以下操作来保持其的最新版本:

git submodule update

步骤 2:将 UAModalPanel 添加到您的项目中

从示例项目中复制文件

  • 在 Xcode 中打开上面步骤 1 中下载的示例项目以及您的应用程序项目。
  • 将示例项目中的 UAModalPanel 组拖动到您项目中的组与文件中。
  • 确保未勾选“如果需要则将项目中的文件复制到目标文件夹”复选框。

Xcode 4 注意:在 Xcode 4 中添加文件的方法不同 - 首先确保您的 UAModalPanel 项目窗口已关闭,然后从Finder窗口中拖动 UAModalPanel.xcodeproj 文件到您的项目中。您应该在 Xcode 中看到 UAModalPanel 的项目树打开在您的项目中,然后您可以按照上面的说明拖动 UAModalPanel 组。然后必须从您的项目中**移除 UAModalPanel.xcodeproj(整个 UAModalPanel 项目**),以免干扰您的项目。

添加框架

展开您项目文件列表中的 'Frameworks' 组。请确保已安装以下框架

  • QuartzCore.framework

如果您缺少任何框架,右键单击 'Frameworks' 组并选择添加 -> 已存在的框架。选择您缺少的框架并将其添加到项目中。

步骤 3:实现 UAModalPanel

UAModalPanel 的子类化

使用面板的最佳方式是将其子类化,并将自己的元素添加到contentView中。要获得一个普通模态面板,可以将UAModalPanel进行子类化。要获得一个带标题的模态面板,将UATitledModalPanel进行子类化。查看示例项目中的示例子类,UAExampleModalPanel

将UAModalPanel添加到视图控制器

通过创建子类的实例并从中显示来显示面板

- (IBAction)showModalPanel:(id)sender {
    UAModalPanel *modalPanel = [[[UAExampleModalPanel alloc] initWithFrame:self.view.bounds] autorelease];
    [self.view addSubview:modalPanel];
    [modalPanel showFromPoint:[sender center]];
}

UAModalPanel知道如何自己关闭,但如果你想有更多控制或动作按钮处理,请查看以下内容。

可选的事件处理

你可以选择实现UAModalPanelDelegate方法进行回调和验证...

// Optional: This is called before the open animations.
//   Only used if delegate is set and not using blocks.
- (void)willShowModalPanel:(UAModalPanel *)modalPanel;

// Optional: This is called after the open animations.
//   Only used if delegate is set and not using blocks.
- (void)didShowModalPanel:(UAModalPanel *)modalPanel;

// Optional: This is called when the close button is pressed
//   You can use it to perform validations
//   Return YES to close the panel, otherwise NO
//   Only used if delegate is set and not using blocks.
- (BOOL)shouldCloseModalPanel:(UAModalPanel *)modalPanel;

// Optional: This is called when the action button is pressed
//   Action button is only visible when its title is non-nil;
//   Only used if delegate is set and not using blocks.
- (void)didSelectActionButton:(UAModalPanel *)modalPanel;

// Optional: This is called before the close animations.
//   Only used if delegate is set and not using blocks.
- (void)willCloseModalPanel:(UAModalPanel *)modalPanel;

// Optional: This is called after the close animations.
//   Only used if delegate is set and not using blocks.
- (void)didCloseModalPanel:(UAModalPanel *)modalPanel;

...或者你可以在创建面板时使用块。

// The block is responsible for closing the panel,
//   either with -[UAModalPanel hide] or -[UAModalPanel hideWithOnComplete:]
//   Panel is a reference to the modalPanel
    modalPanel.onClosePressed = ^(UAModalPanel* panel) {
        // Do something awesome when the close button is pressed
        [panel hideWithOnComplete:^(BOOL finished) {
            // Do something else awesome after it closes.
        }];
    };

//   Panel is a reference to the modalPanel
    modalPanel.onActionPressed = ^(UAModalPanel* panel) {
        // Do something awesome when the action button is pressed
    };

动画钩子

你可以将这些方法中的任何一个添加到你的子类中,以在各种动画点获得钩子。

- (void)showAnimationStarting;
- (void)showAnimationPart1Finished;
- (void)showAnimationPart2Finished;
- (void)showAnimationPart3Finished;
- (void)showAnimationFinished;

日志记录

您可以在项目中添加预处理器宏UAMODALVIEW_DEBUG,以在UAModalPanel中打开一些可能很有用的日志。

步骤4:自定义UAModalPanel

最佳的自定义位置是在你的UAModalPanel子类中。

UAModalPanel自定义

// Margin between edge of container frame and panel. Default = {20.0, 20.0, 20.0, 20.0}
self.margin = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);

// Padding between edge of panel and the content area. Default = {20.0, 20.0, 20.0, 20.0}
self.padding = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);

// Border color of the panel. Default = [UIColor whiteColor]
self.borderColor = [UIColor blueColor];

// Border width of the panel. Default = 1.5f;
self.borderWidth = 5.0f;

// Corner radius of the panel. Default = 4.0f
self.cornerRadius = 10.0f;

// Color of the panel itself. Default = [UIColor colorWithWhite:0.0 alpha:0.8]
self.contentColor = [UIColor yellowColor];

// Shows the bounce animation. Default = YES
self.shouldBounce = NO;

// Shows the actionButton. Default title is nil, thus the button is hidden by default
[self.actionButton setTitle:@"Foobar" forState:UIControlStateNormal];

UATitledModalPanel自定义

// Height of the title view. Default = 40.0f
self.titleBarHeight = 80.0f;

// The background color gradient of the title
CGFloat colors[8] = {0, 1, 1, 1, 1, 1, 0, 1};
[self.titleBar setColorComponents:colors];

// The header label, a UILabel with the same frame as the titleBar
self.headerLabel.font = [UIFont boldSystemFontOfSize:24];

UANoisyGradientBackground和UAGradientBackground自定义

// The gradient style (Linear, linear reversed, radial, radial reversed, center highlight). Default = Linear
[[self titleBar] setGradientStyle:UAGradientBackgroundStyleCenterHighlight];

// The line mode of the gradient view (top, bottom, both, none)
[[self titleBar] setLineMode:UAGradientLineModeNone];

// The noise layer opacity
[[self titleBar] setNoiseOpacity:0.3];

步骤5:没有步骤5。

就是这样。请随时进行分支和提交拉取请求,修复问题或做任何其他事情。

ARC支持

UAModalPanel不使用ARC,但你可以通过将"编译源"部分添加到“目标”的“构建设置”选项卡中的-fno-objc-arc编译器标志,在ARC项目中使用它

ARC Settings

使用UAModalPanel的应用程序

如果您正在使用UAModalPanel,请与我联系,以便将其添加到此列表中!

取得联系

捐赠

请支持我们,这样我们就可以继续使UAModalPanel更加出色!如果你特别慷慨,请请我喝杯啤酒!

Paypal Button