CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.ios
Jeppe Christensen
Jeppe Christensen

Reputation: 1890

CustomRenderer for Button background color transition

I have made a customrenderer for changing the TitleColor and BackgroundColor when an user click my button.

For some reason, when the button is focused, the TitleColor is turning more or less transparent, and my background doesn't animate like my TitleColor.

This is my code: 

public class BtnRendereriOS : ButtonRenderer
{

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);


        if (Control != null)
        {
            Control.Layer.CornerRadius = 0;

            BackgroundNormalState(Control);            

            Control.TouchUpInside += (object sender, EventArgs c) =>
            {
                BackgroundNormalState(sender);
            };
            Control.TouchUpOutside += (object sender, EventArgs c) =>
            {
                BackgroundNormalState(sender);
            };
            Control.TouchDragOutside += (object sender, EventArgs c) =>
            {
                BackgroundNormalState(sender);
            };
            Control.TouchDragInside += (object sender, EventArgs c) =>
            {
                BackgroundChangedState(sender);
            };

            Control.TouchDown += (object sender, EventArgs c) =>
            {
                BackgroundChangedState(sender);
            };
            void BackgroundNormalState(object sender)
            {
                Action a = () => Control.SetTitleColor(UIColor.FromRGB(255,255,255), UIControlState.Normal);
                UIView.PerformWithoutAnimation(a); 

                (sender as UIButton).BackgroundColor = UIColor.FromRGB(3, 169, 244);

            }
            void BackgroundChangedState(object sender)
            {
                Action a = () => Control.SetTitleColor(UIColor.FromRGB(0,0,0), UIControlState.Highlighted);
                UIView.PerformWithoutAnimation(a);

                (sender as UIButton).BackgroundColor = UIColor.FromRGB(104, 206, 253);
            }
        }
    } 
}

Currently, I have removed the animation from the TitleColor.

My questions are:

Upvotes: 1

Views: 513

Answers (2)

Ax1le
Ax1le

Reputation: 6643

How do I remove the "transparency" from the TitleColor when the button is being focused?

This is the feature of system button, if you don't like this try to use Custom style to avoid it:

UIButton btn = new UIButton(UIButtonType.Custom);
btn.SetTitle(Control.TitleLabel.Text, UIControlState.Normal);
SetNativeControl(btn);
// Pay attention to that the title color just needs to be set once
btn.SetTitleColor(UIColor.FromRGB(255, 255, 255), UIControlState.Normal);
btn.SetTitleColor(UIColor.FromRGB(0, 0, 0), UIControlState.Highlighted);

Then you can use UIView.Animate() to change your button's background color with "transition":

void BackgroundNormalState(object sender)
{
    UIView.Animate(0.2, () =>
    {
        (sender as UIButton).BackgroundColor = UIColor.FromRGB(3, 169, 244);
    });

}
void BackgroundChangedState(object sender)
{
    UIView.Animate(0.2, () =>
    {
        (sender as UIButton).BackgroundColor = UIColor.FromRGB(104, 206, 253);
    });
}

Upvotes: 1

SushiHangover
SushiHangover

Reputation: 74144

You can either use UIView.Animate|Async or UIView.TransitionNotify|Async depending upon the end result you are looking for. The key is to place all the changes within the same animation block so they occur at the same time via Core Animation (CA).

Here is an example using UIView.TransitionNotifyAsync using a TransitionCrossDissolve between the color changes.

// Set intial values
var normalTextColor = UIColor.FromRGB(255, 255, 255);
var normalBackgroundColor = UIColor.FromRGB(3, 169, 244);
var highlightTextColor = UIColor.Black;
var highlightBackgroundColor = UIColor.FromRGB(104, 206, 253);
Control.SetTitleColor(normalTextColor, UIControlState.Normal);
Control.BackgroundColor = normalBackgroundColor;

async Task NormalColorState(UIButton button)
{
    await UIView.TransitionNotifyAsync(button, .25, UIViewAnimationOptions.TransitionCrossDissolve, () =>
    {
        button.BackgroundColor = normalBackgroundColor;
        button.SetTitleColor(normalTextColor, UIControlState.Normal);
    });
}
Control.TouchDown += async (object sender, EventArgs e) =>
{
    var button = sender as UIButton;
    await UIView.TransitionNotifyAsync(button, .25, UIViewAnimationOptions.TransitionCrossDissolve, () =>
    {
        button.BackgroundColor = highlightBackgroundColor;
        button.SetTitleColor(highlightTextColor, UIControlState.Highlighted);
    });
};
Control.TouchUpInside += async (object sender, EventArgs e) =>
{
    await NormalColorState(sender as UIButton);
};
Control.TouchUpOutside += async (object sender, EventArgs e) =>
{
    await NormalColorState(sender as UIButton);
};

Upvotes: 0

Related Questions