Tips for Customizing Your ViewController
Working on my own side project, I wanted to make sure my app was not only functioning well, but also looking good. I already gave my take on PaintCode and its capabilities in this blog, so I will focus more on the code side of things here. Having struggled with Views and layout configurations early on, I made it a point to learn some tricks that would help me out moving forward.
Often times I found myself looking for more dynamic colors than what the Xcode library had to offer. Since I have been using PaintCode, I have been creating a lot of custom colors and gradients; since these are not UIColor class objects I needed a different way to bring them into my ViewController implementation file. After laying some groundwork (thanks Tim!) I needed to find a way to convert my colors into a class the Xcode compiler would accept.
In the above code, my custom color (a gradient in this case) is converted into a UIImage sized exactly to the element I was looking to change the color of. Having stumbled upon the “colorWithPatternImage:” method, I was able to transform my new image into a color itself. This new UIColor is then used to color my element with the “setTitleColor” method. What is interesting about the “colorWithPatternImage:” is that it can take not only gradients, but actual pictures, and turn then into a UIColor layer that you could use on your design elements.
- Lay the groundwork to allow yourself to convert your color into a UIImage. In my case, this required me to call PaintCode’s “PCGradient” class on a rectangle. Then I could make a method to turn the rectangle into a UIImage.
- Use said method to make a UIImage.
- Convert the image to a UIColor using the “colorWithPatterImage” method.
- Set your view elements’s color to your new UIColor.
Beziers are lines that can be connected using points within the view. These can be straight, curved, or connected to other bezeirs.
This code is unfortunately very messy, and having to rewrite this every time you want to use a specific shape would be miserable. Luckily there is an easy way to make this shape appear in your ViewController with only having to write this code once.
- Make a subclass of what it is you are trying to put on the screen, a UIView for example. Name it whatever you want.
- In your new subclass, un-comment the “drawRect:” method. This is where you are going to be putting your bezier code and whatever else you need to make your custom shape.
- Then, change the class of your UIView to your new subclass. Xcode will take care of the rest. You might need to make a few tweaks to your code in order to fit the size of your ViewController element.
The standard buttons that Xcode allows you to make in Xcode are not the most appealing (standard rectangles and squares, gross). There are two way to round out your button to make it look nice and smooth. You can either do this in code, or if you are like me and already have a large amount of code in your VC implementation, you can opt for the interface builder route.
- Click on the button in your view and select the Identity Inspector on the Utilities panel in Xcode.
- Go down to the “User Defined Runtime Attributes” section.
- Set your Key Path to “layer.cornerRadius”.
- Set your Type to String.
- Set your value to a number between 1–10.
Voilà! A beautiful curved button.
Using these simple tricks can take your app’s look to the next level. But you should probably make sure your app works before you worry about its appearance.