Understanding the self Sizing cells and dynamic Type in iOS 8

this article reprinted to http://www.cocoachina.com/ios/20140922/9717.html

iOS Development dynamic Typeself Sizing

In iOS 8, Apple introduced a new feature of UITableView--self Sizing Cells, which is a very useful new feature in the new SDK for many developers. Before iOS 8, if you wanted to show variable-height dynamic content in a table view, you would need to calculate the row height manually, and the self Sizing cells provides a solution for presenting dynamic content. Here are some things to keep in mind when you use the self Sizing cells:

1. Defining Auto layout constraints for prototype cells

2. Specify the estimatedrowheight of the table view

3. Set the RowHeight property of the table view to Uitableviewautomaticdimension

If the last two o'clock is represented by code, it is

12	tableView.estimatedRowHeight = 44.0tableView.rowHeight = UITableViewAutomaticDimension

With only two lines of code, you tell the table view to calculate the size of the cell to match content and to render dynamically. The Self Sizing cells feature can save you a lot of time writing code and you love it!

Use the self Sizing cells to build a simple demo

The best way to learn new knowledge is to use it, and we're going to develop a simple demo to illustrate the self Sizing Cell. Starting with the project template, a simple table-based application shows a list of hotels. The prototype cell contains two single-line text labels, one for the name and one for the address. To download and run the sample project, you will see the following interface:

As is known to all, because the row height is fixed, some hotel addresses have been shortened. When developers have a large number of table views, you may often encounter such problems. In the past, you might want to solve the problem by narrowing the size of the text or by increasing the number of rows. After iOS 8, however, what you need is to use the self Sizing cells to properly display the contents of the cell, no matter how long it is.

Add Auto Layout constraint

You may be disgusted and try to avoid using auto Layout. However, without the auto layout,self Sizing cells function is also not working, it relies on constraints to determine the appropriate row height. In fact, the table view calls Systemlayoutsizefittingsize and returns the cell dimensions based on the layout constraints.

If you are using auto layout for the first time, it is recommended that you look at Auto layout Introduction first.

The project template used in this article does not use the auto layout constraint, so we will add one first. For the hotel name tag, click the Pin button in the Automatic Layout menu and add 4 spacing constraints.

Add left, right, and lower three constraints for the address label.

After the constraints are properly configured, the interface is as follows:

Set the estimated row height

After configuring the automatic layout, next add the following code to the Viewcontroller Viewdidload method:

12	tableView.estimatedRowHeight = 68.0tableView.rowHeight = UITableViewAutomaticDimension

The first line of code sets the estimated row height of the cell, which is how high the existing prototype cell is. The second line of code is to change the RowHeight property of Uitableviewautomaticdimension, which is the default line height in iOS 8. In other words, you tell the table view to calculate the size of the cell based on other information.

If you test your application, you will find that the cell is not adjustable at this point because the name and address tag of the hotel is set in one line of code, so the number of lines of code is set to zero and the label is allowed to grow automatically.

Compile and run the app again, and the table view cell adjusts to the content.

A bug?!

I'm not sure if this is a bug, but Useyourloaf also noticed the problem (blog: Self Sizing Table View cellshttp://useyourloaf.com/blog/2014/08/07/ self-sizing-table-view-cells.html). When you first show a table view, you will find that some cells do not resize correctly. But when you scroll the table view, the row height of the new cell is correct. You can force overloading to resolve this problem after the view is displayed.

12345

override func viewDidAppear(animated: Bool) {            tableView.reloadData()        }

Dynamic Type

The self Sizing cell is useful for supporting dynamic type. You may not have heard of the dynamic Type, but you may have seen the system's "Settings" screen:

The Dynamic type was originally introduced by iOS 7, allowing users to customize the size of the text to meet the needs of the app. However, only apps with the dynamic type can respond to changes in text, and only a small number of third-party apps may use the feature.

Starting with iOS 8, Apple wants to encourage developers to use the dynamic Type. As mentioned in the WWDC session, all Apple system-level applications use the dynamic Type, and the built-in label already has the animated font. When the user changes the text size, the labels also change their size.

Further, the introduction of the self Sizing cell is a way to promote the use of dynamic type, which can save a lot of time to write code to adjust the line height. If the cell can be adjusted automatically, then using the dynamic type is obvious.

You only need to change the font to the preferred font for the text type (such as the title and content body) from a custom font that is fixed in size. This means that when you run the app, it adapts to the text size changes.

Summarize

You have learned the basic self Sizing cells and the dynamic Type through this article. We encourage you to use the new features and update the app to support the dynamic Type. The Self Sizing cell is one of my favorite iOS 8 features, with just two lines of code that you can adapt to the dynamic content in the cell. In addition, you can download the full project here, but please note that I am using Xcode 6 Beta 7来 to create the project.

Understanding the self Sizing cells and dynamic Type in iOS 8