*Please note that on 10/4/2017 "BKON Connect" became "Phy", so if you see any brand inconsistencies, we simply haven't finished our updates. Please be patient -- we'll get there!*
- Right click on any image or gif and select "Open Image in New Tab" to enlarge it or use the zoom feature in your browser or os.
- This tutorial and screenshots were created using Xcode 8.3.3(8E3004b) and Swift 3.0 so if you're using another version, some instructions will be slightly different but the PhySdk will work.
Now that we have created our Xcode project and added the Phy SDK, which we did in the first tutorial, let's change the colors of our Physical Web modal view to better reflect what we want our app to look like.
Our Xcode project should currently look like this:
When we build the project on our iOS device, we should be able to scan for and discover nearby Eddystone-URL Bluetooth beacons.
Currently, our modal view displays the default SDK color values for the top navigation bar background, text color, and cell border for our nearby Physical Web Beacons. These colors don't quite fit what we want so let's customize the modal view to match our storyboard so our app flows a little bit better for our users.
Creating and adding our custom colors to the navigation bar:
In the ViewController.swift class, let's write some code to customize the colors of the navigation bar. The first thing we need to do is create the colors that we want to use for the nav bar color and decide what text color we'd like on our Physical Web modal. Let's create them at the top of our class and scope them in case we want to use those colors in other methods later on.
I found the RGB value of our former BKON Connect website blue color we used on the logo in our storyboard using Digital Color Meter, a Mac utility app. The RGB in the logo is 37, 137, 191 and I want to use this for the text color so let's create this color as a variable called awesomeBKONBlue at the top of our ViewController.swift class and be sure to set the RGB values of our UIColor using floating point notation if you're using UIColor(colorLiteralRed) like I did.
Next, I want my navigation bar color in the modal to match the same color as my main storyboard, white, so I create that as a variable called navBarColor and set it to UIColor.white so it will look white like my main storyboard when our users transition to the modal view after hitting our button.
*For more info on creating custom colors in your project, check out the Apple documentation on UIColor.
Now let's implement these new colors in our modal by using some of the calls available to us in the Phy SDK. Add the following line to the top of your scanForPWBeacons() method:
bkonManager.setBarColor(navBarColor, titleColor: awesomeBkonBlue)
When we build the app and tap our button to find Physical Web beacons, we should see these new colors reflected in our Physical Web modal navigation bar!
Using custom colors for the cell border:
Now let's change the cell border color at the bottom of our cards. I wear a lot of light gray t-shirts, so let's use light gray. Just as we did before for our navigation bar, let's create a color to use for this at the top of our class and call it myBeaconBorderColor. I used UIColor.lightGray for this but you can create a custom color just as we did for the awesomeBkonBlue variable if you'd like. All we have to do is add this new color using the setCellBarColor method provided by the PhySdk on our bkonManager object using
If we build our project on our device, we should see the cell bar color change to our light gray color!
In our next tutorial, we'll use the Phy SDK to sort the list of nearby beacons by proximity to our iOS device. Feel free to comment below if you're having any trouble and thanks!