2. Preferences Are Available in Settings
ЗАЩО ТАБЛИЦИ?
Note Multitasking is available on certain devices runn
Most apps enter a suspended state when they transition to
the multitasking UI, which provides an effective way to find
at the bottom of the screen, below the UI of the currently ru
the iPhone Settings app).
• Как да покажем много
информация на веднъж?
• Как тя да изглежда
структурирана?
• Как да представим много
опции?
• Иерархия на
информацията
When people restart a suspended app, it can instantly resu
Monday, January 23, 12 having to reload its user interface.
3. UPDATE
• UITableView е оптимизиране за презареждане
• Заредетепърво това, което може да се види
МОМЕНТАЛНО
• GIVE VISUAL FEEDBACK
Monday, January 23, 12
4. A variation of plain-‐style table views associates an
an example of this kind of table view, which is ca
the table view with entries in the index correspon
ОСНОВНИ ПОНЯТИЯ
scrolls the table view to the associated section. Fo
abbreviations and the rows for a section could be
displays the cities for the selected state. The rows
or detail disclosure buttons, because these interfe
Figure 1-2 A table view configured as an section in
• Само една колона
• Вертикален скролинг
Monday, January 23, 12
5. Note Programmatically, these styles are applied to a table view’s cell, which is a
the table how to draw its rows.
ВИДОВЕ ТАБЛИЦИ
Default (UITableViewCellStyleDefault). The default cell style includes an opti
of theGrouped by a left-‐aligned title in black.Plain style
row, followed style
In the default cell style, the text label’s appearance implies that it represents an item
left-‐alignment makes the list easy to scan. This makes the default style good for disp
do not need to be differentiated by supplementary information.
Monday, January 23, 12
6. ВИДОВЕ ТАБЛИЦИ
Table View Styles and Accessory Views
Table View Styles
A variation of plain-‐style table views associates an index with sections for quick navigation;and Accessory Views
Table View Styles Figure 1-‐2 shows
• Section Headers • Selection
an example of this kind of table view, which is called an indexed list. The index runs down the right edge of
Table View Styles
list
the table view with entries in the index corresponding to section header titles. Touching an item in the index
scrolls the table view to the associated section. For example, the section headings could be two-‐letter state
abbreviations and the rows for a section could be the cities in that state; touching at a certain spot in the indexa selection (or radio) list (see Figure 1-‐3). A
The simplest kind of table view is
• UITableViewCellAcc
• Section Indexes
displays the cities for the selected state. The rows in indexed section lists should not have disclosure indicators that users can select. It can limit the sele
or detail disclosure buttons, because these interfere with the index.
view that presents a menu of options
essoryCheckmark
selections. A selection list marks a selected row with a checkmark (see Figur
Figure 1-2 A table view configured as an section index Figure 1-3 A table view configured as a selection list
A grouped table view also displays a list of information, but it groups related
As shown in Figure 1-‐4, each section has rounded corners and by default ap
Monday, January 23, 12
7. Table View Styles and Accessory Views
ГРУПИРАНИ ТАБЛИЦИ
Standard Styles for Table-‐View Cells
The headers and footers of sections in a grouped table view have relative locations and sizes as indicated in
Figure 1-‐5.
Figure 1-5 Header and footer of a section
Padding
Header
Table cell
Footer
Padding
• групирането помага за
бързото ориентиране
On iPad devices, table views in the grouped style automatically get wider margins when the table views
themselves are wide.
Monday, January 23, 12
8. d by a styles that implement the most common layouts for table rows inbelow. The title is
le-‐cell left-‐aligned title on one line and a left-‐aligned subtitle on the line both
ubtitle is inis best suited to display a different type of information.
cell style a smaller, gray font.
iOS UI Element Usage Guidelines
ФОРМАТ НА КЛЕТКИТЕ
Content Views
hese styles are applied to a table view’s cell, which is an object that tells
ows.
Subtitle (UITableViewCellStyleSubtitle). The subtitle style includes an optional image in th
tyleDefault). The default cell style includes an optional image in the left title on one line and a left-‐aligned subtitle on the line below.
of the row, followed by a left-‐aligned end
ligned title in black. in black and the subtitle is in a smaller, gray font.
style, the prominent appearance Element Usage Guidelines that it represents an item name
iOS UI of the text label implies
e subtle appearance of the Contenttext label implies that it contains subsidiary information
detail Views
. The left-‐alignment of the text labels makes the list easy to scan. This table-‐cell style works
ms look similar, because users can use the additional information in the detail text labels to
ems named in the text labels.
Value 2 (UITableViewCellStyleValue2). The value 2 style displays a right-‐aligned title in a small, blue
font, followed on the same line by a left-‐aligned subtitle in a larger, black font. Images do not fit well in this
ViewCellStyleValue1). The value 1 style displays a left-‐aligned title in black on the same
style.
igned subtitle in a smaller, blue font. Images do not fit well in this style.
In the subtitle cell style, the prominent appearance of the text label implies that it represents an ite
t label’s appearance implies that it represents an item name or title and its
or title, whereas the subtle appearance of the detail text label implies that it contains subsidiary in
asy to scan. This makes the default style good for displaying a list of items that
related to the item. The left-‐alignment of the text labels makes the list easy to scan. This table-‐cell s
d by supplementary information.
well when list items look similar, because users can use the additional information in the detail tex
help distinguish items named in the text labels.
Value 1 (UITableViewCellStyleValue1). The value 1 style displays a left-‐aligned title in black on
line with a right-‐aligned subtitle in a smaller, blue font. Images do not fit well in this style.
tyle, the appearance of the text label implies that it represents an item name or title, whereasand font of the text label imply that it function
In the value 2 cell style, the right-‐alignment, constrained width,
ContentView за повече customization
the detail text label implies as a heading or important information that is closely associated
that it provides caption for the important information in the more prominent, left-‐aligned detail text label.
Monday, January 23, 12 In this layout, the labels are aligned towards each other at the same location in every row. This creates a crisp
9. Note If a UIViewController object is managing the table view, it automatically receives a
setEditing:animated: message when the Edit button is tapped. In its implementation of this
message, it can update button state or do any other kind of task before invoking the table view’s
version of the method.
UITABLEVIEW
When the table view receives setEditing:animated:, it sends the same message to the UITableViewCell
object for each visible row. Then it sends a succession of messages to its data source and its delegate (if they
Undressed
implement the methods) as depicted in the diagram in Figure 7-‐1.
Figure 7-1 Calling sequence for inserting or deleting rows in a table view
Client Table View Delegate
User presses Edit button
setEditing:YES animated:YES
Data Source
tableView:
canEditRowAtIndexPath:
tableView:
editingStyleForRowAtIndexPath:
User presses editing control
User presses Delete button
tableView:commitEditingStyle:
forRowAtIndexPath:
deleteRowsAtIndexPath:
withRowAnimation
or
insertRowsAtIndexPath:
withRowAnimation:
After resending setEditing:animated: to the cells corresponding to the visible rows, the sequence of
Monday, January 23, 12
11. TRY ITiOS UI Element Usage Guidelines
Content Views
iPhone Contacts uses the value 2 cell style:
• Опитайте се да
форматирата таблица по
същия начин.
As much as possible, ensure that your text labels are succ
Monday, January 23, 12
phrases can be difficult for users to scan and understand. Te
