iOS Tutorial Set Gradient Color to a View

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

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

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

 

[boredsilly]

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?

 

[Erel]

You can use this 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.

 

[boredsilly]

Thanks, this will be useful.

 

[cloner7801]

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

 

[ilan]

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

have you tried @Erel solution in post #3?

 

[dieterp]

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?

 

[Erel]

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

 

[dieterp]

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!

 

[Yvon Steinthal]

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

 

[JanPRO]

Hi,

try to add

gradient.transform = CATransform3DMakeRotation(M_PI / 2, 0, 0, 1);

to the native code.

Jan

 

[dieterp]

I am using the following code to set a vertical gradient on a view:

SetGradient(pnlTeam1Totals, Colors.ARGB(100, 155,155,155),Colors.ARGB(100, 255,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?

 

[JanPRO]

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

 

[dieterp]

Thanks Jan (And Erel). That has done the trick!