If the Code pane isn’t open at the bottom of your window, use the View > Code menu option to open it. PaintCode provides you with the ability you to name each color used in a shape so that you can refer to them later in your code. Now, click on the right color stop, click on the color swatch, and modify the RGB values to 112 1 0 as below:
Next, click on the color swatch on the lower right of the dialog, and enter 255 0 0 for the RGB values, as shown in the screenshot below:Ĭlick the color swatch again to close the color dialog. The color stops are the circles along the bottom edge of the gradient which indicate the various colors that compose the gradient. Now, click on the bottom left color stop. In the left hand pane, click on the value for Fill, choose Add New Gradient… from the pop up dialog, and name the new gradient ButtonGradient. Next you need to change the Fill value to set the button color. So ensure that the rounded rect on your canvas is selected, and set the following properties:
You’ll notice that when you select a shape on your canvas, the panel on the left displays the properties for that shape. Now click the Round Rect button in the top toolbar and drag out a rectangle in your canvas. It’s a toggle button which will switch you between the retina and non-retina versions. If you’d like to view the retina version, click the Retina button next to the Canvas button. Note: By default you are working on the non-retina version.
You can download the trial app, or you can get the full app on the Mac App Store. To follow along with this set of PaintCode tutorials, you’re going to need PaintCode. Without further ado, it’s time to get started! Getting Started If you are new to Core Graphics, check out our Core Graphics tutorial series. Also, it is helpful (but not 100% necessary) if you have some basic knowledge of Core Graphics. To get the most of this tutorial, you need some basic knowledge of iOS development. However, any opinions in this article are honest and my own. And finally, since you’re creating your view in code you can do some cool things you couldn’t do if you were pre-generating the graphics – like easily changing the color of various aspects of the control at runtime.įull disclosure: We received some review copies of PaintCode to generate this tutorial. By drawing a view in code, you no longer have to include the images in your binary, reducing your binary size. If you were writing the Core Graphics code manually, it would take you much longer than using PaintCode. PaintCode is a neat app where you can draw user interfaces like in Photoshop – but instead of generating an image, it generates Core Graphics code!