How to remove spacing between buttons in Unity3D?

问题

I'm creating buttons programmatically in a game I'm designing in Unity. I instantiate the button prefab and parent them to the Panel object on the canvas. I've set the Panel to have a Horizontal Layout Group with the following properties:

I've added the following components to the button prefab to achieve the look I require:

After doing all this here's the result I end up with:

Therefore, my question is, how can I remove the spacing between each of the buttons? The buttons are supposed to be right next to each other (but not overlapping) to look like a sentence. The reason why I've got separate buttons is so that the user needs to click the correct 2 letter characters in the sentence (in the above example is the letters ar). I've set the spacing on the properties to 0 and checked/unchecked the various options but no luck!

I've unchecked the width option for Child Force Expand on both the Panel and Button objects but the sentence looks all crammed.... how could I ensure the buttons sit neatly one after the other (i.e not overlapping)?

Code relating to comment below:

 for (int i = 0; i < letterArray.Length; i++)
        {
            button = (GameObject)Instantiate(buttonPrefab);
            button.transform.SetParent(buttonPanel.transform, false);
            button.GetComponentInChildren<Text>().text = letterArray[i];

            FitButtonWidthToText();
        }
    }

    public void FitButtonWidthToText()
    {
        int widthOfTheText = 0;
        CharacterInfo characterInfo;
        foreach (char c in button.GetComponentInChildren<Text>().text)
        {
            button.GetComponentInChildren<Text>().font.GetCharacterInfo(c, out characterInfo, button.GetComponentInChildren<Text>().fontSize);
            widthOfTheText += characterInfo.advance;
        }
        buttonTransform.sizeDelta = new Vector2(widthOfTheText, buttonTransform.sizeDelta.y);
    }

回答1:

Uncheck Child Force Expand: Width

From the docs:

Child Force Expand: Whether to force the child layout elements to expand to fill additional available space.

Checking width (resp. height) will have the elements fill the available space horizontally (resp. vertically).

EDIT: Do not put a Content Size Fitter on children of a Layout Group. More info: Making UI elements fit the size of their content.

Based on our discussion: So the steps described in the above link only work on the most recent versions of Unity. If you are stuck with a more mature version, you may keep the ContentSizeFitter to achieve the desired result, with the gotcha that if you change the size of a child element, the layout won’t update automatically as you would expect. To remedy this, you can force a partial re-layout like explained by Stephan-B in this thread:

The following function LayoutRebuilder.ForceRebuildLayoutImmediate should prove useful. Instead of forcing a rebuild of all the Canvases which can have a significant performance impact, you can call this function on the root (top parent) object in the hierarchy the contains the layout component affecting the object in question.

回答2:

You could calculate the button's width manually like this. Dont use the LayoutGroup to control anything thats concerned with width though. You might want to add some extra space, the buttons are very tightly packed, but I leave that up to you :D

using UnityEngine;
using UnityEngine.UI;

//Just to make sure its put on a button
[RequireComponent(typeof(Button))]
public class FitButtonSizeToText : MonoBehaviour
{
    RectTransform buttonTransform;
    Text buttonText;

    void Awake() {
        buttonTransform = GetComponent<RectTransform>();
        buttonText = GetComponentInChildren<Text>();
    }

    void Start() {
        FitButtonWidthToText();
    }    

    public void FitButtonWidthToText() {
        int widthOfTheText= 0;
        CharacterInfo characterInfo;
        foreach(char c in buttonText.text) {
            buttonText.font.GetCharacterInfo(c, out characterInfo, buttonText.fontSize);
            widthOfTheText += characterInfo.advance;
        }
        buttonTransform.sizeDelta = new Vector2(widthOfTheText, buttonTransform.sizeDelta.y);
    }
}

来源：https://stackoverflow.com/questions/57441800/how-to-remove-spacing-between-buttons-in-unity3d

标签

unity3d

button

layout

spacing