in ios, mobile

Managing Color in iOS application

Choosing right color in application make it elegant, but achieving this is not an easy task. For this, we need a support from best designers. In the same time even designer cannot achieve the best layout and design in one shot. He needs to keep trying with the different color theme and figure out the best one. This is the normal process of application design, but reflecting this via coding is even tough task especially when color theme keeps changing.time even designer cannot achieve the best layout and design in one shot. He needs to keep trying with the different color theme and figure out the best one. This is the normal process of application design, but reflecting this via coding is even tough task especially when color theme keeps changing.

I came to this tutorial A Smart Way to Manage Colour Schemes for iOS Application Development by Sauvik Dolui which inspire me to write this post. This post will add more simplicity and reusability in managing color theme.

Derived Color

Derived color is a color that dynamically depends on another color. When the parent color changes derived color updated automatically. Derived color can be in the following form.

  • Highlight Color: color that will get highlighted over the parent or base color
    func highlight(withLevel highlight: CGFloat) -> UIColor {
        var red: CGFloat = 1, green: CGFloat = 1
        var blue: CGFloat = 1, alpha: CGFloat = 1
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return UIColor(red: red * (1-highlight) + highlight,
                       green: green * (1-highlight) + highlight,
                       blue: blue * (1-highlight) + highlight,
                       alpha: alpha * (1-highlight) + highlight)
    }

  • Shadow Color: Shadow does not necessarily be always black. In a colorful world, a shadow will contain black + parent color.
    func shadow(withLevel shadow: CGFloat) -> UIColor {
        var red: CGFloat = 1, green: CGFloat = 1
        var blue: CGFloat = 1, alpha: CGFloat = 1
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return UIColor(red: red * (1-shadow),
                       green: green * (1-shadow),
                       blue: blue * (1-shadow),
                       alpha: alpha * (1-shadow) + shadow)
    }
    

  • Opaque Color: parent color with opacity
    func withAlpha(_ newAlpha: CGFloat) -> UIColor {
        var hue: CGFloat = 1
        var saturation: CGFloat = 1
        var brightness: CGFloat = 1
        
        self.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: nil)
        return UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: newAlpha)
    }
    

If we consider this scenario then the following design can be easily achieved by just changing the parent color or base color.

Color Library for your application

Color library is a collection of all possible colors that your app is going to use. And the main reason of creating this color library is to centralize color holder in one place and encourage uniformity of using color in various part of your application. The traditional approach may be creating a color constant from the hex string. Just looking at the text string our mind cannot imagine what color would it be. It would be great if we could do it visually. For this, sketch along with paint code plugin provides an extremely easy way out in creating a color library and generating codes to your favorite language (objective C of swift). If this topic is new for you then take a look at this tutorial PaintCode for Sketch. In our previous image, there are just 3 primary color i.e. red, green, blue. All other color derived from these. But in the appliation only color is valid at a time So let’s create a primary color library using the sketch.appliation only color is valid at a time So let’s create a primary color library using the sketch.

  • First, create an artboard in the sketch and name it Library.

Create one rectangle and choose red as their fill color and give a shape appropriate name themeColor

  • Now click on from menu option and select paint code. Give appropriate file name ColorLibrary and finally, click on Export. You can export in your favorite language. But for this, you need to install paint code plugin for sketch first. Here’s the code generated.
import UIKit

class ColorLibrary: NSObject {
    
    
    //MARK: - Colors
    
    static let greenColor = UIColor(hue: 0.252, saturation: 1, brightness: 0.655, alpha: 1)
    static let blueColor = UIColor(hue: 0.639, saturation: 0.845, brightness: 0.58, alpha: 1)
    static let redColor = UIColor(hue: 0.999, saturation: 0.665, brightness: 0.69, alpha: 1)
    
    
}

Time to implement Philosophy

  • Create new project in Xcode and name it ManageColor
  • In the storyboard, create the following design. For now, color is not appropriate but we will fix it later in the code.
  • Create
  • Add two files, ColorLibrary.Swift and DeriveColor.swift into your project which you can get from here.

Now add following code in viewDidLoad method

  self.topview.backgroundColor = ColorLibrary.themeColor
         self.topview.layer.shadowColor = ColorLibrary.themeColor.shadow(withLevel: 0.6).cgColor
         self.topview.layer.shadowOpacity = 1
         self.topview.layer.shadowOffset = CGSize.zero
         self.topview.layer.shadowRadius = 10
        
        self.titleLabel.textColor  = ColorLibrary.themeColor.highlight(withLevel: 0.7)
        self.bottomView.backgroundColor = ColorLibrary.themeColor.withAlpha(0.2)
    }

