Tutorial [Template] How to add a Header Image to your PreferenceBundle (PFHeaderCell)

Rook · August 28, 2016

This tutorial will be about adding a header image to your Preference Bundle or Patcher using PFHeaderCell by PixelFire.

It was requested by @@dzcracker here.

Before we begin, the tutorial will be newbie friendly but you can also follow the simple instructions on the Developers GitHub page: https://github.com/PixelFireDev/PFHeaderCell

@@castix also made a Template with the Header Cell ready to be used which can be downloaded from here: https://www.dropbox.com/s/odkqwl2ljbqfj9g/iosgods_pfheader.nic.tar (extract it to /theos/templates/iphone/)

Requirements:
- Jailbreak
- Theos installed (Tutorial here)
- iFile/Filza/iFunBox/iTools etc. for editing the files.

Instructions:
We will be using the Patcher Temaplate from here for ease instead of the default theos templates.

Step 1: Start a new project and select the iosgods/patcher option if you're using the template above.

iOSGods-iPad:~ root# /var/theos/bin/nic.pl
NIC 2.0 - New Instance Creator
------------------------------
  [1.] iosgods/bettertweak
  [2.] iosgods/cscipatcher
  [3.] iosgods/patcher
  [4.] iosgods/patcherheader
  [5.] iosgods/tweak
  [6.] iphone/application
  [7.] iphone/library
  [8.] iphone/tool
Choose a Template (required): 3
Project Name (required): TestHeader
Package Name [com.yourcompany.testheader]: iosgods.com.testheader
Author/Maintainer Name [System Administrator]: DiDA
[iosgods/patcher] MobileSubstrate Bundle filter [com.apple.springboard]:
[iosgods/patcher] List of applications to terminate upon installation (space-separated, '-' for none) [SpringBoard]: -
Instantiating iosgods/patcher in testheader/...
Done.
iOSGods-iPad:~ root#

Step 2: Download the PFHeaderCell.mm and PFHeaderCell.h from here https://github.com/PixelFireDev/PFHeaderCell

Step 3: Send the PFHeaderCell.mm and PFHeaderCell.h to your /ProjectFolder/ProjectFolderPreferences/ (in my case it's /var/root/testheader/TestHeader/)

Step 4: Now we need to include the 2 files inside Makefile so edit your Makefile with any text editor and PFHeaderCell like this:

ProjectName_FILES = ProjectName.mm PFHeaderCell.mm

ARCHS = armv7 arm64
include theos/makefiles/common.mk

BUNDLE_NAME = TestHeader
TestHeader_FILES = TestHeader.mm PFHeaderCell.mm
TestHeader_INSTALL_PATH = /Library/PreferenceBundles
TestHeader_FRAMEWORKS = UIKit
TestHeader_PRIVATE_FRAMEWORKS = Preferences

include $(THEOS_MAKE_PATH)/bundle.mk

internal-stage::
	$(ECHO_NOTHING)mkdir -p $(THEOS_STAGING_DIR)/Library/PreferenceLoader/Preferences$(ECHO_END)
	$(ECHO_NOTHING)cp entry.plist $(THEOS_STAGING_DIR)/Library/PreferenceLoader/Preferences/TestHeader.plist$(ECHO_END)

Step 5: Save the Makefile and enter the "Resources" folder so we can edit the ProjectName.plist.

Step 6: Edit the ProjectName.plist inside /ProjectFolder/ProjectPreferences/Resources/ and add this XML code at the top right under the <array> tag opens.

<dict>
    <key>cell</key>
    <string>PSStaticTextCell</string>
    <key>cellClass</key>
    <string>PFHeaderCell</string>
    <key>background</key>
    <string>#EFEFF4</string>
    <key>image</key>
    <string>/Library/PreferenceBundles/ProjectNamePreferences.bundle/header.png</string>
    <key>height</key>
    <integer>100</integer>
</dict>

Example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>items</key>
	<array>
		<dict>
			<key>cell</key>
			<string>PSStaticTextCell</string>
			<key>cellClass</key>
			<string>PFHeaderCell</string>
			<key>background</key>
			<string>#EFEFF4</string>
			<key>image</key>
			<string>/Library/PreferenceBundles/TestHeader.bundle/header.png</string>
			<key>height</key>
			<integer>100</integer>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSGroupCell</string>
			<key>footerText</key>
			<string>This text will appear under your first switch.</string>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSSwitchCell</string>
			<key>default</key>
			<false/>
			<key>defaults</key>
			<string>iosgods.com.testheader</string>
			<key>key</key>
			<string>kKey</string>
			<key>label</key>
			<string>Switch Text 1</string>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSGroupCell</string>
			<key>footerText</key>
			<string>This text will appear under your second switch.</string>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSSwitchCell</string>
			<key>default</key>
			<false/>
			<key>defaults</key>
			<string>iosgods.com.testheader</string>
			<key>key</key>
			<string>kGems</string>
			<key>label</key>
			<string>Switch Text 2</string>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSGroupCell</string>
		</dict>
		<dict>
			<key>cell</key>
			<string>PSTextCell</string>
			<key>label</key>
			<string>Made by DiDA.</string>
		</dict>
		<dict>
			<key>action</key>
			<string>link</string>
			<key>cell</key>
			<string>PSButtonCell</string>
			<key>icon</key>
			<string>[email protected]</string>
			<key>label</key>
			<string>Visit iOSGods.com</string>
		</dict>
	</array>
	<key>title</key>
	<string>TestHeader</string>
</dict>
</plist>

Step 7: Save the plist you just modified and now we will need the Header Images.

Headers have to be scaled in 320x100 pixels and 640x200 (or 750x250 - mess around with the resolutions) for @2x resolution. For best results, make the header image with a transparent background so open up Photoshop and get to work.

Once you have your images, place them in the /Resources/ folder and make sure their names are header.png & [email protected] otherwise the header image won't appear.

Step 8: Now compile and install your package then check your iDevice settings.

iOSGods-iPad:~ root# cd /var/root/testheader
iOSGods-iPad:~/testheader root# make package install

Finished result:

The head quality of the picture if because I resized the image with Photoshop instead of making it from scratch.

Credits:
PixelFireDev
@castix

@DiDA