Visual Format Language(시각적 형식 언어)를 사용하여 뷰의 중앙에 보기

Visual Format Language(시각적 형식 언어)를 사용하여 뷰의 중앙에 보기

저는 이제 막 iOS용 자동 레이아웃을 배우기 시작했고 비주얼 포맷 언어를 살펴보았습니다.

한 가지를 제외하고는 모두 정상적으로 작동합니다.저는 단지 그것의 감독 범위 내에서 중앙으로 시야가 확보되지 않을 뿐입니다.
VFL로 이것이 가능합니까? 아니면 직접 제약 조건을 수동으로 만들어야 합니까?

현재는 VFL만 사용하여 수퍼뷰에서 뷰를 중앙에 배치하는 것이 불가능해 보입니다.그러나 단일 VFL 문자열과 단일 추가 제약 조건(축당)을 사용하여 이 작업을 수행하는 것은 그리 어렵지 않습니다.

VFL:"|-(>=20)-[view]-(>=20)-|"

[NSLayoutConstraint constraintWithItem:view
                             attribute:NSLayoutAttributeCenterX
                             relatedBy:NSLayoutRelationEqual
                                toItem:view.superview
                             attribute:NSLayoutAttributeCenterX
                            multiplier:1.f constant:0.f];

사람들은 당신이 이것을 간단히 할 수 있을 것이라고 생각할 것입니다(이것이 제가 이 질문을 보고 처음에 생각하고 시도했던 것입니다.

[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=20)-[view(==200)]-(>=20)-|"
                                 options: NSLayoutFormatAlignAllCenterX | NSLayoutFormatAlignAllCenterY
                                 metrics:nil
                                   views:@{@"view" : view}];

변형을 제 구부리려고 축 두 문자열을 되지 않는 것 .H:|V:그런 다음 VFL에 옵션이 적용되는 시기를 정확히 파악하기 시작했습니다.이러한 보기는 VFL의 수퍼뷰에는 적용되지 않는 것으로 보이며 VFL 문자열에 언급된 명시적 보기에만 적용됩니다(특정 경우에는 실망스럽습니다).

인 뷰가 수를 바랍니다. VFL에서는 VFL 옵션을 사용할 수 .된 또 일 수 " 다 솔 다 옵 션 일 수 있 니 습 같 과 다 음 는 되 달 루 션 전 은 니 다 ▁another 있 : 습 ▁passed ▁could ▁be ▁another ▁something ▁like ▁the ▁into 또NSLayoutFormatOptionIncludeSuperview.

말할 필요도 없이, 저는 이 질문에 답하기 위해 노력하는 VFL에 대해 많은 것을 배웠습니다.

예, 시각적 형식 언어를 사용하여 보기의 중앙에 보기를 배치할 수 있습니다.수직과 수평 모두.데모는 다음과 같습니다.

https://github.com/evgenyneu/center-vfl

저는 제약 조건을 수동으로 만드는 것이 더 좋다고 생각합니다.

[superview addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeCenterX
                              relatedBy:NSLayoutRelationEqual
                                 toItem:superview
                              attribute:NSLayoutAttributeCenterX
                             multiplier:1
                               constant:0]];
[superview addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeCenterY
                              relatedBy:NSLayoutRelationEqual
                                 toItem:superview
                              attribute:NSLayoutAttributeCenterY
                             multiplier:1
                               constant:0]];

---

이제 NSLayoutAnchor를 사용하여 자동 레이아웃을 프로그래밍 방식으로 정의할 수 있습니다.

(iOS 9.0 이상에서 사용 가능)

view.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
view.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true

---

iOS와 MacOS 모두에서 자동 레이아웃을 쉽게 하기 위해 DSL인 SnapKit을 사용하는 것을 추천합니다.

view.snp.makeConstraints({ $0.center.equalToSuperview() })

이렇게 할 수 있었던 것은 전적으로 가능했습니다.

[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view]-(<=1)-[subview]"
                                        options:NSLayoutFormatAlignAllCenterY
                                        metrics:nil
                                          views:NSDictionaryOfVariableBindings(view, subview)];

여기서 배웠어요.Y가 보기에 중앙 위의 코드 하위 뷰는 분명합니다.

Swift3:

        NSLayoutConstraint.constraints(withVisualFormat: "H:[view]-(<=1)-[subview]",
                                       options: .alignAllCenterY,
                                                       metrics: nil,
                                                       views: ["view":self, "subview":_spinnerView])

