Search code examples
unity-game-enginecellgrid-layout

Highlighting the selected cell in grid layout in unity

I am using a panel as grid lay out and a button prefab in that lay out.I can able to attach event for the button but i couldn't able to figure out how to highlight that button when user clicks on that button.Is there any way to change background color of that clone button when user clicks on that?

Solution

  • you can use onClick to call a method when the button is clicked. 

     public Button btn; 
    void Start () {
        btn.onClick.AddListener(ChangeColor);
    }

    or just use the editor, OnClick list, just note that for this, the method you want to call should be public
    enter image description here

    if you just want to highlight the button which is currently clicked and when the user clicks on another button the other button gets highlighted and this button gets back to its normal color, then that option is simply doable in the editor, just set the highlight color of the button in the editor
    enter image description here

    but if you want the buttons to change their colors after you click on them and that change is permanent then

    you can just change the color of the image property of the button, by accessing its Image property and set its color to something you want.

    void changeColor(){
pButton.GetComponent<Image>().color = yourColor;
}

    if you dont need to change the color of the image which is used in the button, but you want to change the Button normalcolor, first you keep your previous colors, then just set the new color to the normalcolor

    I also think if you want to use this method it is better to change the highlightedColor too, because after the button is pressed it, after it goes to pressed color for a second, it will enter the highlighted state until you click on another button, so I guess it is better if you change both of the colors

    public void ChangeColor()
{
    ColorBlock colorBlock = btn.colors;
    colorBlock.normalColor = Color.blue;
    colorBlock.highlightedColor = Color.blue;
    btn.colors = colorBlock;
}