Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 276 lines (185 sloc) 11.628 kB
3c8d4e2 @coneybeare Get youtube video to work on the readme
coneybeare authored
1 What is UAModalPanel?
2 ---------------------
3
b773bcd @coneybeare Update README.md
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)
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
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
13 Step 0: Prerequisites
14 ---------------------
beab3a1 @coneybeare README typos
coneybeare authored
15 You'll need at least Xcode 3.2 and an iOS 4.0+ project
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
16
68edb52 @ealeksandrov Moved Cocoapods instructions on top of the README
ealeksandrov authored
17 Step 0.5: CocoaPods way
18 ----------------
19 [CocoaPods](http://cocoapods.org/) is the recommended way to use UAModalPanel in your project.
20
21 * Simply add this line to your `Podfile`: `pod 'UAModalPanel', '~> 1.2'`
22 * Run `pod install`
23 * Go directly to [Step 3](#step-3-implement-uamodalpanel)
e4a870f @coneybeare Updated readme
coneybeare authored
24
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
25 Step 1: Get UAModalPanel files (add as Git submodule)
26 ----------------
27 In terminal navigate to the root of your project directory and run these commands (assuming your project is a git repo):
28
29 git submodule add git://github.com/coneybeare/UAModalPanel.git Submodules/UAModalPanel
30 git commit -m 'UAModalPanel added as submodule'
31
ada805f @coneybeare Updated the README, Organize project files
coneybeare authored
32 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
33
eeb018d @coneybeare Updated Readme
coneybeare authored
34 git submodule update
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
35
e4a870f @coneybeare Updated readme
coneybeare authored
36
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
37 Step 2: Add UAModalPanel to your project
38 ------------------------------------
39
40 **Copy files from example project**
41
ada805f @coneybeare Updated the README, Organize project files
coneybeare authored
42 * Open both the example project (that you downloaded in step 1 above) and your app's project in XCode.
43 * Drag the UAModalPanel Group from the example project into your project's Groups & Files.
44 * Make sure the _"Copy items into destination group's folder (if needed)"_ checkbox is _UNchecked_.
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
45
46 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.
47
48 **Add Frameworks**
49
50 Expand the 'Frameworks' group in your project's file list. Make sure you have the following framework installed:
51
9b787df @coneybeare Updated README
coneybeare authored
52 * `QuartzCore.framework`
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
53
54 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.
55
e4a870f @coneybeare Updated readme
coneybeare authored
56
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
57 Step 3: Implement UAModalPanel
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
58 ------------------------
59
60 **Subclass UAModalPanel**
61
00c29d5 @coneybeare Update README
coneybeare authored
62 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
63
64 **Add UAModalPanel to a View Controller**
65
66 Display the panel by creating an instance of your subclass and show it from a point:
67
9b787df @coneybeare Updated README
coneybeare authored
68 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
69 - (IBAction)showModalPanel:(id)sender {
70 UAModalPanel *modalPanel = [[[UAExampleModalPanel alloc] initWithFrame:self.view.bounds] autorelease];
71 [self.view addSubview:modalPanel];
72 [modalPanel showFromPoint:[sender center]];
73 }
9b787df @coneybeare Updated README
coneybeare authored
74 ````
9a5eeb2 @coneybeare Update README
coneybeare authored
75
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
76 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
77
78 **Optional Event Handling**
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
79
f3ab52c @coneybeare Added links to m files in the README
coneybeare authored
80 You can optionally implement either the UAModalPanelDelegate methods for callbacks and validations...
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
81
9b787df @coneybeare Updated README
coneybeare authored
82 ````objective-c
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
83 // Optional: This is called before the open animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
84 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
85 - (void)willShowModalPanel:(UAModalPanel *)modalPanel;
86
87 // Optional: This is called after the open animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
88 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
89 - (void)didShowModalPanel:(UAModalPanel *)modalPanel;
90
84c92f3 @coneybeare Updated README
coneybeare authored
91 // Optional: This is called when the close button is pressed
92 // You can use it to perform validations
93 // Return YES to close the panel, otherwise NO
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
94 // Only used if delegate is set and not using blocks.
84c92f3 @coneybeare Updated README
coneybeare authored
95 - (BOOL)shouldCloseModalPanel:(UAModalPanel *)modalPanel;
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
96
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
97 // Optional: This is called when the action button is pressed
98 // Action button is only visible when its title is non-nil;
99 // Only used if delegate is set and not using blocks.
100 - (void)didSelectActionButton:(UAModalPanel *)modalPanel;
101
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
102 // Optional: This is called before the close animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
103 // Only used if delegate is set and not using blocks.
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
104 - (void)willCloseModalPanel:(UAModalPanel *)modalPanel;
105
84c92f3 @coneybeare Updated README
coneybeare authored
106 // Optional: This is called after the close animations.
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
107 // Only used if delegate is set and not using blocks.
84c92f3 @coneybeare Updated README
coneybeare authored
108 - (void)didCloseModalPanel:(UAModalPanel *)modalPanel;
9b787df @coneybeare Updated README
coneybeare authored
109 ````
8aa41ff @coneybeare Updated README
coneybeare authored
110
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
111 ...or you can use blocks when creating the panel.
871423f @coneybeare Update README with block usage
coneybeare authored
112
b7d568c @barrettj updated read me
barrettj authored
113 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
114 // The block is responsible for closing the panel,
115 // either with -[UAModalPanel hide] or -[UAModalPanel hideWithOnComplete:]
116 // Panel is a reference to the modalPanel
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
117 modalPanel.onClosePressed = ^(UAModalPanel* panel) {
118 // Do something awesome when the close button is pressed
119 [panel hideWithOnComplete:^(BOOL finished) {
120 // Do something else awesome after it closes.
121 }];
122 };
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
123
124 // Panel is a reference to the modalPanel
125 modalPanel.onActionPressed = ^(UAModalPanel* panel) {
126 // Do something awesome when the action button is pressed
127 };
ff4ad9a @coneybeare Upadate readme with delegate methods
coneybeare authored
128
b7d568c @barrettj updated read me
barrettj authored
129 ````
130
8aa41ff @coneybeare Updated README
coneybeare authored
131 **Animation Hooks**
132
133 You can add any of these methods to your subclass to get hooks at various points of the bounce animation.
134
135 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
136 - (void)showAnimationStarting;
137 - (void)showAnimationPart1Finished;
138 - (void)showAnimationPart2Finished;
139 - (void)showAnimationPart3Finished;
140 - (void)showAnimationFinished;
8aa41ff @coneybeare Updated README
coneybeare authored
141 ````
2f88e53 @coneybeare Update README with block usage
coneybeare authored
142
8aa41ff @coneybeare Updated README
coneybeare authored
143 **Logging**
2f88e53 @coneybeare Update README with block usage
coneybeare authored
144
beab3a1 @coneybeare README typos
coneybeare authored
145 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
146
e4a870f @coneybeare Updated readme
coneybeare authored
147
b235d83 @coneybeare Update README with customization instructions
coneybeare authored
148 Step 4: Customize UAModalPanel
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
149 ------------------------
3db3821 @coneybeare Rename classes, update Readme
coneybeare authored
150
beab3a1 @coneybeare README typos
coneybeare authored
151 The best place to customize is in your UAModalPanel subclass.
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
152
beab3a1 @coneybeare README typos
coneybeare authored
153 **UAModalPanel Customizations**
8aa41ff @coneybeare Updated README
coneybeare authored
154
9b787df @coneybeare Updated README
coneybeare authored
155 ````objective-c
ca21ccd @coneybeare Change outerMargin and innerMargin to be margin and padding, respecti…
coneybeare authored
156 // Margin between edge of container frame and panel. Default = {20.0, 20.0, 20.0, 20.0}
157 self.margin = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
158
ca21ccd @coneybeare Change outerMargin and innerMargin to be margin and padding, respecti…
coneybeare authored
159 // Padding between edge of panel and the content area. Default = {20.0, 20.0, 20.0, 20.0}
160 self.padding = UIEdgeInsetsMake(10.0, 20.0, 30.0, 20.0);
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
161
84c92f3 @coneybeare Updated README
coneybeare authored
162 // Border color of the panel. Default = [UIColor whiteColor]
163 self.borderColor = [UIColor blueColor];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
164
84c92f3 @coneybeare Updated README
coneybeare authored
165 // Border width of the panel. Default = 1.5f;
166 self.borderWidth = 5.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
167
84c92f3 @coneybeare Updated README
coneybeare authored
168 // Corner radius of the panel. Default = 4.0f
169 self.cornerRadius = 10.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
170
84c92f3 @coneybeare Updated README
coneybeare authored
171 // Color of the panel itself. Default = [UIColor colorWithWhite:0.0 alpha:0.8]
172 self.contentColor = [UIColor yellowColor];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
173
84c92f3 @coneybeare Updated README
coneybeare authored
174 // Shows the bounce animation. Default = YES
175 self.shouldBounce = NO;
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
176
177 // Shows the actionButton. Default title is nil, thus the button is hidden by default
178 [self.actionButton setTitle:@"Foobar" forState:UIControlStateNormal];
9b787df @coneybeare Updated README
coneybeare authored
179 ````
7e0728c @coneybeare Reworded parts of the README
coneybeare authored
180
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
181 **UATitledModalPanel customizations**
9b787df @coneybeare Updated README
coneybeare authored
182
183 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
184 // Height of the title view. Default = 40.0f
185 self.titleBarHeight = 80.0f;
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
186
84c92f3 @coneybeare Updated README
coneybeare authored
187 // The background color gradient of the title
188 CGFloat colors[8] = {0, 1, 1, 1, 1, 1, 0, 1};
189 [self.titleBar setColorComponents:colors];
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
190
84c92f3 @coneybeare Updated README
coneybeare authored
191 // The header label, a UILabel with the same frame as the titleBar
192 self.headerLabel.font = [UIFont boldSystemFontOfSize:24];
9b787df @coneybeare Updated README
coneybeare authored
193 ````
194
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
195 **UANoisyGradientBackground and UAGradientBackground customizations**
196
9b787df @coneybeare Updated README
coneybeare authored
197 ````objective-c
84c92f3 @coneybeare Updated README
coneybeare authored
198 // The gradient style (Linear, linear reversed, radial, radial reversed, center highlight). Default = Linear
199 [[self titleBar] setGradientStyle:UAGradientBackgroundStyleCenterHighlight];
f7f7955 @coneybeare Updated README
coneybeare authored
200
84c92f3 @coneybeare Updated README
coneybeare authored
201 // The line mode of the gradient view (top, bottom, both, none)
202 [[self titleBar] setLineMode:UAGradientLineModeNone];
f7f7955 @coneybeare Updated README
coneybeare authored
203
84c92f3 @coneybeare Updated README
coneybeare authored
204 // The noise layer opacity
205 [[self titleBar] setNoiseOpacity:0.3];
9b787df @coneybeare Updated README
coneybeare authored
206 ````
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
207
e4a870f @coneybeare Updated readme
coneybeare authored
208
b235d83 @coneybeare Update README with customization instructions
coneybeare authored
209 Step 5: There is no step 5.
00c6df3 @coneybeare Update README with customization instructions
coneybeare authored
210 ------------------------
211
6869e78 @coneybeare Updated Readme
coneybeare authored
212 That's it. Please feel free to fork and submit pull requests, fix issues or whatever else.
213
e4a870f @coneybeare Updated readme
coneybeare authored
214
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
215 ARC Support
216 ------------------------
217 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
218
4c6ec3a @coneybeare Update master
coneybeare authored
219 ![ARC Settings](https://github.com/coneybeare/UAModalPanel/raw/master/_README_ASSETS/UAModalPanelARC.png)
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
220
221
9db757b @coneybeare Update README.md
coneybeare authored
222 Contributing to UAModalPanel
223 ------------------------
224 1. Fork it
225 2. Create your feature branch (`git checkout -b my-new-feature`)
226 3. Commit your changes (`git commit -am 'Added some feature'`)
227 4. Push to the branch (`git push origin my-new-feature`)
228 5. Test it by adding it to the sample app and ensuring everything works as intended with both your change, and the existing code.
229 6. Create new Pull Request
230
231
1c9a87a @coneybeare Updated Readme
coneybeare authored
232 App that are using UAModalPanel:
233 ------------------------
234 If you are using UAModalPanel, please contact me to get added to this list!
235
236 * [Ambiance](http://ambianceapp.com/iphone), [Ambiance Lite](http://ambianceapp.com/iphone)
d859ef5 @coneybeare Update README.md
coneybeare authored
237 * [Hourly News](http://hourlynewsapp.com)
238 * [The Last Shot](http://thelastshot.com)
1c9a87a @coneybeare Updated Readme
coneybeare authored
239 * [FlippedText](http://flippedtext.com)
d859ef5 @coneybeare Update README.md
coneybeare authored
240 * [All Budget](http://www.geckobit.com/allbudget.html)
1c9a87a @coneybeare Updated Readme
coneybeare authored
241
74cd8a0 @coneybeare Adding tag for Cocoapods
coneybeare authored
242
1c9a87a @coneybeare Updated Readme
coneybeare authored
243 Get in touch:
244 ------------------------
6aefb3d @coneybeare Updated Readme
coneybeare authored
245
1c9a87a @coneybeare Updated Readme
coneybeare authored
246 * [Follow my code blog](http://code.coneybeare.net)
247 * [Follow me on Twitter](http://twitter.com/coneybeare)
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
248 * [Contact me](http://coneybeare.net)
249
b773bcd @coneybeare Update README.md
coneybeare authored
250
251 What Does UA stand for?
252 ------------------------
253 [Urban Apps](http://urbanapps.com). We make neat stuff. Check us out.
254
255
256 Open-Source Urban Apps Projects
257 ------------------------
6bf6870 @coneybeare Update README.md
coneybeare authored
258
259 * [Armchair](https://github.com/UrbanApps/Armchair) - A simple yet powerful App Review Manager for iOS and OSX (Swift)
260 * [UAAppReviewManager](https://github.com/UrbanApps/UAAppReviewManager) - An app review prompting tool for iOS and Mac App Store apps.
261 * [UALogger](https://github.com/UrbanApps/UALogger) - A logging utility for Mac/iOS apps
262 * [UAObfuscatedString](https://github.com/UrbanApps/UAObfuscatedString) - A simple NSString category to hide sensitive strings
35eaa1b @coneybeare Update README.md
coneybeare authored
263 * [UAProgressView](https://github.com/UrbanApps/UAProgressView) A simple and lightweight, yet powerful animated circular progress view
8b20adf @coneybeare Update README.md
coneybeare authored
264 * [Urban](https://github.com/UrbanApps/Urban) - An Xcode color scheme that uses a soft dark background, with subtle blue, orange and yellow colors
b773bcd @coneybeare Update README.md
coneybeare authored
265
6f3ec88 @coneybeare Updated README to include actionButton usage
coneybeare authored
266 Donate:
267 ------------------------
268 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!
269
411fc5e @coneybeare Updated README to include actionButton usage
coneybeare authored
270
0a78a25 @coneybeare Updated README to include actionButton usage
coneybeare authored
271 [![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)
b6e3598 @bitdeli-chef Add a Bitdeli badge to README
bitdeli-chef authored
272
273
274 [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/coneybeare/uamodalpanel/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
275
Something went wrong with that request. Please try again.