아래 코드를 추가하고 화면 중앙에 단추를 놓습니다.물론 가능합니다.

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"H:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterY
                           metrics:0
                           views:views]];

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"V:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterX
                           metrics:0
                           views:views]];

원하는 것이 아니라는 것을 알지만 물론 마진을 계산하여 시각적 형식 문자열을 만드는 데 사용할 수 있습니다;)

어쨌든, 아닙니다.안타깝게도 VFL을 사용하여 '자동'으로 이 작업을 수행할 수는 없습니다. 적어도 아직은 그렇지 않습니다.

@Evgenii의 답변 덕분에 다음과 같은 완전한 예를 만들었습니다.

사용자 지정 높이로 빨간색 사각형의 중앙을 수직으로 맞춥니다.

https://gist.github.com/yallenh/9fc2104b719742ae51384ed95dcaf626

VFL(직관적이지 않음)을 사용하거나 제약 조건을 수동으로 사용하여 뷰를 수직으로 중앙에 배치할 수 있습니다.참고로 VFL에서는 다음과 같이 중심 Y와 높이를 함께 결합할 수 없습니다.

"H:[subView]-(<=1)-[followIcon(==customHeight)]"

현재 솔루션에서는 VFL 제약 조건이 별도로 추가됩니다.

그것이 해야 할 일은 수퍼뷰가 사전에 선언되어야 한다는 것입니다.사용하는 대신|당신이 사용하는@{@"super": view.superview};.

그리고.NSLayoutFormatAlignAllCenterX수직 및 수직의 경우NSLayoutFormatAlignAllCenterY수평 옵션에 사용할 수 있습니다.

추가 보기를 사용할 수 있습니다.

NSDictionary *formats =
@{
  @"H:|[centerXView]|": @0,
  @"V:|[centerYView]|": @0,
  @"H:[centerYView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterY),
  @"V:[centerXView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterX),
};
NSDictionary *views = @{
  @"centerXView": centerXView, 
  @"centerYView": centerYView, 
  @"yourView": yourView,
};
 ^(NSString *format, NSNumber *options, BOOL *stop) {
     [superview addConstraints:
      [NSLayoutConstraint constraintsWithVisualFormat:format
                                              options:options.integerValue
                                              metrics:nil
                                                views:views]];
 }];

깔끔하게 하고 싶으면,centerXView.hidden = centerYView.hidden = YES;.

PS: 저는 영어가 제2외국어이기 때문에 추가적인 견해를 "플레이스홀더"라고 부를 수 있을지 모르겠습니다.누군가 저에게 그것을 말해주시면 감사하겠습니다.

여기에 잠시 오신 분들을 위해.Interface Builder기본 솔루션(Google이 여기서 안내함)을 사용하여 고정 너비/높이 제약 조건을 추가하고 하위 보기 -> 컨트롤 드래그를 선택합니다. -> "슈퍼 보기에서 수직/수평 중심"을 선택합니다.

@swift 2에서 igor-muzyka 답변:

NSLayoutConstraint.constraintsWithVisualFormat("H:[view]-(<=1)-[subview]", 
                                               options: .AlignAllCenterY,
                                               metrics: nil,
                                               views: ["view":view, "subview":subview])

이것은 나의 방법입니다.

//create a 100*100 rect in the center of superView
var consts = NSLayoutConstraint.constraints(withVisualFormat: "H:|-space-[myView]-space-|", options: [], metrics:["space":view.bounds.width/2-50], views:["myView":myView])

consts += NSLayoutConstraint.constraints(withVisualFormat: "V:|-space-[myView]-space-|", options: [], metrics: ["space":view.bounds.height/2-50], views: ["myView":myView])

여기서는 제약 조건 대신 이 기능을 사용할 수 있습니다.

child.center = [parent convertPoint:parent.center fromView:parent.superview];

VFL을 사용하는 대신 인터페이스 빌더에서 이 작업을 쉽게 수행할 수 있습니다.메인 스토리보드에서 중심을 잡을 뷰를 Ctrl+클릭합니다.Ctrl 키를 누른 상태에서 수퍼 뷰로 끌어 "X 중심" 또는 "Y 중심"을 선택합니다.코드가 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/12873372/centering-a-view-in-its-superview-using-visual-format-language