iOS Tutorial Set Gradient Color to a View

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

B4X:
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
 

Attachments

Last edited:

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?
 

Erel

Administrator
Staff member
Licensed User
You can use this code:
B4X:
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.
 

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
 

ilan

Expert
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
have you tried @Erel solution in post #3?
 

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?
 

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!
 

dieterp

Active Member
Licensed User
I am using the following code to set a vertical gradient on a view:
B4X:
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?
 
Top