iOS 자동 레이아웃 : 너비가 같은 두 개의 버튼, 나란히


92

현재 AutoLayout에 문제가 있습니다. 인터페이스 빌더를 사용하고 있으며 다음 이미지와 같이 너비가 같은 두 개의 버튼을 나란히 배치하려고합니다.

객관적인 레이아웃

다음 미리보기 이미지에서 내 titleImage가 올바르게 제한되고 올바르게 표시되지만 버튼은 그렇지 않습니다. 나는 button 1을 titleImage의 앞쪽 가장자리에 맞추고 button2를 titleImage의 뒤쪽 가장자리에 맞추는 실험을 해봤지만, 아래에 설명 된 것처럼 두 버튼 사이의 너비 분포가이 시점에서 왜곡됩니다.

문제 시나리오

내 목표는 어떤 제약이 빠졌는지 이해하는 것이며 장치에 관계없이 동일한 너비를 유지하기 위해 두 개의 버튼에 적용되어야합니다. 가능하다면 추가 코드가 아닌 인터페이스 빌더를 통해이 작업을 수행하고 싶습니다.


1
Masonry 는 프로그래밍 방식으로이를 수행하는 데 권장되는 방법입니다. 링크 : github.com/Masonry/Masonry
Itachi

1
여기에 링크가 있습니다 ... 확인할 수 있습니다 ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

답변:


246

다음 제약을 추가합니다.

  1. button1에서 button2까지 동일한 너비를 지정합니다.
  2. 두 버튼 사이에 수평 간격을 지정합니다.
  3. button1의 선행 공백을 수퍼 뷰에 할당합니다.
  4. button2의 후행 공백을 수퍼 뷰에 지정하십시오.
  5. 두 버튼에 상단 공간을 할당합니다.
    그것이 당신을 위해 작동하는지 알려주십시오.

7
훌륭합니다-이것은 나를 위해 일했습니다. 특히 포인트 # 2-수평 간격 추가.
Scratcha 2015 년

와우 !!! 무슨 뜻이야? 정말 매력처럼 작동하고, 3 시간 정도 낭비되었습니다! :( 제 경우에는 슈퍼 뷰에서 동일한 너비의 두 뷰가 분할되어있었습니다. 그러나 마지막에 "Y 또는 높이에 대한 제약이 필요합니다"와 같은 메시지가 나에게 "누락 된 제약 추가"를 선택하고 해결되었습니다.
Randika Vishman 2015

@Abubakr : 두 버튼의 너비가 같기 때문에 한 화면 크기에서만 작동합니다.
AG

1
2 개 이상의 인접한 UI 요소에서도 작동합니다!
siege_Perilous

1
감사하지만 코드에서 더 나은 해결책을 찾았습니다. 그들 중 하나를 부모에 중앙 정렬하고 코드에서 계산할 수있는 콘텐츠 크기의 일정한 절반을 제공하거나 콘텐츠가 정적 인 경우 프레임을 업데이트하고 상수를 업데이트 할 수 있습니다. 이와 함께 중앙 정렬에 두 개의 버튼 사이에 중앙 간격의 절반을 추가합니다. 그리고 다른 버튼에 선행 또는 후행을 지정하십시오. 나를 위해 이것을 수정합니다. 콘텐츠가 고유하고 업데이트해야하는 경우 레이아웃 업데이트 메서드를 호출하고 상수 값을 다시 계산하면됩니다.
Amber K

79

쉬운 해결책을 위해 단계와 스크린 샷을 따르십시오


1 단계)

  • 버튼 1의 경우 : 제약 조건 설정 : (1) 선행, (2) 필요에 따라 상단 또는 하단, (3) 높이


2 단계)

  • 버튼 2의 경우 : 제약 조건 설정 : (1) 트레일 링, (2) 필요에 따라 상단 또는 하단, (3) 높이

3 단계)

  • Ctrl + 버튼 1에서 버튼 2로 드래그

  • 수평 간격 선택


4 단계)

  • 두 버튼 (명령 사용)을 모두 선택하고 동일한 너비의 구속 조건 추가


산출

도움이 되었기를 바랍니다 :)


1
높이를 고정하면 안됩니다. 화면 크기에 따라 뷰가 버튼의 높이를 결정하도록합니다.
쿠날 쿠마

@KunalKumar이 경우 높이가 고정되어 있습니다. 뭘 원하는지 말해 줄래?
Vvk

@Vvk ... 완벽한 형제 :
Jaywant Khedkar

18

iOS9의 스택 레이아웃은 정말 좋은 일을 할 것입니다. 보기에 스택보기를 추가하고 다음과 같이 구성하십시오.

여기에 이미지 설명 입력



0

내 해결책은

  1. 두 개의 버튼 중간에 작은 뷰를 놓고 가운데로 만듭니다 (컨테이너의 수평 중심과 컨텐 너의 수직 중심을 0으로).
  2. 작은보기에 높이와 너비를 추가합니다.
  3. 제약 조건에 버튼을 추가하고 작은보기에 수평 공간 제약을 부여합니다.
  4. 작은보기 배경색을 단추 또는보기의 색상과 동일하게 지정하십시오.

참고 : 스크린 샷을 참조하십시오.

여기에 이미지 설명 입력

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.