All you now see is this.

Now onwards, if we need to change the theme color, we never need to change the code. We just need to choose the new color in a sketch and generate the new code. That’s it.

Complete sample can be downloaded from GitRepo

* more post at http://mobile.rajantwanabashu.com.np

Write a Comment

Comment

Webmentions

  • most reliable canadian pharmacies

    canada pharmacy online https://buyviagraonlinet.com/

    Nicely put, Thanks a lot.

  • prescription drugs without prior prescription

    drugstore online https://joshbond.co.uk/community/profile/shippingtousa/

    Effectively voiced without a doubt. !

  • canada drugs

    best canadian pharmacies online https://challonge.com/gyoupafefer

    You revealed this superbly.

  • canada drug

    canadian pharmaceuticals https://www.nzrelo.com/forums/users/canadianviagragenericpharmacy/

    Seriously all kinds of superb material!

  • canadian drugs

    northwest pharmacy canada https://bitcoinblack.net/community/prescription-drugs-from-canada/info/

    Great postings, Many thanks!

  • trust pharmacy canada

    Canadian Pharmacies Shipping to USA https://www.cakeresume.com/me/online-drugs-without-prescriptions-canada

    You said it adequately.!

  • prescription drugs without prior prescription

    canada online pharmacies https://www.buymeacoffee.com/pharmacies

    You actually stated that adequately.

  • canadian pharmaceuticals online

    drugs for sale https://experiment.com/users/pviagrapharmacy100mg

    Cheers. Quite a lot of advice.

  • discount canadian pharmacies

    canadian pharmacies shipping to usa https://canadianpharmaceuticalsonline.blogism.jp/archives/17866152.html

    You actually said this terrifically!

  • canadian pharmacies without an rx

    canada pharmacies online https://canadianpharmaceuticalsonline.dreamlog.jp/archives/19387310.html

    Thanks! Good stuff!

  • best erectile dysfunction pills

    erectile dysfunction medications https://piesapalbe.estranky.sk/clanky/buy-erectile-dysfunction-medications-online.html

    You’ve made your position very nicely!.

  • erectile dysfunction remedies

    erectile pills https://plancaticam.estranky.cz/clanky/best-drugs-for-ed.html

    Superb stuff. Kudos!

  • canadian pharmacies

    canadian government approved pharmacies https://500px.com/p/reisupvertketk/?view=groups

    Nicely put, Thanks a lot!

  • prescription drugs without prior prescription

    online pharmacies https://the-dots.com/projects/covid-19-in-seven-little-words-848643

    Position nicely applied!!

  • canada rx

    canadian online pharmacies https://dragonballwiki.net/forum/canadian-pharmaceuticals-online-safe/

    Nicely put. Thank you!

  • canada online pharmacies

    canada drugs https://www.cakeresume.com/me/best-canadian-pharmaceuticals-online

    Incredible loads of valuable information!

  • canadian rx world pharmacy

    canadian online pharmacies https://canadianpharmaceuticals.educatorpages.com/pages/canadian-pharmacies-shipping-to-usa

    This is nicely expressed. .

  • canadian pharmacies online

    safe canadian online pharmacies https://taylorhicks.ning.com/photo/albums/best-canadian-pharmaceuticals-online

    Great forum posts. Thank you!

  • online pharmacies

    drugs for sale https://sandbox.zenodo.org/communities/canadianpharmaceuticalsonline/

    Thank you, I enjoy it!

  • stromectol sale

    dose for stromectol https://graph.org/Order-Stromectol-over-the-counter-10-29-2

    You actually mentioned that terrifically.

  • stromectol pharmacokinetics

    treating scabies with stromectol https://orderstromectoloverthecounter.flazio.com/

    With thanks. An abundance of info.

  • buy ivermectin online

    stromectol overdose https://dramamhinca.zombeek.cz/

    You expressed that adequately.

  • how much does stromectol cost

    stromectol cream https://theosipostmouths.estranky.cz/clanky/stromectol-biam.html

    You stated this really well.

  • stromectol pills

    stromectol for head lice https://pinshape.com/users/2491694-buy-stromectol-fitndance

    Wonderful data. Thank you.

  • discount stromectol

    order stromectol no prescription https://aoc.stamford.edu/profile/cliclecnotes/

    Seriously all kinds of valuable data!

  • Canadian Pharmacies Shipping to USA

    canadian pharmacies online prescriptions https://canadianpharmaceuticalsonline.as.me/schedule.php

    Fine content. Thank you!

  • canada medication

    trust pharmacy canada

    Point certainly utilized.!

  • how to buy stromectol

    stromectol in india https://sanangelolive.com/members/girsagerea

    Cheers! A lot of postings!

  • canada pharmacy online

    canadian pharmacies mail order https://sanangelolive.com/members/canadianpharmaceuticalsonlineusa

    Kudos! Excellent stuff.

  • online canadian pharmacies

    pharmacy https://network.myscrs.org/profile/422020/0

    Beneficial information. Thank you.

  • canada online pharmacies

    list of reputable canadian pharmacies https://legalmarketplace.alanet.org/profile/421920/0

    Nicely put, Cheers.

  • pharmacy

    Canadian Pharmacies Shipping to USA https://www.myscrsdirectory.com/profile/421708/0

    Truly a lot of superb advice!

  • buying stromectol

    stromectol reviews https://soncheebarxu.estranky.cz/clanky/stromectol-for-head-lice.html

    You have made your point!

  • buying stromectol

    stromectol purchase https://order-stromectol-over-the-counter.estranky.cz/clanky/order-stromectol-over-the-counter.html

    Regards, I value it.

  • stromectol medication

    stromectol effectiveness https://500px.com/p/skulogovid/?view=groups

    Amazing tons of good information!

  • stromectol buy

    stromectol pill https://pinshape.com/users/2462910-order-stromectol-online

    You made your point!

  • stromectol generic

    stromectol scabies treatment https://pinshape.com/users/2462760-order-stromectol-over-the-counter

    Very good write ups. Thanks a lot!

  • dose for stromectol

    facts stromectol https://aoc.stamford.edu/profile/goatunmantmen/

    Useful info. Thanks!

  • stromectol effectiveness

    stromectol scabies treatment https://canadajobscenter.com/author/arpreparof1989/

    With thanks! Good stuff.

  • stromectol for crabs

    stromectol order https://orderstromectoloverthecounter.bandcamp.com/releases

    Appreciate it, Numerous content!

  • dose for stromectol

    stromectol tablets https://www.seje.gov.mz/question/order-stromectol-over-the-counter-6/

    Terrific facts. Thank you.

  • ivermectin tablets

    buy ivermectin online https://500px.com/p/orderstromectoloverthecounter

    Cheers. Ample material!

  • stromectol rosacea

    generic stromectol https://challonge.com/en/orderstromectoloverthecounter

    Kudos, Numerous info.

  • stromectol scabies

    generic stromectol https://reallygoodemails.com/orderstromectoloverthecounter

    Good material, Cheers.

  • canadian pharmacies online prescriptions

    legitimate canadian mail order pharmacies https://reallygoodemails.com/canadianpharmaceuticalsonline

    You actually expressed this exceptionally well!

  • reallygoodemails.comonlineviagra

    medication without a doctors prescription https://reallygoodemails.com/onlineviagra

    Wonderful stuff, Cheers!

  • https://buyviagraonline.home.blog/

    medication without a doctors prescription https://buyviagraonline.home.blog/

    Kudos, Numerous material!

  • no 1 canadian pharcharmy online

    online canadian pharmacies https://graph.org/Pharmacies-in-canada-shipping-to-usa-08-12

    Useful info. Many thanks!

  • https://owzpkg.zombeek.cz/

    medication without a doctors prescription https://owzpkg.zombeek.cz/

    Good knowledge. Appreciate it!

  • pedrew.zombeek.cz

    online prescriptions without a doctor https://pedrew.zombeek.cz/

    Thanks a lot. An abundance of posts.

  • canadian pharmacies online

    canadian pharmacies that ship to us https://lasevs.estranky.cz/clanky/pharmaceuticals-online-australia.html

    Nicely put. Regards.

  • https://gswera.livejournal.com/385.html

    online prescriptions without a doctor https://gswera.livejournal.com/385.html

    Amazing a lot of wonderful info!

  • safe canadian online pharmacies

    canada pharmacies https://www.divephotoguide.com/user/Pharmacy

    Kudos. I appreciate it!

  • canadian rx

    global pharmacy canada https://www.reddit.com/user/dotijezo/comments/9xlg6g/online_pharmacies/

    Amazing lots of good tips!

  • canadian pharmacies

    canadian prescriptions online http://lwerfa.iwopop.com/

    Seriously quite a lot of excellent advice!

  • canadian pharmacies that ship to us

    canadian pharmacies https://iercvsw.wordpress.com/2022/06/14/canadian-pharmacies-the-fitting-manner/

    Thanks. Helpful stuff!

  • canada pharmacy online

    canadian rx world pharmacy https://kwsde.zombeek.cz/

    You made your point.

  • canadian discount pharmacies

    pharmacy canada https://selera.mystrikingly.com/

    You said it very well..

  • kedmnx.estranky.skclankyonline-medicine-tablets-shopping-the-best-manner.html

    medication without a doctors prescription https://kedmnx.estranky.sk/clanky/online-medicine-tablets-shopping-the-best-manner.html

    Useful knowledge. Many thanks.

  • canadian pharmacies without an rx

    canadian drug http://pharmacy.prodact.site/

    You said it perfectly.!

  • medicine-online.estranky.skclankyunderstand-covid-19-and-know-the-tricks-to-avoid-it-from-spreading-----medical-services.html

    online prescriptions without a doctor https://medicine-online.estranky.sk/clanky/understand-covid-19-and-know-the-tricks-to-avoid-it-from-spreading—–medical-services.html

    You explained it perfectly.

  • canadian pharmaceuticals

    canada pharmacy online http://site592154748.fo.team/

    Thanks a lot, I enjoy this.

  • canadian drugs

    canada pharmacies online prescriptions https://avuiom.sellfy.store/

    You actually said that very well.

  • canadian mail order pharmacies

    canada drug https://hekluy.ucraft.site/

    Seriously tons of wonderful tips.

  • https://kerntyast.flazio.com/

    online prescriptions without a doctor https://kerntyast.flazio.com/

    Wow loads of valuable information.

  • canadian pharmacies online prescriptions

    online canadian pharmacies http://ime.nu/cialisonlinei.com

    You reported it fantastically!

  • canadian rx

    canadian pharmacies without an rx https://6270e49a4db60.site123.me/blog/the-untold-secret-to-mastering-aspirin-in-just-7-days-1

    Great data, Thanks!

  • canada pharmacies online

    canadian pharmaceuticals https://sernert.estranky.sk/clanky/confidential-information-on-online-pharmacies.html

    Really loads of wonderful advice!

  • canadian mail order pharmacies

    canadian drug https://heswcxc.wordpress.com/2022/04/30/online-medicine-tablets-shopping-promotion-one-hundred-and-one/

    Regards. An abundance of info.

  • sehytv.wordpress.com

    online prescriptions without a doctor https://sehytv.wordpress.com/

    With thanks! I appreciate this.

  • pharmacy

    northwest pharmacies https://site128620615.fo.team/

    Nicely put. Appreciate it!

  • canada rx

    best canadian mail order pharmacies https://seketu.gonevis.com/high-10-tips-with-order-medicine-online-1/

    Thanks, Loads of tips!

  • pharmacy

    canadian rx world pharmacy https://andere.strikingly.com/

    You actually expressed it well.

  • canadian pharmacies

    northwest pharmacy canada https://telegra.ph/How-Has-The-COVID-19-Pandemic-Changed-Our-Lives-Globally-02-24

    You’ve made your position very effectively!.

  • гдз по геометрии 11 класс

    northwest pharmacies http://cteniztan.webcindario.com

    Thanks! Awesome information!

  • гдз по русскому тростенцова

    canadian pharmacies http://fiepulcli.webcindario.com

    With thanks, Ample advice.

  • гдз мордкович 10

    canadian discount pharmacies http://exworwebp.webcindario.com

    Wow lots of superb advice!

  • гдз по русскому языку 8

    canadian pharmaceuticals http://tiopansa.webcindario.com

    Good tips. Thanks a lot!

  • гдз макарычев 9

    northwest pharmacies http://esecdi.webcindario.com

    Point nicely used!.

  • гдз 2010

    canada drugs online http://mastlina.webcindario.com

    Reliable advice. Kudos!

  • гдз 7 класс по английскому

    northwest pharmacies http://fizzbenree.webcindario.com

    Really tons of valuable info!

  • купить виагру без рецепта

    canadian pharmacies https://viagravonline.com/

    Wonderful material. Thank you!

  • sildenafil 100mg

    canada pharmacies online prescriptions http://www.viagraessale.com/

    Wow tons of good info.