-
Notifications
You must be signed in to change notification settings - Fork 69
/
MJNIndexView readMe.rtf
222 lines (172 loc) · 6.35 KB
/
MJNIndexView readMe.rtf
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
{\rtf1\ansi\ansicpg1252\cocoartf1187\cocoasubrtf390
{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\froman\fcharset0 TimesNewRomanPSMT;\f2\fmodern\fcharset0 CourierNewPSMT;
\f3\fnil\fcharset0 LucidaGrande;}
{\colortbl;\red255\green255\blue255;\red170\green13\blue145;\red63\green110\blue116;\red92\green38\blue153;
\red46\green13\blue110;\red0\green116\blue0;\red196\green26\blue22;\red28\green0\blue207;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
\paperw11900\paperh16840\margl1134\margr1134\margb1134\margt1134\vieww20520\viewh13940\viewkind0
\deftab709
\pard\pardeftab709
\f0\b\fs30 \cf0 MJNIndexView
\f1\b0\fs24 \
\pard\pardeftab709
\f0 \cf0 \
\pard\pardeftab709\sl360\slmult1
\cf0 MJNIndexView is an UIControl which displays an alternative index for UITableView. I wanted to mimic the index designed by Jeremy Olson's Tapity for their Languages app. I think their idea of implementing index is brilliant and it is one of the best examples of great UX. I hope more apps are going to use similar indices instead of the generic ones.
\f1 \
\pard\pardeftab709
\cf0 \
\pard\pardeftab709
\f0\b\fs26 \cf0 Example code:
\f1\b0\fs24 \
\
\pard\pardeftab709
\f2\fs20 \cf2 @interface\cf0 \cf3 MJNIndexTestViewController\cf0 () <\cf3 MJNIndexViewDataSource\cf0 >
\f1\fs24 \
\pard\pardeftab709
\f2\fs20 \cf0 \
\pard\tx529\pardeftab709
\cf2 @property\cf0 (\cf2 nonatomic\cf0 , \cf2 strong\cf0 ) \cf3 MJNIndexView\cf0 *indexView;
\f1\fs24 \
\f2\fs20 \cf2 @property\cf0 (\cf2 nonatomic\cf0 , \cf2 strong\cf0 ) \cf4 NSMutableArray\cf0 *sectionArray;
\f1\fs24 \
\f2\fs20 \cf2 @property\cf0 (\cf2 nonatomic\cf0 , \cf2 strong\cf0 ) \cf4 UITableView\cf0 *tableView;
\f1\fs24 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 \
\pard\tx529\pardeftab709
\cf2 @end
\f1\fs24 \cf0 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 \
\pard\tx529\pardeftab709
\cf2 @implementation\cf0 MJNIndexTestViewController
\f1\fs24 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 \
- (\cf2 void\cf0 )viewDidLoad
\f1\fs24 \
\f2\fs20 \{
\f1\fs24 \
\f2\fs20 [\cf2 super\cf0 \cf5 viewDidLoad\cf0 ];
\f1\fs24 \
\f2\fs20 \
\cf6 // initialise tableView
\f1\fs24 \cf0 \
\pard\tx529\pardeftab709
\f2\fs20 \cf6 \cf2 self\cf0 .\cf3 tableView\cf0 = [[\cf4 UITableView\cf0 \cf5 alloc\cf0 ] \cf5 initWithFrame\cf0 :\cf2 self\cf0 .\cf4 view\cf0 .\cf4 bounds\cf0 ] [\cf2 self\cf0 .\cf3 tableView\cf0 \cf5 registerClass\cf0 :[\cf4 UITableViewCell
\f1\fs24 \cf0 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 \cf5 class\cf0 ]\cf5 forCellReuseIdentifier\cf0 :\cf7 @"cell"\cf0 ];
\f1\fs24 \
\f2\fs20 \cf2 self\cf0 .\cf3 tableView\cf0 .\cf4 dataSource\cf0 = \cf2 self\cf0 ;
\f1\fs24 \
\f2\fs20 \cf2 self\cf0 .\cf3 tableView\cf0 .\cf4 delegate\cf0 = \cf2 self\cf0 ;
\f1\fs24 \
\f2\fs20 \cf2 self\cf0 .\cf3 tableView\cf0 .\cf4 showsVerticalScrollIndicator\cf0 = \cf2 NO\cf0 ;
\f1\fs24 \
\f2\fs20 [\cf2 self\cf0 .\cf4 view\cf0 \cf5 addSubview\cf0 :\cf2 self\cf0 .\cf3 tableView\cf0 ];
\f1\fs24 \
\f2\fs20 \
\pard\tx529\pardeftab709
\cf6 // initialise MJNIndexView
\f1\fs24 \cf0 \
\f2\fs20 \cf6 \cf2 self\cf0 .\cf3 indexView\cf0 = [[\cf3 MJNIndexView\cf0 \cf5 alloc\cf0 ]\cf5 initWithFrame\cf0 :\cf2 self\cf0 .\cf4 view\cf0 .\cf4 bounds\cf0 ];
\f1\fs24 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 \cf2 self\cf0 .\cf3 indexView\cf0 .\cf3 dataSource\cf0 = \cf2 self\cf0 ;
\f1\fs24 \
\f2\fs20 \cf2 self\cf0 .\cf3 indexView\cf0 .\cf3 fontColor\cf0 = [\cf4 UIColor\cf0 \cf5 blueColor\cf0 ];
\f1\fs24 \
\f2\fs20 [\cf2 self\cf0 .\cf4 view\cf0 \cf5 addSubview\cf0 :\cf2 self\cf0 .\cf3 indexView\cf0 ];
\f1\fs24 \
\f2\fs20 \}
\f1\fs24 \
\f2\fs20 \
\pard\tx529\pardeftab709
\cf6 // two methods needed for MJNINdexView protocol
\f1\fs24 \cf0 \
\pard\tx529\pardeftab709
\f2\fs20 \cf0 - (\cf4 NSArray\cf0 *)sectionIndexTitlesForMJNIndexView:(\cf3 MJNIndexView\cf0 *)indexView
\f1\fs24 \
\f2\fs20 \{
\f1\fs24 \
\f2\fs20 \cf2 return\cf0 sectionArray;
\f1\fs24 \
\f2\fs20 \}
\f1\fs24 \
\f2\fs20 \
- (\cf2 void\cf0 )sectionForSectionMJNIndexTitle:(\cf4 NSString\cf0 *)title atIndex:(\cf4 NSInteger\cf0 )index;
\f1\fs24 \
\f2\fs20 \{
\f1\fs24 \
\f2\fs20 [\cf2 self\cf0 .\cf3 tableView\cf0 \cf5 scrollToRowAtIndexPath\cf0 :[\cf4 NSIndexPath\cf0 \cf5 indexPathForItem\cf0 :\cf8 0\cf0 \cf5 inSection\cf0 :index] \cf5 atScrollPosition\cf0 : \cf5 UITableViewScrollPositionTop\cf0 \cf5 animated\cf0 :\cf2 NO\cf0 ];
\f1\fs24 \
\f2\fs20 \}
\f1\fs24 \
\f2\fs20 .
\f1\fs24 \
\f2\fs20 .
\f1\fs24 \
\f2\fs20 .
\f1\fs24 \
\pard\tx529\pardeftab709
\f2\fs20 \cf2 @end
\f1\fs24 \cf0 \
\pard\pardeftab709
\cf0 \
\pard\pardeftab709
\f0\b\fs26 \cf0 Usage
\f1 :
\b0\fs24 \
\
\pard\pardeftab709\sl360\slmult1
\f0 \cf0 Only two files are required for using MJNIndexView:
\f2 MJNindexView.h
\f0 &
\f2 MJNIndexView.m
\f0 .
\f1 \
\f0 Copy both of them into your Xcode Project.
\f1 \
\pard\pardeftab709\sl360\slmult1
\f0\i\b \cf0 Make sure to include QuartzCore framework in your target.
\f1\i0\b0 \
\pard\pardeftab709\sl360\slmult1
\f0 \cf0 \
Your UIViewController must implement MJNIndexViewDataSource protocol methods. The first one of them is needed to provide the index with all section titles. The second one is needed to provide UIViewController with a title or index number selected by a user.
\f1 \
\f0 \
You can customize the look and behaviour of MJNIndex by tweaking more than 20 parameters. You can experiment with the most of them in the demo app.
\f1 \
\f0 \
If you want to change items in the index or most of its parameters after the MJNIndexView was added to the superView you should use the method \'96 (void)refreshIndexItems to recalculate every item position, size etc.
\f1 \
\pard\pardeftab709
\cf0 \
\pard\pardeftab709
\f0\b\fs26 \cf0 To do:
\f1\b0\fs24 \
\f0\b\fs26 \
\pard\pardeftab709\li720\fi-360\ri-6\sl360\slmult1
\ls1\ilvl0
\f3\b0\fs24 \cf0 \'95
\f0 Improve a curtain fade (it could behave strange when you use very large value for the right margin).
\f1 \
\ls1\ilvl0
\f3 \'95
\f0 Cocoapod
\f1 \
\pard\pardeftab709
\cf0 \
\pard\pardeftab709
\f0\b\fs26 \cf0 Credits:
\f1\b0\fs24 \
\f0\b\fs26 \
\pard\pardeftab709
\b0\fs24 \cf0 If you use this control in your app, please add some credits.
\f1 \
\
\
}