Developing Mac Apps with Swift (3)

Show Insect List

In OS x, Table view uses the Nstableview class, which equates to the iOS UITableView class, but one of the biggest differences is:Nstableview Each row has multiple columns or multiple cells.

· before OS X 10.7Lion , the table view cell inherits from the Nscell class. The latter is not a NSView class, so developers need to handle drawing and mouse events themselves.

· starting with OS X 10.7 , table view inherits from NSView. This is almost the same as UITableView. The cell also has a corresponding view type, so it's similar to iOS--so we're much more relaxed!

In this tutorial, you are using the view-based TableView. If you want to know the usage of Nstableview, you can read here , which explains the usage of table views in detail.

Open masterviewcontroller.xib and select Table View. Note that table view is in Clip view in scroll view, so the first click you select will be ScrollView, the second click on the one you selected is ClipView, and the third click will select Table View.

Of course, you can also select the table view object directly from the IB's Objects panel (expand the Clip View object).

With the table view selected, in the Properties panel, confirm that the content mode item is set to view Based instead of cell Based. Also, because our list only displays a single column, the Columns property is modified to 1.

Tick the "alternating Rows" property to have the table draw cells in "alternating light and dark colors".

Uncheck the "Headers" property because we don't need to display a caption above the table.

Next we modify the size of the cell. Select the column on the table view and drag its size to occupy the entire table width.

Then the configuration of the cell. We need to display the image and name of the insect in the cell, so we need to add an image and a text control to the cells.

IB has a Nstablecellview object with an image view and text field, which we can use.

In the Object Library panel, locate "Image & Text Table Cell View" and drag it to the table View.

In table view, delete the original cell (with the DELETE key).

With the table View Cell selected, in the size panel, adjust the height to 32.

Then select the image view and the text field so that they are in the center of the cell and adjust the size of the ImageView and text field so that they look like the following:

Next you will set an ID for each column. Of course, for this tutorial, we have only one column, so the column ID may not be required.

Select the table column in the Objects panel, open the Identity panel, and set identifier to Bugcolumn.

As in iOS, Table view also has the data source and delegate properties. Under normal circumstances, both properties are the same object, that is, Masterviewcontroller.

Select Table View, open the Connections panel, and locate delegate and data source under outlets.

Click on the small circle to the right of the delegate and drag to the "File ' Owner" in the Objects panel.

This sets the delegate property of table View to Masterviewcontroller. Repeat the same action and set the data source property.

As shown in the end:

Open Masterviewcontroller.swift put the following code at the end of the file:

//MARK:-Nstableviewdatasource Extension Masterviewcontroller: nstableviewdatasource { func numberofrowsintableview(atableview: nstableview!) -> Int { return Self. Bugs. Count } func tableView(tableView: nstableview!, Viewfortablecolumn TableColumn: nstablecolumn!, row: Int) -> NSView ! { //1 var cellview: nstablecellview = tableview.makeviewwithidentifier( Tablecolumn.identifier, owner: self) as Nstablecellview //2 if tablecolumn.identifier = = "Bugcolumn" { //3 let Bugdoc = self. Bugs[row] Cellview.imageview!. Image = bugdoc.thumbimage Cellview.textfield!. StringValue = bugDoc.data.title return Cellview } return Cellview    } } //MARK:-Nstableviewdelegate Extension Masterviewcontroller: nstableviewdelegate { }

We have extended the Masterviewcontroller to use the nstableviewdelegate and nstableviewdatasource protocols.

At a minimum, you need to implement two data source methods to make the list render data.

The first is the Numberofrowsintableview method, which is used by the OS to get the number of table rows to render.

The second is the TableView (_:viewfortablecolumn:row:) method. The OS uses this method to know how to render each cell in each row. In this method, we need to populate the cells with data.

Run the program, and if everything works, we'll see the list of insects in the table.

Download Resources

In order to complete this tutorial, you may need to download these compressed packages and unzip them.

Note : in order to divide the insects into "not a bit scary" to "extreme horror" several levels, you also need to use an open source hierarchical component edstarrating, which is also included in the compression package.

In this tutorial, we won't explain how to implement this component, but just show how to use it in your project. The package also includes a nsimage category that can generate thumbnails from a large picture. In addition, there are 3 strange face pictures, which are used to show the different levels of insects.

For the edstarrating component, you can refer to its GitHub homepage.

First, create a folder named Art in the Project Navigator window and drag 3 strange face pictures into this folder-make sure "Copy items if needed" is checked, and "Scarybugsmac" in Add to targets is selected.

Create a folder named "Views" and drag EDStarRating.h and edstarrating.m to the folder. Make sure that "Copy items if needed" is checked and that "Scarybugsmac" is selected in Add to targets.

Click Finish. In the next window, when asked, "would, configure an objective-c bridgingheader?", select Yes. This will create a objective-c class to the swift code of the bridge header file.

For nsimage+extras.h and nsimage+extras.m, repeat these steps, but this time drag them into the "Helpers" folder.

Open scarybugsmac-bridging-header.h to add the following import statement:

#import "EDStarRating.h" #import "Nsimage+extras.h"

Here is the final effect, where the bridge header file has been moved to the supporting files folder:

Developing Mac Apps with Swift (3)