2

私はiOS開発にかなり慣れていませんが、独自の複合UIViewをカスタムUIButtonとして作成したいところまで来ました。次のように UILabel と 2x UIImageViews をレイアウトしたいと思います。

ここに画像の説明を入力

しかし、翻訳によると、ラベルが拡大すると、ビューが余分な領域を自動的に処理するように、コントロール (サブビュー) を固定したいと思います。例えば;

ここに画像の説明を入力

理想的には -

  • 右側の UIView は右側に固定されています。固定幅/高さ (右揃え) のままです。
  • ラベルと下の画像が残りの左側のスペースを分割します
    • ラベルは上部の残りのスペースの上半分の垂直方向の中央に配置されます
    • 下の画像は、下の残りのスペースの中央 (垂直方向と水平方向の両方) に配置されたままになります。
  • ラベルが下の画像よりも広い場合、ビューは拡大する必要があります

必要に応じて、これを純粋なコードで作成できます。上記の画像で XIB を使用して、属性を操作し、質問を視覚化しました。

私は C#/XAML のバックグラウンドを持っているので、通常は固定/自動/* の列と行を持つグリッド レイアウトを使用しますが、ここでは NSLayoutConstraints のようなものを使用する必要があると推測しています。残念ながら、どこからどのように開始すればよいかわかりません。解決策を探すために。どんな助けでも大歓迎です！

4

1 に答える 1

2

あなたのUIButtonで

(コードはテストされていません)

//put the code below in your button's init method    

UILabel *label = [[UILabel alloc] init];
UIImageView *bottomImageView = [[UIImageView alloc] init];
UIImageView *rightImageView = [[UIImageView alloc] init];

// we define our own contraints, 
// we don't want the system to fall-back on UIView's autoresizingMask property (pre-iOS 6)
self.translatesAutoresizingMaskIntoConstraints = NO;
label.translatesAutoresizingMaskIntoConstraints = NO;
bottomImageView.translatesAutoresizingMaskIntoConstraints = NO;
rightImageView.translatesAutoresizingMaskIntoConstraints = NO;

//fixed sizes => SET THESE as you want
CGFloat labelHeight, bottomWidth, rightImageWidth;


// 1 - Label constraints :
// labelWidth = 1 *self.width - rightImageWidth
NSLayoutConstraint *labelWidth = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeWidth
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeWidth
                                                              multiplier:1
                                                                constant:(- rightImageWidth)];

// label must be at the top :
NSLayoutConstraint *labelTop = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeTop
                                                              multiplier:1
                                                                constant:0];

//label must be on the left border
NSLayoutConstraint *labelLeft = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeLeft
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeLeft
                                                              multiplier:1
                                                                constant:0];

//label must be of 1/2 height

NSLayoutConstraint *labelHeight = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeHeight
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeHeight
                                                              multiplier:0.5
                                                                constant:0];

[self addSubview:label];
[self addConstraints:@[labelWidth, labelTop, labelLeft, labelHeight]];

//2 - botom view
// width constant
NSLayoutContraint *bottomWidth = [NSLayoutConstraint constraintWithItem:bottomImageView
                                                               attribute:NSLayoutAttributeWidth
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:nil
                                                         attribute:NSLayoutAttributeNotAnAttribute
                                                              multiplier:0
                                                                constant:bottomWidth];

// same height constraint as label
NSLayoutConstraint *bottomHeight = [NSLayoutConstraint constraintWithItem:bottomImageView
                                                               attribute:NSLayoutAttributeHeight
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeHeight
                                                              multiplier:0.5
                                                                constant:0];

// sticks at container's bottom (pun intended)
NSLayoutConstraint *bottomBottom = [NSLayoutConstraint constraintWithItem:bottomImageView
                                                               attribute:NSLayoutAttributeBottom
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeBottom
                                                              multiplier:1
                                                                constant:0];

//we have height, width, y contraints, just x remains
// NOTE : this one is between bottom view and label
NSLayoutConstraint *bottomCenteredXAsLabel = [NSLayoutConstraint constraintWithItem:bottomImageView
                                                               attribute:NSLayoutAttributeCenterX
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:label
                                                               attribute:NSLayoutAttributeCenterX
                                                              multiplier:1
                                                                constant:0];

[self addSubview:bottomImageView];
[self addConstraints:@[bottomWidth, bottomHeight, bottomBottom, bottomCenteredXAsLabel]];

// 3 - last one !
NSLayoutConstraint *rightAligned = [NSLayoutConstraint constraintWithItem:rightImageView
                                                               attribute:NSLayoutAttributeRight
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeRight
                                                              multiplier:1
                                                                constant:0];

//right height
NSLayoutConstraint *rightHeight = [NSLayoutConstraint constraintWithItem:rightImageView
                                                               attribute:NSLayoutAttributeHeight
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeHeight
                                                              multiplier:1
                                                                constant:0];

//constant width...
NSLayoutConstraint *rightWidth =  [NSLayoutConstraint constraintWithItem:rightImageView
                                                               attribute:NSLayoutAttributeWidth
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:nil
                                                         attribute:NSLayoutAttributeNotAnAttribute
                                                              multiplier:0
                                                                constant:rightImageWidth];

//width, height, x constraints... 
//we still need one on y, let's say it sticks at the top

NSLayoutConstraint *rightTop = [NSLayoutConstraint constraintWithItem:rightImageView
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self
                                                               attribute:NSLayoutAttributeTop
                                                              multiplier:1
                                                                constant:0];

[self addSubview:rightImageView];
[self addConstraints:@[rightAligned, rightHeight, rightWidth, rightTop]];

ほら！

方法は常に同じです。幅、高さ、x、および y (CGRect 4 次元) を設定して、各ビューに少なくとも 4 つの制約が必要です。制約を関係と考えてください:

item1.layoutAttribute1 >= a*item2.layoutAttribute2 + b

この形で翻訳する

[NSLayoutConstraint constraintWithItem:item1
                             attribute:layoutAttribute1
                             relatedBy:NSLayoutRelationGreaterThanOrEqual
                                toItem:item2
                             attribute:layoutAttribute2
                            multiplier:a
                              constant:b];

視覚的な形式を使用すると、より少ないコードですべてを表現できることに注意してください。（しかし、私はまだそれで遊んでいません）。

于 2013-02-25T21:26:46.063 に答える