Autolayout - rzeczywisty rozmiar UIButton nie uwzględnia wstawek tytułów

Jeśli mam UIButton ustawiony za pomocą autolayout, jego rozmiar ładnie dostosowuje się do zawartości.

Jeśli button.imageustawię obraz jako , rozmiar instruktażowy ponownie wydaje się to uwzględniać.

Jeśli jednak poprawię titleEdgeInsetsprzycisk, układ nie bierze tego pod uwagę i zamiast tego obcina tytuł przycisku.

Jak mogę się upewnić, że wewnętrzna szerokość przycisku odpowiada wstawce?

Edytować:

Używam następujących:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

Celem jest dodanie pewnej separacji między obrazem a tekstem.

Możesz rozwiązać ten problem bez konieczności zastępowania jakichkolwiek metod lub ustawiania dowolnego ograniczenia szerokości. Możesz to zrobić w Konstruktorze interfejsów w następujący sposób.

• Wewnętrzna szerokość przycisku pochodzi od szerokości tytułu plus szerokość ikony oraz wstawki lewej i prawej krawędzi treści .

• Jeśli przycisk zawiera zarówno obraz, jak i tekst, są one wyśrodkowane jako grupa, bez odstępów między nimi.

• Jeśli dodasz lewą wstawkę treści, jest ona obliczana względem tekstu, a nie tekstu + ikony.

• Po ustawieniu ujemnego wstawki lewego obrazu obraz zostanie wyciągnięty w lewo, ale ogólna szerokość przycisku nie ulegnie zmianie.

• Jeśli ustawisz wstawkę ujemnego lewego obrazu, rzeczywisty układ wykorzystuje połowę tej wartości. Tak więc, aby uzyskać wstawkę o wartości -20 punktów w lewo, musisz użyć wartości wstawki o wartości -40 punktów w Konstruktorze interfejsu.

Zapewniasz więc wystarczająco dużą lewą wstawkę zawartości, aby stworzyć miejsce zarówno na pożądaną lewą wstawkę, jak i wewnętrzne wypełnienie między ikoną a tekstem, a następnie przesuń ikonę w lewo, podwajając żądaną ilość wypełnienia między ikoną a tekstem. Rezultatem jest przycisk z równymi lewymi i prawymi wstawkami treści oraz parę tekstu i ikon, które są wyśrodkowane jako grupa, z określoną ilością dopełnienia między nimi.

Niektóre przykładowe wartości:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

Możesz sprawić, by działało to w Konstruktorze interfejsów (bez pisania kodu), używając kombinacji ujemnych i dodatnich wstawek tytułu i zawartości.

Aktualizacja : Xcode 7 zawiera błąd, w którym nie można wprowadzić wartości ujemnych w polu RightWypełnienie, ale można użyć kontrolki krokowej obok niego, aby zmniejszyć wartość. (Dzięki Stuart)

Spowoduje to dodanie 8 punktów odstępu między obrazem a tytułem i zwiększy wewnętrzną szerokość przycisku o tę samą wartość. Lubię to:

Dlaczego nie zastąpić intrinsicContentSizemetody w UIView? Na przykład:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

Powinno to powiedzieć systemowi autoukładu, że powinien zwiększyć rozmiar przycisku, aby umożliwić wstawki i wyświetlić pełny tekst. Nie mam własnego komputera, więc tego nie przetestowałem.

Nie określiłeś, w jaki sposób ustawiasz wstawki, więc domyślam się, że używasz titleEdgeInsets, ponieważ widzę ten sam efekt, który otrzymujesz. Jeśli zamiast tego użyję contentEdgeInsets, działa to poprawnie.

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

I dla Swift działało to:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Love U Swift

Ten wątek jest trochę stary, ale sam na niego wpadłem i byłem w stanie go rozwiązać za pomocą ujemnej wstawki. Na przykład zastąp tutaj żądane wartości wypełnienia:

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

W połączeniu z odpowiednimi ograniczeniami autoukładu otrzymujesz przycisk zmiany rozmiaru, który zawiera obraz i tekst! Patrz poniżej z desiredLeftPaddingustawieniem na 10.

Widać, że rzeczywista ramka przycisku nie obejmuje etykiety (ponieważ etykieta jest przesunięta o 10 punktów w prawo, poza granicami), ale osiągnęliśmy 10 punktów wypełnienia między tekstem a obrazem.

W przypadku Swift 3 opartego na odpowiedzi Pegpeg :

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

Wszystkie powyższe nie działały na iOS 9+ , co zrobiłem to:

• Dodaj ograniczenie szerokości (dla minimalnej szerokości, gdy przycisk nie zawiera tekstu. Przycisk automatycznie skaluje się, jeśli tekst jest podany)
• ustaw relację na Większa niż lub Równa

Teraz, aby dodać ramkę wokół przycisku, po prostu użyj metody:

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

Chciałem dodać 5-punktową spację między ikoną UIButton a etykietą. Oto jak to osiągnąłem:

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

Sposób, w jaki contentEdgeInsets, titleEdgeInsets i imageEdgeInsets odnoszą się do siebie, wymaga trochę dawania i odbierania z każdej wstawki. Więc jeśli dodasz trochę wstawek po lewej stronie tytułu, musisz dodać ujemną wstawkę po prawej stronie i zapewnić trochę więcej miejsca (poprzez dodatnią wstawkę) po prawej stronie zawartości.

Dodając odpowiednią wstawkę treści, aby pasowała do przesunięcia wstawek tytułu, mój tekst nie wykracza poza granice przycisku.

Ta opcja jest również dostępna w narzędziu do tworzenia interfejsów. Zobacz wstawkę. Ustawiłem lewą i prawą na 3. Działa jak urok.

Rozwiązaniem, którego używam, jest dodanie ograniczenia szerokości przycisku. Następnie gdzieś podczas inicjalizacji, po ustawieniu tekstu, zaktualizuj ograniczenie szerokości w następujący sposób:

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

Gdzie 8 jest tym, czym jest twoja wstawka.

wywołanie sizeToFit () zapewnia, że ​​contentEdgeInset zostanie zastosowany

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}