Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to define colors in XCodes' Interface Builder?

I would like to copy colors between elements in the Interface Builder or define them using RGB values. For example, I'd like to copy the background color of a button to another button without duplicating the button.

Alternatively, entering exact RGB codes in Interface Builder would suffice; that way I can make sure my buttons have the exact same color.

Currently I only know how to do this programmatically, but surely there is a way to do it in Interface Builder?

like image 471
favo Avatar asked May 22 '10 19:05

favo


People also ask

How do I customize colors in Xcode?

To create a color from our palette, we can do it directly by selecting the Assets. xcassets folder (or creating our own . xcassets folder for colors) in the project navigator (Project Navigator). Then we right click and select New Color Set.

How do I add custom colors in Swift UI?

You need to create a new color by right-clicking anywhere in the list to open a menu, just click Color Set and you name the color however you want. Now open the Inspectors tab in the upper-right of your screen, you will see options that allow you to modify that color set.

How do I color my name in Xcode?

Since Xcode 9.0 we've been able to create named colors directly inside asset catalogs, which means it's possible to select a precise color once then use it uniformly across all code and storyboards. To try this out, open your asset catalog, click the + button, then choose New Color Set from the menu that appears.

How do you add a custom color to a storyboard?

Open your asset catalog, click the + and add a color set. Click on the color that was created and you can name it and set the color using the inspector. Thereafter that color shows up in storyboard color chooses in the area called Named Colors.


2 Answers

To copy a custom-defined color between different elements you should save it. To do this, first define the color in the Colors window (e.g. by entering RGB values into field as described in Vladimir's answer). Then simply drag from the top panel of the colors window where your resulting color is shown into one of the small square boxes at the bottom. It will be saved.

Illustration

like image 69
M.Y. Avatar answered Sep 18 '22 20:09

M.Y.


To set RGB value in IB you should

  1. Click on corresponding element in Inspector window to invoke "Colors" dialog (e.g. Background color, text color etc)
  2. On the toolbar choose the "Sliders" icon
  3. Choose "RGB Sliders" in combo box.

Now you should be able to set RGB values for the color.

Sorry, I don't know if it is possible to copy color values between different elements easily...

like image 23
Vladimir Avatar answered Sep 20 '22 20:09

Vladimir