Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 241 lines (158 sloc) 9.972 kB
3c8d4e2 @coneybeare Get youtube video to work on the readme
coneybeare authored
1 What is UAModalPanel?
2 ---------------------
3
4c6ec3a @coneybeare Update master
coneybeare authored
4 ![UAModalPanel Example Pic](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanel.jpg)![UAModalPanel Example Pic 2](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanel2.jpg)![UAModalPanel Example Pic 3](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanel3.jpg)![UAModalPanel Example Pic 4](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanel4.jpg)
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
5
8e935da @coneybeare shpelling
coneybeare authored
6 UAModalPanel is a highly customizable, alternative modal panel that you can popup in your view controllers to show content that might not need an entire new screen to show. It has a bounce animation, content fade-in, and a fancy noisy-gradient title bar. It works on the iPhone and iPad, with or without rotation.
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
7
8 Example Video
9 ---------------------
beab3a1 @coneybeare README typos
coneybeare authored
10 http://www.youtube.com/watch?v=AJDR0GAsV9E
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
11
1c9a87a @coneybeare Updated Readme
coneybeare authored
12
e4a870f @coneybeare Updated readme
coneybeare authored
13
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
14 Step 0: Prerequisites
15 ---------------------
beab3a1 @coneybeare README typos
coneybeare authored
16 You'll need at least Xcode 3.2 and an iOS 4.0+ project
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
17
e4a870f @coneybeare Updated readme
coneybeare authored
18
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
19 Step 1: Get UAModalPanel files (add as Git submodule)
20 ----------------
21 In terminal navigate to the root of your project directory and run these commands (assuming your project is a git repo):
22
23 git submodule add git://github.com/coneybeare/UAModalPanel.git Submodules/UAModalPanel
24 git commit -m 'UAModalPanel added as submodule'
25
ada805f @coneybeare Updated the README, Organize project files
coneybeare authored
26 This creates new submodule, downloads the files to Submodules/UAModalPanel directory within your project and creates new commit with updated git repo settings. Thanks to the fact that you added UAModalPanel as submodule, it is easy to keep it updated to the newest version by simply doing:
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
27
eeb018d @coneybeare Updated Readme
coneybeare authored
28 git submodule update
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
29
e4a870f @coneybeare Updated readme
coneybeare authored
30
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
31 Step 2: Add UAModalPanel to your project
32 ------------------------------------
33
34 **Copy files from example project**
35
ada805f @coneybeare Updated the README, Organize project files
coneybeare authored
36 * Open both the example project (that you downloaded in step 1 above) and your app's project in XCode.
37 * Drag the UAModalPanel Group from the example project into your project's Groups & Files.
38 * Make sure the _"Copy items into destination group's folder (if needed)"_ checkbox is _UNchecked_.
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
39
40 XCode 4 note: adding the files is different in Xcode 4 - first, make sure your UAModalPanel project window is closed, then you drag the UAModalPanel.xcodeproj file (from a Finder window) to your project. You should see the UAModalPanel's proj tree open up within your project in XCode, and then you should be able to drag UAModalPanel group as stated above. You then **must remove UAModalPanel.xcodeproj (whole UAModalPanel project) from your project**, so that it does not interfere with your project.
41
42 **Add Frameworks**
43
44 Expand the 'Frameworks' group in your project's file list. Make sure you have the following framework installed:
45
9b787df @coneybeare Updated README
coneybeare authored
46 * `QuartzCore.framework`
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
47
48 If you are missing any frameworks, right click the 'Frameworks' group and select Add -> Existing Frameworks. Select the framework you are missing and add it to your project.
49
e4a870f @coneybeare Updated readme
coneybeare authored
50
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
51 Step 3: Implement UAModalPanel
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
52 ------------------------
53
54 **Subclass UAModalPanel**
55
00c29d5 @coneybeare Update README
coneybeare authored
56 The best way to use the panel is to subclass it and add your own elements to the `contentView`. To get a plain modal panel, subclass [UAModalPanel](https://github.com/coneybeare/UAModalPanel/blob/master/UAModalPanel/Panel/Panels/UAModalPanel.h) . To get a titled modal panel, subclass [UATitledModalPanel](https://github.com/coneybeare/UAModalPanel/blob/master/UAModalPanel/Panel/Panels/UATitledModalPanel.h). Check out the example project for a sample subclass, [UAExampleModalPanel](https://github.com/coneybeare/UAModalPanel/blob/master/UAModalPanel/Example%20Project/UAExampleModalPanel.h)
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
57
58 **Add UAModalPanel to a View Controller**
59
60 Display the panel by creating an instance of your subclass and show it from a point:
61
9b787df @coneybeare Updated README
coneybeare authored
62 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
63 - (IBAction)showModalPanel:(id)sender {
64 UAModalPanel *modalPanel = [[[UAExampleModalPanel alloc] initWithFrame:self.view.bounds] autorelease];
65 [self.view addSubview:modalPanel];
66 [modalPanel showFromPoint:[sender center]];
67 }
9b787df @coneybeare Updated README
coneybeare authored
68 ````
9a5eeb2 @coneybeare Update README
coneybeare authored
69
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
70 UAModalPanel knows how to close itself, but if you want more control or action button handling, read on.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
71
72 **Optional Event Handling**
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
73
f3ab52c @coneybeare Added links to m files in the README
coneybeare authored
74 You can optionally implement either the UAModalPanelDelegate methods for callbacks and validations...
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
75
9b787df @coneybeare Updated README
coneybeare authored
76 ````objective-c
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
77 // Optional: This is called before the open animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
78 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
79 - (void)willShowModalPanel:(UAModalPanel *)modalPanel;
80
81 // Optional: This is called after the open animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
82 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
83 - (void)didShowModalPanel:(UAModalPanel *)modalPanel;
84
84c92f3 @coneybeare Updated README
coneybeare authored
85 // Optional: This is called when the close button is pressed
86 // You can use it to perform validations
87 // Return YES to close the panel, otherwise NO
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
88 // Only used if delegate is set and not using blocks.
84c92f3 @coneybeare Updated README
coneybeare authored
89 - (BOOL)shouldCloseModalPanel:(UAModalPanel *)modalPanel;
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
90
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
91 // Optional: This is called when the action button is pressed
92 // Action button is only visible when its title is non-nil;
93 // Only used if delegate is set and not using blocks.
94 - (void)didSelectActionButton:(UAModalPanel *)modalPanel;
95
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
96 // Optional: This is called before the close animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
97 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
98 - (void)willCloseModalPanel:(UAModalPanel *)modalPanel;
99
84c92f3 @coneybeare Updated README
coneybeare authored
100 // Optional: This is called after the close animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
101 // Only used if delegate is set and not using blocks.
84c92f3 @coneybeare Updated README
coneybeare authored
102 - (void)didCloseModalPanel:(UAModalPanel *)modalPanel;
9b787df @coneybeare Updated README
coneybeare authored
103 ````
8aa41ff @coneybeare Updated README
coneybeare authored
104
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
105 ...or you can use blocks when creating the panel.
871423f @coneybeare Update README with block usage
coneybeare authored
106
b7d568c @barrettj updated read me
barrettj authored
107 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
108 // The block is responsible for closing the panel,
109 // either with -[UAModalPanel hide] or -[UAModalPanel hideWithOnComplete:]
110 // Panel is a reference to the modalPanel
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
111 modalPanel.onClosePressed = ^(UAModalPanel* panel) {
112 // Do something awesome when the close button is pressed
113 [panel hideWithOnComplete:^(BOOL finished) {
114 // Do something else awesome after it closes.
115 }];
116 };
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
117
118 // Panel is a reference to the modalPanel
119 modalPanel.onActionPressed = ^(UAModalPanel* panel) {
120 // Do something awesome when the action button is pressed
121 };
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
122
b7d568c @barrettj updated read me
barrettj authored
123 ````
124
8aa41ff @coneybeare Updated README
coneybeare authored
125 **Animation Hooks**
126
127 You can add any of these methods to your subclass to get hooks at various points of the bounce animation.
128
129 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
130 - (void)showAnimationStarting;
131 - (void)showAnimationPart1Finished;
132 - (void)showAnimationPart2Finished;
133 - (void)showAnimationPart3Finished;
134 - (void)showAnimationFinished;
8aa41ff @coneybeare Updated README
coneybeare authored
135 ````
2f88e53 @coneybeare Update README with block usage
coneybeare authored
136
8aa41ff @coneybeare Updated README
coneybeare authored
137 **Logging**
2f88e53 @coneybeare Update README with block usage
coneybeare authored
138
beab3a1 @coneybeare README typos
coneybeare authored
139 You can add `UAMODALVIEW_DEBUG` as a preprocessor macro on your project to turn on some potentially useful logging in UAModalPanel.
b7d568c @barrettj updated read me
barrettj authored
140
e4a870f @coneybeare Updated readme
coneybeare authored
141
b235d83 @coneybeare Update README with customization instructions
coneybeare authored
142 Step 4: Customize UAModalPanel
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
143 ------------------------
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
144
beab3a1 @coneybeare README typos
coneybeare authored
145 The best place to customize is in your UAModalPanel subclass.
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
146
beab3a1 @coneybeare README typos
coneybeare authored
147 **UAModalPanel Customizations**
8aa41ff @coneybeare Updated README
coneybeare authored
148
9b787df @coneybeare Updated README
coneybeare authored
149 ````objective-c
ca21ccd @coneybeare Change outerMargin and innerMargin to be margin and padding, respecti…
coneybeare authored
150 // Margin between edge of container frame and panel. Default = {20.0, 20.0, 20.0, 20.0}
151 self.margin = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
152
ca21ccd @coneybeare Change outerMargin and innerMargin to be margin and padding, respecti…
coneybeare authored
153 // Padding between edge of panel and the content area. Default = {20.0, 20.0, 20.0, 20.0}
154 self.padding = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
155
84c92f3 @coneybeare Updated README
coneybeare authored
156 // Border color of the panel. Default = [UIColor whiteColor]
157 self.borderColor = [UIColor blueColor];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
158
84c92f3 @coneybeare Updated README
coneybeare authored
159 // Border width of the panel. Default = 1.5f;
160 self.borderWidth = 5.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
161
84c92f3 @coneybeare Updated README
coneybeare authored
162 // Corner radius of the panel. Default = 4.0f
163 self.cornerRadius = 10.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
164
84c92f3 @coneybeare Updated README
coneybeare authored
165 // Color of the panel itself. Default = [UIColor colorWithWhite:0.0 alpha:0.8]
166 self.contentColor = [UIColor yellowColor];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
167
84c92f3 @coneybeare Updated README
coneybeare authored
168 // Shows the bounce animation. Default = YES
169 self.shouldBounce = NO;
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
170
171 // Shows the actionButton. Default title is nil, thus the button is hidden by default
172 [self.actionButton setTitle:@"Foobar" forState:UIControlStateNormal];
9b787df @coneybeare Updated README
coneybeare authored
173 ````
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
174
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
175 **UATitledModalPanel customizations**
9b787df @coneybeare Updated README
coneybeare authored
176
177 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
178 // Height of the title view. Default = 40.0f
179 self.titleBarHeight = 80.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
180
84c92f3 @coneybeare Updated README
coneybeare authored
181 // The background color gradient of the title
182 CGFloat colors[8] = {0, 1, 1, 1, 1, 1, 0, 1};
183 [self.titleBar setColorComponents:colors];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
184
84c92f3 @coneybeare Updated README
coneybeare authored
185 // The header label, a UILabel with the same frame as the titleBar
186 self.headerLabel.font = [UIFont boldSystemFontOfSize:24];
9b787df @coneybeare Updated README
coneybeare authored
187 ````
188
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
189 **UANoisyGradientBackground and UAGradientBackground customizations**
190
9b787df @coneybeare Updated README
coneybeare authored
191 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
192 // The gradient style (Linear, linear reversed, radial, radial reversed, center highlight). Default = Linear
193 [[self titleBar] setGradientStyle:UAGradientBackgroundStyleCenterHighlight];
f7f7955 @coneybeare Updated README
coneybeare authored
194
84c92f3 @coneybeare Updated README
coneybeare authored
195 // The line mode of the gradient view (top, bottom, both, none)
196 [[self titleBar] setLineMode:UAGradientLineModeNone];
f7f7955 @coneybeare Updated README
coneybeare authored
197
84c92f3 @coneybeare Updated README
coneybeare authored
198 // The noise layer opacity
199 [[self titleBar] setNoiseOpacity:0.3];
9b787df @coneybeare Updated README
coneybeare authored
200 ````
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
201
e4a870f @coneybeare Updated readme
coneybeare authored
202
b235d83 @coneybeare Update README with customization instructions
coneybeare authored
203 Step 5: There is no step 5.
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
204 ------------------------
205
6869e78 @coneybeare Updated Readme
coneybeare authored
206 That's it. Please feel free to fork and submit pull requests, fix issues or whatever else.
207
e4a870f @coneybeare Updated readme
coneybeare authored
208
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
209 ARC Support
210 ------------------------
211 UAModalPanel is not using ARC, but you can use it in your ARC project by adding `-fno-objc-arc` compiler flag to the "Compile Sources" section found in the Target's "Build Settings" tab
212
4c6ec3a @coneybeare Update master
coneybeare authored
213 ![ARC Settings](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanelARC.png)
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
214
215
216
1c9a87a @coneybeare Updated Readme
coneybeare authored
217 App that are using UAModalPanel:
218 ------------------------
219 If you are using UAModalPanel, please contact me to get added to this list!
220
221 * [Ambiance](http://ambianceapp.com/iphone), [Ambiance Lite](http://ambianceapp.com/iphone)
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
222 * [Hourly News](http://itunes.apple.com/us/app/hourly-news/id493859859?mt=8)
1c9a87a @coneybeare Updated Readme
coneybeare authored
223 * [FlippedText](http://flippedtext.com)
224 * [Hanging with Cheats](http://hangingwithcheats.com)
225
226
227 Get in touch:
228 ------------------------
6aefb3d @coneybeare Updated Readme
coneybeare authored
229
1c9a87a @coneybeare Updated Readme
coneybeare authored
230 * [Follow my code blog](http://code.coneybeare.net)
231 * [Follow me on Twitter](http://twitter.com/coneybeare)
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
232 * [Contact me](http://coneybeare.net)
233
234
235 Donate:
236 ------------------------
237 Please support us so that we can continue to make UAModalPanel even more awesome! If you are feeling particularly generous, please buy me a beer!
238
411fc5e @coneybeare Updated README to include actionButton usage
coneybeare authored
239
0a78a25 @coneybeare Updated README to include actionButton usage
coneybeare authored
240 [![Paypal Button](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif "Paypal Button")](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=LGPE58JWZKBG2)
Something went wrong with that request. Please try again.