storyboard만:iOS6/7, 3.5인치/4인치 대응

소개



AutoLayout 기능은 iOS6 이상에서 지원됩니다.

코드를 쓰고 싶지 않아도됩니다.
  • 3.5 인치와 4 인치 모두 지원
  • UIScrollView 사용

  • 위의 경우 가장 간단한 설정 방법입니다.
    iPhone 앱으로서의 설정, 또, iPad로 표시했을 때에 어떻게 보이는지도 확인하고 있습니다.

    환경


  • Xcode5

  • Xcode



    프로젝트를 새로 만듭니다.
    이번에는 Single View Application을 선택했습니다.


  • Deployment target iOS6
  • iPhone 전용
    로 만듭니다

  • storyboard



    구성은 View 바로 아래에 ScrollView를하고 영역을 결정하기 위해 View를 겹칩니다.



    statusBar



    UIScrollView는 StatusBar의 표시 분을 연다



    단말기의 표시 영역



    View는 3.5인치 표시로 튀어나와 4인치 표시라고 짧게
    아래 이미지는 4인치입니다.



    이쪽은 3.5 인치입니다.



    전체 화면의 크기가 아닌 뷰의 스트레칭에 따라 표시 영역이 잘립니다.

    AutoLayout



    ScrollView



    Constrains를 설정합니다.
    만지는 것은 종횡, 상하의 Space만입니다. Add 4 Constrains 버튼으로 추가.


    ScrollView 내의 View



    마찬가지로 종횡, 상하의 간격을 설정하고, 게다가 View의 width, height도 추가.
    Add 6 Constrains 버튼으로 추가.


    Constrains 설정 확인



    ScrollView


  • ScrollView 설정 (화면의 파란색 프레임)
  • ScrollView에 포함 된 View 정보 (화면의 녹색 테두리)

  • 가 함께 표시됩니다.



    ScrollView 내의 View



    설정이 모두 들어 있습니다.
    width:폭과 height:높이 설정도 여기에서 확인할 수 있습니다.



    이제 경고, 오류가없는 상태입니다.

    시뮬레이터, 실제 기계로 확인



    이번은 시뮬레이터뿐입니다만, 실기라도 해야 합니다・・・.
    일반적으로 3.5인치는 스크롤하지만 4인치는 View 높이가 ScrollView보다 작은 값이므로 스크롤하지 않습니다.

    iOS6계



    비 Retina - 3.5 인치


    Retina - 3.5인치


    Retina - 4인치


    iOS7계



    비 Retina - 3.5 인치


    Retina - 3.5인치


    Retina - 4인치


    iPad









    사이고에게



    iPad에서 iPhone 디스플레이는 3.5 인치 기반을 지금 느꼈다.
    이번의 경우는 iOS6계의 때는 스테이터스분의 스페이스가 비어 버리고 있습니다.
    레이아웃으로 착각한 것 같기 때문에 정정합니다.

    걸쇠를 잡으면 StoryBoard만의 설정으로도 할 수 있습니다만
    View에 포함되는 Object가 늘어나면 좀처럼 알기 어렵습니다.

    좋은 웹페이지 즐겨찾기