Following your enthusiastic comments to the first two parts of my demo PDF reader app, here is the third part of two which shows you how you can customise it in Xcode to display its documents in the way that you want.
Open the project in Xcode, and increment its version number, here to 1.0b2.
It’s up to you how you manage and format these, but don’t build a new version to use without giving it a new number. It can be confusing as to where this appears in all the project settings: at the extreme left of the window, select the project at the top, then in the view sidebar select the Target, then click the General item above.
Change window and view sizes
Most of the work in this article is going to be carried out in Interface Builder (IB), so select the Main.storyboard, and in its interface view, select the Window, which is above the View Controller. Select the Size Inspector at the upper right, and you’ll see the initial window size. Change the Width and Height to more useful starting figures, like 600 x 600.
If you want to impose a minimum window size, tick the Minimum Content Size checkbox, and you’ll find the default values copied into it. If you have controls which need a window of minimum size, this is very useful, but here it’s probably not necessary.
When you set those, the Window shown grows and overlaps the View Controller below. Drag it up so they are adjacent rather than on top of one another, and then select the View Controller.
Wherever you click in the View Controller, you’ll probably select one of the deeper objects rather than the View itself, so in the left sidebar click on the View just below the top of the object hierarchy.
Change its Width and Height to match those of the Window, in my case 600 x 600. Again, once it is resized you’ll need to drag the View Controller clear of the Window so they don’t overlap.
Note that the objects within that window have automatically resized to fill it, as they already have full autoresizing turned on. Where you’re working with a more complex dialog with anchored objects of fixed size, like buttons, you’ll probably need to adjust them now.
At this point, you might need to adjust the Constraints, by removing them all and then reapplying them. However in this case, because the constraints are simple, you shouldn’t need to do so.
Changing the Thumbnail view
You can also adjust the width of the thumbnail view. The best way to do this is to select the Split View, then click once or twice on the divider until the pointer changes and you can drag it. When you think you’ve got the right width, select the Thumbnail view and check its width. Here I’m aiming for 134, which is a little more than 128, which is the intended width of the page thumbnails.
With the Thumbnail view selected, switch to the Attributes Inspector, and adjust the Thumbnail Size at the top, here to 128 x 128.
Currently, the thumbnail view lets you drag thumbnails around to reorder the pages. You might want to disable that, as you won’t be saving the modified PDF. That’s up to you.
Still in the Attributes Inspector, select the PDFView itself, and look at the options there. Don’t worry about the Scaling, as we set that to scale automatically in the code. For many of these options, you can set them either in IB or in your code.
The other Inspector you’ll sometimes need to use is the Connections Inspector. With the PDFView still selected, click on the Connections Inspector to see links to and from that view.
The only one shown as being connected should be in the Referencing Outlets, your link made to the IBOutlet variable thePDFView in the ViewController.swift source file.
Look at the list of Received Actions: these are user actions which can be connected to IBAction functions in your source code, to perform features such as going to the first page, or the last.
Now build and run your app and see what differences that has made. Although the window size has changed correctly, the size of the thumbnails hasn’t.
To fix this, you need to alter the thumbnail size in the code. Quit any running copy of the app, and select the ViewController.swift file. Insert the two lines of code as shown.
let theSize = self.theThumbnailView.thumbnailSize
self.theThumbnailView.thumbnailSize = CGSize(width: (theSize.width * 1.1), height: (theSize.height * 1.1))
This first of all gets the current thumbnail size, as a CGSize type, then changes the thumbnailSize setting to 1.1 times that. This may not appear the correct scaling factor, but try it out and it should prove just about right.
Build and run, and continue to adjust until you’ve got the document window the way that you want it. Because there are so many interdependent controls, get the most important ones right first – here, perhaps, the size of the thumbnails – then make final adjustments to the window and view size to fit them well.
If you’re building frequently in Xcode 10.1, you may suddenly come across a build failure with a red error, such as a signature problem. Don’t panic: save any changes and quit Xcode, open your project up again, and use the Clean Build Folder command in the Product menu to remove all the old build files. This will force the next build from scratch and rather slow, but it shouldn’t throw the same error.
That covers most of the easy customisations to the interface. There are many more features which rely on additional code, such as searching the text in a PDF document, and saving its contents in Rich or plain text formats. Perhaps we can look at some of them next week, if there’s sufficient interest.