iOS Tutorial Set Gradient Color to a View

Discussion in 'iOS Tutorials' started by ilan, Mar 30, 2016.

  1. ilan

    ilan Expert Licensed User

    Set gradient color to a view like panel, label, imageview, button,...

    Source: http://stackoverflow.com/questions/23074539/programmatically-create-a-uiview-with-color-gradient

    Code:
    Sub SetGradient(v As View, color1 As Int, color2 As Int)
        
    Dim NaObj As NativeObject = Me
        NaObj.RunMethod(
    "SetGradient:::",Array(v,NaObj.ColorToUIColor(color1),NaObj.ColorToUIColor(color2)))
    End Sub

    #If OBJC
    - (void)SetGradient: (UIView*) View :(UIColor*) Color1 :(UIColor*) Color2{
        CAGradientLayer *gradient = [CAGradientLayer layer];
        gradient.colors = [NSArray arrayWithObjects:(id)Color1.CGColor, (id)Color2.CGColor, nil];
        gradient.frame = View.bounds;
        [View.layer insertSublayer:gradient atIndex:0];
    }
    #end if
     

    Attached Files:

    Last edited: Apr 2, 2016
  2. boredsilly

    boredsilly Member Licensed User

    This only works the first time through. If you call it again with a different color gradient on the same view nothing happens. Is there some way to modify this to always update the views color?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    You can use this code:
    Code:
    Private Sub Application_Start (Nav As NavigationController)
       NavControl = Nav
       Page1.Initialize(
    "Page1")
       Page1.Title = 
    "Page 1"
       Page1.RootPanel.Color = 
    Colors.White
       NavControl.ShowPage(Page1)
       Page1.RootPanel.LoadLayout(
    "1")

       
    'Set gradiant color to views
       For Each v As View In Page1.RootPanel.GetAllViewsRecursive
         SetGradient(v,
    Colors.RGB(Rnd(0,255),Rnd(0,255),Rnd(0,255)),Colors.RGB(Rnd(0,255),Rnd(0,255),Rnd(0,255)), False)
       
    Next
    End Sub

    Sub Page1_Click
       SetGradient(Button1,
    Colors.RGB(Rnd(0,255),Rnd(0,255),Rnd(0,255)),Colors.RGB(Rnd(0,255),Rnd(0,255),Rnd(0,255)), True)
    End Sub



    Sub SetGradient(v As View, color1 As Int, color2 As Int, Replace As Boolean)
      
    Dim NaObj As NativeObject = Me
      NaObj.RunMethod(
    "SetGradient::::",Array(v,NaObj.ColorToUIColor(color1),NaObj.ColorToUIColor(color2), Replace))
    End Sub

    #If OBJC
    - (void)SetGradient: (UIView*) View :(UIColor*) Color1 :(UIColor*) Color2 :(BOOL)replace{
       CAGradientLayer *gradient = [CAGradientLayer layer];
       gradient.colors = [NSArray arrayWithObjects:(id)Color1.CGColor, (id)Color2.CGColor, nil];
       gradient.frame = View.bounds;
       if (replace)
         [View.layer replaceSublayer:View.layer.sublayers[0] with:gradient];
       else
         [View.layer insertSublayer:gradient atIndex:0];
    }
    #end if
    It adds a Replace parameter. If it is true then the new gradient layer will replace the previous one.
     
    Pooya1, MikeH, JanPRO and 1 other person like this.
  4. boredsilly

    boredsilly Member Licensed User

    Thanks, this will be useful.
     
  5. cloner7801

    cloner7801 Active Member Licensed User

    I have 4 button And I write this code for change gradient
    every button change the background color to other gradient but this works once ! and when I click on other button it didn't work
     
  6. ilan

    ilan Expert Licensed User

    have you tried @Erel solution in post #3?
     
    cloner7801 likes this.
  7. dieterp

    dieterp Active Member Licensed User

    I have several panels to which I want to apply the same gradient colouring. They won't need to change colour again so the first code option suggested in this forum applies to my case. What I am finding though is that the panels all seem to have different shading, even though the same colours are applied to all them (Most of the Panels are the same size). Does anyone have any suggestions as to what will cause this?
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    Hard to say. It is best if you can reproduce it in a small project and upload it.
     
  9. dieterp

    dieterp Active Member Licensed User

    Uhm, sorry, my bad. I copied some code from another forum that used the 'Rnd' function when setting the colours. At first glance I thought Rnd was the equivalent of Round. Turns out it's for Random and that is why the colours were coming out different each time. All sorted now!
     
  10. Yvon Steinthal

    Yvon Steinthal Active Member Licensed User

    Is there a way to change this to horizontal gradient instead of vertical gradient?
     
  11. JanPRO

    JanPRO Well-Known Member Licensed User

    Hi,

    try to add
    Code:
    gradient.transform = CATransform3DMakeRotation(M_PI / 2001);
    to the native code.

    Jan
     
    Last edited: Sep 25, 2017
    ilan and Yvon Steinthal like this.
  12. dieterp

    dieterp Active Member Licensed User

    I am using the following code to set a vertical gradient on a view:
    Code:
    SetGradient(pnlTeam1Totals, Colors.ARGB(100155,155,155),Colors.ARGB(100255,255,255))
    This works fine until I change the orientation of the device, at which point the gradient then gets set horizontally across the view (Or it seems as if the gradient remains as it was in portrait mode and doesn't shift to landscape). I have tried putting the line of code in page.show, page.resize and page.appear but I get the same result in each case. Anyone have any suggestions for me?
     
  13. JanPRO

    JanPRO Well-Known Member Licensed User

    Hi,
    you should use Erels modified version.
    Add the gradient once with Replace = False in the Application_Start event, and add the gradient in the page resize sub again with Replace = True.

    Jan
     
  14. dieterp

    dieterp Active Member Licensed User

    Thanks Jan (And Erel). That has done the trick!
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice