iOS
UIScrollView

UIScrollView 만들기

CGRect 를 프레임으로 사용하여 UIScrollView 의 인스턴스를 만듭니다.

빠른

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

목표 -C

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

스크롤 콘텐츠 크기보기

contentSize 속성은 스크롤 가능한 내용의 크기로 설정해야합니다. 이것은 스크롤 가능 영역의 크기를 지정합니다. 스크롤 가능한 영역, 즉 contentSize 가 UIScrollView 프레임 크기보다 큰 경우 스크롤이 표시됩니다.

자동 레이아웃 사용 :

스크롤 뷰의 내용이 autolayout을 사용하여 설정되면 명시 적으로 크기가 수직 및 수평으로 지정되어야하며 모든 4 개의 가장자리가 포함 된 스크롤 뷰에 고정되어야합니다. 이렇게하면 contentSize 가 스크롤 뷰의 내용을 기반으로 자동 계산되며 내용의 레이아웃이 변경되면 업데이트됩니다.

수동 :

빠른

scrollview.contentSize = CGSize(width: 640, height: 800)

목표 -C

scrollview.contentSize = CGSizeMake(640, 800);

AutoLayout이있는 ScrollView

자동 레이아웃과 함께 scrollview를 사용하는 간단한 단계.

• 단일보기 응용 프로그램으로 새 프로젝트 만들기
• 기본 viewcontroller를 선택하고 속성 관리자에서 iPhone-4inch로 화면 크기를 변경하십시오.
• 다음과 같이 뷰 컨트롤러의 뷰에 스크롤 뷰를 추가하고 배경색을 파란색으로 설정하십시오

• 아래 그림과 같이 제약 조건을 추가합니다.

이 작업을 수행하려면 scrollview의 모든 가장자리를 viewcontroller의보기에 붙이면됩니다.

시나리오 1 :

이제 우리의 콘텐츠가 거대하다고 말하면서 가로로뿐만 아니라 세로로도 스크롤하기를 원합니다.

이를 위해,

• 프레임 (0,0,700,700)의 scrollview에 UIView를 추가합니다. 오렌지색 배경색을 지정하면 다르게 식별 할 수 있습니다.

다음으로 중요한 부분이 있습니다. 수평 및 수직으로 스크롤해야합니다.

• 주황색보기를 선택하고 다음 제약 조건을 추가하십시오

  

위 단계에서 우리가 한 일을 설명하겠습니다.

• 높이와 너비를 700으로 고정했습니다.
• scrollview = 0으로 후행 공백을 설정하여 스크롤 뷰에 내용을 가로로 스크롤 할 수 있다고 알려줍니다.
• 하단 공간을 scrollview = 0으로 설정하여 스크롤 뷰에 내용이 수직으로 스크롤 가능하다는 것을 알려줍니다.

이제 프로젝트를 실행하고 확인하십시오.

시나리오 2 : 콘텐츠 너비가 스크롤 너비와 같지만 높이가 scrollview보다 큰 시나리오를 고려해 볼 수 있습니다.

단계에 따라 콘텐츠를 세로로 스크롤하십시오.

• 위의 경우 너비 제약 조건을 삭제하십시오.
• 스크롤 뷰 너비와 일치하도록 주황색보기의 너비를 변경하십시오.
• 주황색보기에서 Ctrl 키를 누른 채로 드래그하여보기를 스크롤하고 동일한 너비 제한을 추가하십시오.

• 그리고 완료! 단순히 실행하고 수직으로 스크롤되는지 확인하십시오.

시나리오 3 :

이제 우리는 수직으로가 아니라 수평으로 만 스크롤하려고합니다.

단계에 따라 콘텐츠를 가로로 스크롤하십시오.

• 다음과 같이 모든 변경 사항을 취소하여 제약 조건을 달성합니다 (즉 , 수직 및 수평 스크롤을 달성 한 원래 제약 조건 복원 )

