Let's talk about the TableView. You might have thought that it's a ListView. But no. in Apple's terminology, this is a table view. And a table view presents data in a scrollable single column list of multiple rows. Use the table view to display small to large amounts of least style information.

Generally speaking, tables are ideal for text based content, and often appear as a means of navigation. On one side have a split view with the related content shown on the opposite side. The TableView is a very common user interface element for listing content. Most apps use some form of table view. That's because it can be very basic or highly customized down to the smallest elements. You can see a few examples here.

Let's dive into the details. A table view displays data in rows can be divided by sections or separate into groups. In the example on the left, we have the sections. And in the example on the right we have the groups. A table view can provide controls that let users add or remove rows, select multiple rows, see more information about a row item, or reveal another table view. I have as defined two styles of table view.

The first one is the plane style. In the plane style rows can be separated into labelled sections, and an optional index can appear vertically along the right edge of the view. As you see on the second image here. A header can appear before the first item in a section, and a footer can appear after the last item. As you see in the Contacts app, the letters are the section headers. And other ones one is the group style and then the group style grows.

Played in groups, which can be preceded by a header and followed by a footer. The main visual difference of a group style from the plain style divided into sections is that there's some empty space between the groups. In both styles, a table row becomes highlighted briefly when the user taps a selectable item. Moreover, if that tap results in the navigation to a new strain, keep the selected row highlighted while transition takes place. And when the user navigates back to the previous screen there originally selected row again becomes highlighted briefly to remind the user of the earliest selection is includes some table view elements that can extend the functionality of table views. Note that mostly these elements are suited for use with table views only.

Let's quickly go over these elements checkmark indicates that they're always selected. A disclosure indicator, lets us know that there's going to be another table use, we tap on this item. Detail disclosure button displays additional details about the role in the new view. It can be in a popover or a separate view. Here's an example of a detail disclosure button in action. In the list of recent calls, you can tap this button and see more details in a separate view are already ordered reorder element indicates that the role can be tracked to another location in the table.

And these tracking should happen only upon dragging this icon and not the whole row. Sometimes the reordering is only available in an edit mode. This is how it works. You go into edit mode, then you can track the items book holding their order item. Row insert element adds a new row to the table. A delete button control in an editing context reveals and hides the delete button for a role.

So you tap the minus icon, and then the delete button appears, which you can tap and confirm the removal of the item. So this is how the edit and mode looks like and how the Delete works. iOS also defines four table styles. Each cell style is best suited to display a different type of information. The default cell style includes an optional image in the left of the role, followed by a left aligned title. The default style is good for displaying a list of items that don't need to be differentiated by supplementary information.

Also note that there are these default separation lines between the roles and note that they Don't go onto the image area. The subtitle style includes an optional image in the left of the roll, followed by a left aligned title on one line and the left line subtitle on the line below. The left alignment of the text labels makes the list easy to scan. Then there is a style called value one. And this style displays a left align title with the right line subtitle in the lighter font. That subtitle is a value.

You can display various values, like what exact ringtone you have for certain things, or amounts of something for instance, value to style displays, or right align title in a blue font, followed on the same line by left align subtitle in the black font. In the value to layout, the crease vertical margin between the text and the detail text helps users focus on the first words of the detail text label. Images don't fit well in this style. And honestly, I haven't seen this style much, or at all. I suppose it makes sense. If you need to focus users attention more on the subtitle content, and not on the title content.

My advice, don't use this style. It's weird. I mean, not the best alignment of elements, you know. All the four standard styles allow the addition of TableView elements, such as checkmark, or disclosure indicator. And of course, adding these elements decreases the width of the cell available for the title and subtitle, the foreo. Here are some possible combinations.

We have a cell with addition of an image, a cell with an image value and a disclosure icon. Sell with a detail disclosure button, a value two type of sell with addition of a checkmark and the subtitle type of sale with the detail disclosure button and the disclosure icon. Let's now discuss some examples of how you could use the table view. For example, you can provide a list of options from which users can select some. It can be just a single item selection, like in this example, and select it in this case takes you back to the previous table. Or it can be a selection that allows choosing multiple options.

In that case, typing a Done button would be necessary to finish the task for example, selecting the maximum possible amount. You can use either plane or group table view to display a list of choices that appears when user stop an item in a table row. But use only a plain view to display a list of choices that appears when users tap a button or other UI element that was not in a table row. Another use case is to display some hierarchical information. The plain table style is well suited for displaying a hierarchy of information. Each list item can lead to a different subset of information displayed in another list.

Users follow a path through the hierarchy by selecting one item in each successive list. The disclosure indicator tells users that tapping anywhere in the role reveals the subset of information in a new list. You can also display conceptually grouped information. Both table use styles allow you to provide context by supplying header and footer between sections of information. You can even have some actions and controls in the table cells. Now let's go over some more guidelines from Apple.

As mentioned before, always provide feedback. When users select at least item, users expect table roll to become highlighted briefly when they tap a selectable item in it. After tapping, users expect a new view or check mark to appear to indicate that the item has been selected or enabled. If a table content is extensive or complex, avoid waiting until all the data is available before displaying anything. Instead, feel the on screen roles with contextual data immediately and display more complex data such as images as they become available. These techniques gives users useful information right away, and increases the perceived responsiveness of your app.

Consider displaying stale old data while waiting for new data to arrive. Although this technique isn't recommended for apps that handle frequently changing data, but it can help more static apps give users something useful right away. Before you decide to do this, assess how often the data changes and how much users dependency and fresh data quickly. If the data is slow loading or complex show users that processing is continuing. If they will table contains only complex data, it may be difficult to display anything useful right away. In these rare cases, it's important to avoid displaying empty rows, because empty rows can imply that your app has stalled.

Instead, the table should display a spinning activity indicator along with informative label, such as loading center on the string. These behavior reassures users that processing is continuing. if appropriate, use a custom title for the delete button. If it helps users to better understand the way your app works, You can create a title to replace the system provided delete title. As much as possible. Use succinct, in other words short and easily understandable text labels to avoid truncation.

Truncated words and phrases can be difficult for users to scan and understand. Text truncation is automatic in old table cell styles, but it can present more or less of a problem. Depending on which cell style you use and where truncation occurs. Avoid combining an index with the elements that are displayed on the right edge of the table. The elements that are displayed on the right edge of the table, such as the disclosure indicator, interfere with the index, which is also on the right. In simpler words, when you have in the index, don't put other stuff on the right side of the cells.

Create a custom table cell style If you want to layout your table rows in a non standard way, here are some examples of the table views you can create. In the first one, we have the numbering, rating and price, which also acts as a Buy button. On the second one, we have different kinds of textual information in each item. On the third one, we have images and the more I can keep content fresh. Consider updating your tables content regularly to reflect newer data. Just don't change the scrolling position.

Instead, add the content to the beginning or end of the table and let people scroll to it when they're ready. Some apps display an indicator when new data has been added and provide a control for jumping right to it. So it's a good idea to include the refresh control so people can manually perform an update at any time at all, So I want to mention a popular UI pattern for interacting with cells, which is not included in the guidelines. Just swipe from the right and sometimes also from the left and choose different actions. This is a much better pattern for removal of elements as well. Instead of standard flow, first tap into Edit leads, then press the minus icon and then confirm deletion.

No, just swipe and tap the action that you need. Within this pattern, you sometimes can swipe away the whole cell deleted or swipe it away to the right to perform one action and swipe it to the left to perform some other action.