iOS: Metin uzunluğuna göre UIButton yeniden boyutlandırma

Arayüz oluşturucuda, Command+ tuşunu basılı tutarak =bir düğme metnine sığacak şekilde yeniden boyutlandırılır. Düğmenin görünüme eklenmeden önce bunun programlı olarak yapılıp yapılmayacağını merak ediyordum.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

Xcode 4.5 ve sonraki sürümlerde, bu artık ' Otomatik düzen / Kısıtlamalar ' kullanılarak yapılabilir.

Başlıca avantajları:

1. Çerçeveleri programlı olarak ayarlamanız gerekmez!
2. Doğru yapılırsa, yön değişiklikleri için kareleri sıfırlama konusunda endişelenmenize gerek yoktur.
3. Ayrıca, cihaz değişikliklerinin sizi rahatsız etmesi gerekmez (okuma, farklı ekran boyutları için ayrı ayrı kodlamaya gerek yoktur).

Birkaç dezavantajı:

1. Geriye dönük uyumlu değil - yalnızca iOS 6 ve üstü için çalışır.
2. Aşina olmanız gerekiyor (ancak daha sonra zaman kazanacaksınız).

En havalı şey şu gibi bir niyet beyan etmeye odaklanmaktır:

• Bu iki düğmenin aynı genişlikte olmasını istiyorum; veya
• Bu görüşün dikey olarak ortalanması ve denetimin kenarından en fazla 10 punto kadar uzatılması gerekir; ya da,
• Bu düğmenin / etiketin görüntülediği etikete göre yeniden boyutlandırılmasını istiyorum!

İşte otomatik düzen ile tanışmak için basit bir öğretici.

Daha fazla ayrıntı için .

İlk başta biraz zaman alır, ama kesinlikle çabaya değecek gibi görünüyor.

UIKit'te, belirli bir fontta işlendiğinde alacağı boyutta belirli bir NSString nesnesinden almak için NSString sınıfına eklemeler vardır.

Dokümanlar buradaydı . Şimdi burada Kullanımdan Kaldırıldı altında.

Kısacası, giderseniz:

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... düğmenin çerçevesini oluşturduğunuz dizenin yüksekliğine ve genişliğine ayarlayacaksınız.

Muhtemelen bu CGSize etrafında bir tampon alanı denemek isteyeceksiniz, ancak doğru yerden başlayacaksınız.

Bunu kodda yapmanın yolu:

[button sizeToFit];

Alt sınıflama yapıyorsanız ve fazladan kurallar eklemek istiyorsanız geçersiz kılabilirsiniz:

- (CGSize)sizeThatFits:(CGSize)size;

Düğmeniz Interface Builder ile yapılmışsa ve koddaki başlığı değiştiriyorsanız, bunu yapabilirsiniz:

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

Swift:

Buradaki önemli şey, ne zaman arayacağınızdır, .sizeToFit()metni görüntülenecek şekilde ayarladıktan sonra gereken boyutu okuyacaktır, daha sonra metni güncellerseniz tekrar arayın.

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

Bunu otomatik düzenleme kullanarak gerçekleştirmek için değişken genişlik kısıtlaması ayarlamayı deneyin:

Ayrıca ayarlamanız Content Hugging Priorityve Content Compression Resistance Priorityihtiyacınız olan sonuçları elde etmeniz de gerekebilir.

UILabel tamamen otomatik olarak boyutlandırılır :

Bu UILabel basitçe ekranda ortalanacak şekilde ayarlanmıştır (yalnızca iki kısıtlama, yatay / dikey):

Genişlikleri tamamen otomatik olarak değiştirir:

Herhangi bir genişlik veya yükseklik ayarlamanıza gerek yoktur - tamamen otomatiktir.

Küçük sarı karelerin basit bir şekilde takıldığına dikkat edin (sıfırın "aralığı"). UILabel yeniden boyutlandıkça otomatik olarak hareket ederler.

"> =" Kısıtı eklemek, UILabel için minimum genişliği ayarlar:

Metni düğmenin aksine yeniden boyutlandırmak istiyorsanız, şunu kullanabilirsiniz ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit düzgün çalışmıyor. yerine:

myButton.size = myButton.sizeThatFits(CGSize.zero)

ayrıca contentInsetdüğmeye ekleyebilirsiniz :

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

basitçe:

1. UIViewGörüntülemek için otomatik düzen ile sarıcı olarak oluşturun .
2. Sargının UILabeliçine koy . Etiketinizi ambalajın kenarlarına yapıştıracak kısıtlamalar ekleyin.
3. Paketleyicinizin UIButtoniçine koyun , daha sonra yaptığınız kısıtlamaları basitçe ekleyin UILabel.
4. Metinle birlikte otomatik boyutlu düğmenizin keyfini çıkarın.

Hızlı 4.2

Şükürler olsun, bu çözüldü. Düğmeye bir metin ayarladıktan sonra, bir UIView'dan doğal boyut olan intrinsicContentSize'ı alabilirsiniz (resmi belge burada ). UIButton için aşağıdaki gibi kullanabilirsiniz.

button.intrinsicContentSize.width

Bilginiz için, düzgün görünmesi için genişliği ayarladım.

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

Simülatör

İntrinsicContentSize ile UIButtonları

Kaynak: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

Çözülmeyen bu yazı ile ilgili bazı ek gereksinimlerim var sizeToFit. Metinden bağımsız olarak düğmeyi orijinal konumunda tutmam gerekiyordu. Düğmenin asla orijinal boyutundan daha büyük olmasını da istemiyorum.

Bu nedenle, düğmeyi maksimum boyutuna göre düzenler, bu boyutu Denetleyiciye kaydeder ve metin değiştiğinde düğmeyi boyutlandırmak için aşağıdaki yöntemi kullanırım:

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

Metin için yükseklik otomatik olarak boyutlandırılan bu düğme sınıfı (Xamarin için ancak başka bir dil için yeniden yazılabilir)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

Nedense func sizeToFit()benim için çalışmıyor. Benim kurulumum içinde bir düğme kullanıyorumUITableViewCell kullanıyorum ve otomatik düzen kullanıyorum.

Benim için işe yarayan:

1. genişlik sınırını getir
2. intrinsicContentSizegenişliği almak çünkü bu belgeye göre otomatik düzen farkında değildir intrinsicContentSize. Genişlik kısıtlaması ayarlama intrinsicContentSizegenişliği

İşte iki başlık: Debug View Hierachry

Dürüst olmak gerekirse, film şeridinde metni yerleştirmek için düğmeleri yeniden boyutlandırmak istediğinizi söylemek için basit bir onay kutusunun bulunmaması gerçekten utanç verici. Pekala, her neyse.

İşte storyboard kullanan en basit çözüm.

1. UIView yerleştirin ve bunun için kısıtlamalar koyun. Misal:

2. UILabel'i UIView içine yerleştirin. UIView kenarlarına iliştirmek için kısıtlamalar ayarlayın.

3. UIButton'unuzu UIView içine yerleştirin. UIView'in kenarlarına takmak için aynı kısıtlamaları ayarlayın.

4. UILabel'in satır sayısı için 0 ayarlayın.

5. Çıkışları ayarlayın.

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. Uzun, uzun, uzun bir başlık al.

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. ViewDidLoad üzerinde başlığı UILabel ve UIButton için ayarlayın.

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. Düğmenin yeniden boyutlandırıldığından ve basılabildiğinden emin olmak için çalıştırın.