• 주황색보기의 프레임을 확인하십시오 (0,0,700,700).
• 오렌지보기의 높이 제한을 삭제하십시오.
• 스크롤보기 높이와 일치하도록 주황색보기의 높이를 변경하십시오.
• 주황색보기에서 Ctrl 키를 누른 채로 끌어보기를 스크롤하고 등고선 제한을 추가하십시오.

• 그리고 완료! 단순히 실행하고 수직으로 스크롤되는지 확인하십시오.

자동 레이아웃이 활성화 된 상태로 콘텐츠 스크롤

이 프로젝트는 인터페이스 빌더에 완전히 포함 된 자체 포함 된 예제입니다. 10 분 이내에 작업을 수행 할 수 있어야합니다. 그런 다음 배운 개념을 자신의 프로젝트에 적용 할 수 있습니다.

여기에서는 UIView 사용하지만 버튼, 레이블 등의 다른보기를 표현할 수 있습니다. 또한 스토리 보드 스크린 샷이이 형식에 맞게 더 작기 때문에 가로 스크롤을 선택했습니다. 수직 스크롤링의 원리는 동일합니다.

주요 개념

• UIScrollView 는 하나의 하위 UIScrollView 사용해야합니다. 이것은 스크롤하고자하는 모든 것을 담을 수있는 컨텐츠 뷰로 사용되는 'UIView'입니다.
• 컨텐츠 뷰와 스크롤 뷰의 부모 가 수평 스크롤의 높이가 동일하게되도록 (듯이)합니다. (세로 스크롤의 경우 동일한 너비)
• 모든 스크롤 가능한 내용의 너비가 설정되어 있고 모든면에 고정되어 있는지 확인하십시오.

새 프로젝트 시작

단일 뷰 응용 프로그램 일 수 있습니다.

스토리 보드

이 예제에서는 수평 스크롤 뷰를 만듭니다. View Controller를 선택하고 Size Inspector에서 Freeform을 선택하십시오. 너비를 1,000 , 높이를 300 만듭니다. 이렇게하면 스토리 보드에서 스크롤 할 콘텐츠를 추가 할 수있는 공간이 생깁니다.

스크롤보기 추가

UIScrollView 추가하고 네면을 모두 뷰 컨트롤러의 루트보기에 고정하십시오.

콘텐츠 뷰 추가

스크롤 뷰에 하위 UIView 를 추가하십시오. 이것이 핵심입니다. 스크롤 뷰에 많은 하위 뷰를 추가하지 마십시오. 하나의 UIView 만 추가하면됩니다. 스크롤하려는 다른보기에 대한 콘텐츠보기가됩니다. 콘텐츠보기를 네면의 스크롤보기에 고정합니다.

평등 하이츠

이제 Document Outline에서 Command 를 선택하기 위해 Content View와 Scroll View의 상위 뷰 를 모두 클릭하십시오. 그런 다음 높이를 동일하게 설정하십시오 (내용보기에서 스크롤보기로 Control </ kbd 끌기). 이것은 또한 열쇠입니다. 우리가 가로로 스크롤하고 있기 때문에, 스크롤 뷰의 컨텐츠 뷰는이 방법으로 설정하지 않는 한 얼마나 높은 지 알 수 없습니다.

노트 :

• 내용을 세로로 스크롤하는 경우 내용보기의 너비를 스크롤보기의 부모 너비와 같게 설정합니다.

콘텐츠 추가

3 개의 UIView 추가하고 모든 제약 조건을 부여하십시오. 나는 8 포인트 여백을 모든 것에 사용했다.

제약 조건 :

• 녹색보기 : 위쪽, 왼쪽 및 아래쪽 가장자리를 고정합니다. 너비를 400으로 만드십시오.
• 빨간색보기 : 위쪽, 왼쪽 및 아래쪽 가장자리를 고정합니다. 너비를 300으로 만드십시오.
• 자주색보기 : 네 모서리를 모두 고정하십시오. 나머지 공간이 무엇이든간에 너비를 만드십시오 (이 경우 268).

