/
index.html
444 lines (297 loc) · 13.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Monotouch : Sectioned UITableViews - My Octopress Blog</title>
<meta name="author" content="Your Name">
<meta name="description" content="I was playing around some more with UITableViews and wanted to get them working the way they do in Contacts with the vertical bar on the right side …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://kevinsheffield.github.com/blog/2009/09/14/monotouch-sectioned-uitableviews">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">My Octopress Blog</a></h1>
<h2>A blogging framework for hackers.</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:kevinsheffield.github.com" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">Monotouch : Sectioned UITableViews</h1>
<p class="meta">
<time datetime="2009-09-14T00:00:00-04:00" pubdate data-updated="true">Sep 14<span>th</span>, 2009</time>
</p>
</header>
<div class="entry-content"><p>I was playing around some more with UITableViews and wanted to get them working the way they do in Contacts with the vertical bar on the right side of the screen providing navigation to a certain section in the list (in the case of Contacts and this example, first letter of the word).</p>
<p>It is amazingly simple. Basically you only have to override and implement a few more functions of UITableDataSource… mainly SectionIndexTitles, NumberOfSections, TitleForHeader (and TitleForFooter if you wanted a footer), SectionFor, and RowsInSection. So maybe that wasn’t just a few but they are really simple to implement.</p>
<p><strong>SectionIndexTitles</strong> : This is just a string[] with all the titles you want to show on the right side scrollbar area.</p>
<p><strong>NumberOfSections</strong> : Simply just a count of the number of sections.</p>
<p><strong>TitleForHeader</strong> : This will set the header title for each section. There is an int parameter and for me just returns the string at the specified index.</p>
<p><strong>RowsInSection</strong> : This returns a count of the items in the current section. Using .FindAll() in my code.</p>
<p><strong>SectionFor</strong> : Not exactly sure what this is for as of yet. Seeing it used in some Obj-c code it just returned the atIndex param. Will look into this more or would love a commentor to explain it.</p>
<p>To spice this demo up I even hooked up a UISearchBar and filter the list on each keystroke. You can notice both the items and sections being filtered out.</p>
<p>Here is what it looks like when it first loads up
<img src="http://farm4.static.flickr.com/3526/3921660933_f5a83b0801.jpg" alt="first load" /></p>
<p>And this it the program after searching for something
<img src="http://farm3.static.flickr.com/2458/3921661013_d165f4d567.jpg" alt="searched" /></p>
<p>Here is the code. All of the delegates are in the Main.cs file.</p>
<p>Here is the MainWindow.designer.cs</p>
<pre name="code" class="c-sharp">
namespace SectionedUITableViewSample {
// Base type probably should be MonoTouch.Foundation.NSObject or subclass
[MonoTouch.Foundation.Register("AppDelegate")]
public partial class AppDelegate {
[MonoTouch.Foundation.Connect("window")]
private MonoTouch.UIKit.UIWindow window {
get {
return ((MonoTouch.UIKit.UIWindow)(this.GetNativeField("window")));
}
set {
this.SetNativeField("window", value);
}
}
[MonoTouch.Foundation.Connect("tvc")]
private MonoTouch.UIKit.UITableViewController tvc {
get {
return ((MonoTouch.UIKit.UITableViewController)(this.GetNativeField("tvc")));
}
set {
this.SetNativeField("tvc", value);
}
}
[MonoTouch.Foundation.Connect("tv")]
private MonoTouch.UIKit.UITableView tv {
get {
return ((MonoTouch.UIKit.UITableView)(this.GetNativeField("tv")));
}
set {
this.SetNativeField("tv", value);
}
}
[MonoTouch.Foundation.Connect("searchBar")]
private MonoTouch.UIKit.UISearchBar searchBar {
get {
return ((MonoTouch.UIKit.UISearchBar)(this.GetNativeField("searchBar")));
}
set {
this.SetNativeField("searchBar", value);
}
}
}
}</pre>
<p>And here is the Main.cs</p>
<pre name="code" class="csharp">
namespace SectionedUITableViewSample
{
public class Application
{
static void Main (string[] args)
{
UIApplication.Main (args);
}
}
// The name AppDelegate is referenced in the MainWindow.xib file.
public partial class AppDelegate : UIApplicationDelegate
{
// This method is invoked when the application has loaded its UI and its ready to run
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
// If you have defined a view, add it here:
// window.AddSubview (navigationController.View);
TableViewDataSource tvdc = new TableViewDataSource();
this.tvc.TableView.DataSource = tvdc;
this.searchBar.Delegate = new SearchDelegate(tvc, tvdc);
window.AddSubview(this.tvc.View);
window.MakeKeyAndVisible ();
return true;
}
// This method is required in iPhoneOS 3.0
public override void OnActivated (UIApplication application)
{
}
}
public class SearchDelegate : UISearchBarDelegate
{
public UITableViewController tvc;
public TableViewDataSource tvdc;
public SearchDelegate(UITableViewController tvc, TableViewDataSource tvdc) : base ()
{
this.tvc = tvc;
this.tvdc = tvdc;
}
public override void TextChanged (UISearchBar searchBar, string searchText)
{
tvdc.Search(searchText);
tvc.TableView.DataSource = tvdc;
tvc.TableView.ReloadData();
}
}
public class TableViewDataSource : UITableViewDataSource
{
private List<string> sectionList;
private List<string> filteredSectionList = new List<string>();
private List<string> dictionaryItems = new List<string>();
public List<string> filteredDictionaryItems = new List<string>();
public TableViewDataSource ()
{
Initialize();
}
public void Initialize()
{
sectionList = new List<string> {"A","B","C","D","E","F","G","H","J","I","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z" };
filteredSectionList = new List<string> {"A","B","C","D","E","F","G","H","J","I","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z" };
var random = new System.Random();
for(int i = 0; i < 2000; i++)
{
dictionaryItems.Add(sectionList[random.Next(26)] + sectionList[random.Next(26)] + sectionList[random.Next(26)] + sectionList[random.Next(26)]);
}
dictionaryItems.Sort();
foreach(var item in dictionaryItems)
{
filteredDictionaryItems.Add(item);
}
}
public void Search(string searchText)
{
filteredDictionaryItems.Clear();
filteredSectionList.Clear();
foreach(string item in dictionaryItems)
{
if(item.ToLower().Contains(searchText.ToLower()))
{
filteredDictionaryItems.Add(item);
if(filteredSectionList.Find(x => x == item[0].ToString()) == null)
{
filteredSectionList.Add(item[0].ToString());
}
}
}
filteredSectionList.Sort();
}
public override string[] SectionIndexTitles (UITableView tableView)
{
return filteredSectionList.ToArray();
}
public override int NumberOfSections (UITableView tableView)
{
return filteredSectionList.Count;
}
public override string TitleForHeader (UITableView tableView, int section)
{
return filteredSectionList[section];
}
public override int RowsInSection (MonoTouch.UIKit.UITableView tableview, int section)
{
return filteredDictionaryItems.FindAll(x => x.StartsWith(filteredSectionList[section])).Count;
}
public override UITableViewCell GetCell (MonoTouch.UIKit.UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
var termsinsection = filteredDictionaryItems.FindAll(x => x.StartsWith(filteredSectionList[indexPath.Section]));
string dictionaryItem = termsinsection[indexPath.Row];
string cellID = "CellID";
UITableViewCell cell = tableView.DequeueReusableCell(cellID);
if(cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, cellID);
cell.Accessory = UITableViewCellAccessory.DisclosureIndicator;
}
cell.TextLabel.Text = dictionaryItem;
return cell;
}
public override int SectionFor (UITableView tableView, string title, int atIndex)
{
return atIndex;
}
}
}
</pre>
<p>The code is up on <a href="http://github.com/kevinsheffield/MonoTouchDemos/tree/master/SectionedUITableViewSample/"> Github</a></p>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">Your Name</span></span>
<time datetime="2009-09-14T00:00:00-04:00" pubdate data-updated="true">Sep 14<span>th</span>, 2009</time>
<span class="categories">
<a class='category' href='/blog/categories/monotouch/'>Monotouch</a>
</span>
</p>
<div class="sharing">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://kevinsheffield.github.com/blog/2009/09/14/monotouch-sectioned-uitableviews/" data-via="" data-counturl="http://kevinsheffield.github.com/blog/2009/09/14/monotouch-sectioned-uitableviews/" >Tweet</a>
</div>
<p class="meta">
<a class="basic-alignment left" href="/blog/2009/08/17/monotouch-beta-3-is-out/" title="Previous Post: Monotouch Beta 3 is out">« Monotouch Beta 3 is out</a>
<a class="basic-alignment right" href="/blog/2009/09/15/monotouch-sample-code-on-github/" title="Next Post: Monotouch Sample Code on Github">Monotouch Sample Code on Github »</a>
</p>
</footer>
</article>
</div>
<aside class="sidebar">
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/2011/01/04/ruby-windows-sql-server/">Ruby + Windows + Sql Server</a>
</li>
<li class="post">
<a href="/blog/2009/09/15/monotouch-sample-code-on-github/">Monotouch Sample Code on Github</a>
</li>
<li class="post">
<a href="/blog/2009/09/14/monotouch-sectioned-uitableviews/">Monotouch : Sectioned UITableViews</a>
</li>
<li class="post">
<a href="/blog/2009/08/17/monotouch-beta-3-is-out/">Monotouch Beta 3 is out</a>
</li>
<li class="post">
<a href="/blog/2009/08/16/assignment-2b-cs193p-via-monotouch/">Assignment 2B : CS193P via Monotouch</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2012 - Your Name -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>