너비 컨 스트레인 트를 설정하는 것도 중요 하므로 스크롤 뷰는 컨텐트 뷰의 너비가 어느 정도인지 알 수 있습니다.

끝마친

그게 다야. 지금 프로젝트를 실행할 수 있습니다. 이 대답의 맨 위에있는 스크롤 이미지와 같이 작동해야합니다.

더 많은 연구

• iOS : AutoLayout이 ScrollView에서 작동하도록 만드는 방법
• 인터페이스 작성기에서 자동 레이아웃으로 UIScrollView를 구성하는 방법
• YouTube 비디오 자습서 : UIScrollView - 화면에서보기 유지 방법

스크롤 사용 / 사용 안 함

scrollEnabled 속성은 스크롤이 활성화되었는지 여부를 결정하는 Boolean 값을 저장합니다.
이 프로퍼티의 값이 true / yes의 경우는 스크롤이 유효, 그렇지 않은 경우는 true 디폴트 치는 true

빠른

scrollview.isScrollEnabled = true

목표 -C

scrollview.scrollEnabled = YES;

확대 / 축소 UIImageView

UIScrollView 인스턴스 만들기

let scrollview = UIScrollView.init(frame: self.view.bounds)

그런 다음 다음 속성을 설정하십시오.

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate 

이미지를 확대 및 축소하려면 사용자가 확대 및 축소 할 수있는 양을 지정해야합니다. 스크롤 뷰의 minimumZoomScale 및 maximumZoomScale 속성 값을 설정 minimumZoomScale 을 maximumZoomScale 합니다. 이 두 가지 모두 기본적으로 1.0으로 설정됩니다.

최소 및 최대 확대 / 축소 배율을 지정하는 zoomScale 을 1.0으로 지정합니다.

확대 / 축소를 지원하려면 스크롤보기에 대한 대리자를 설정해야합니다. 대리자 개체는 UIScrollViewDelegate 프로토콜을 준수해야합니다. 이 위임 클래스는 viewForZoomingInScrollView() 메서드를 구현하고 줌을 위해 뷰를 반환해야합니다.

표시된대로 ViewController를 수정하십시오.

class ViewController: UIViewController, UIScrollViewDelegate

그런 다음 클래스에 다음 대리자 함수를 추가합니다.

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

이제 UIImageView 인스턴스를 생성하십시오.

이 변수를 클래스 변수로 만듭니다.

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

그런 다음 scrollview에 추가하십시오.

scrollView?.addSubview(imageView)

참고

• iOS 용 스크롤보기 프로그래밍 가이드
• UIScrollView 자습서

UIScrollView가 델리게이트 메소드로 스크롤을 끝내면 감지

scrollViewDidEndDecelerating : 이것은 스크롤 뷰가 스크롤 이동을 감속 종료했다는 것을 델리게이트에게 알려줍니다.

목표 C :

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

빠른:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

스크롤 방향 제한

다음 코드를 사용하여 스크롤 할 수있는 방향을 제한 할 수 있습니다.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

사용자가 x 축을 스크롤 할 때마다 scrollView의 내용 오프셋이 다시 0으로 설정됩니다.
분명히 x s를 y s로 변경할 수 있기 때문에 방향을 수평으로 만 고정 할 수 있습니다.

또한이 코드를 scrollViewDidScroll(_ scrollView: UIScrollView) 대리자 메서드에 넣어야합니다. 그렇지 않으면 작동하지 않습니다.

또한 다음과 같이 클래스 선언에 UIScrollViewDelegate 를 가져 왔는지 확인하십시오.

class ViewController: UIViewController, UIScrollViewDelegate

... 및 viewDidLoad(_:) 같은 일부 메서드에서 self scrollView 대리자를 설정하십시오.

scrollView.delegate = self