이 페이지
UGUI의 Scroll View 보기 시작
UGUI의 Scroll View에서 Grid
미리 보면 이해하기 쉬울 거예요.
Unity5.3.1f 검증 통과.
페이지 롤링이란 무엇인가를 말하려면 스마트폰 홈페이지를 상상해 보면 쉽게 알 수 있을 것이다.
예를 들어 이렇게 얇은 테두리는 사실상 화면이고 흰 페이지는 첫 페이지이며 빨간 페이지는 두 번째 페이지이다.

살짝 왼쪽으로 바르면 이런 느낌이에요.그래서 여기서 교환을 멈추면...

이런 느낌으로 스크롤이 자동으로 진행되어 빨간 페이지에 흡착되는 듯한 인상을 준다.
덜렁이가 굴러가는 위치는 없나요?

이루어지다

초기 구성

메뉴 모음에서 GameOject→UI→Scroll View를 선택합니다.
Scrollbar이 필요하지 않을 것 같아서 먼저 삭제합니다.

인스펙터는 이런 느낌이에요.

width 및 Hegith를 500

으로 조정

가로 스크롤로 가정하므로 Hrizontal 검사만 실행

Viewport 설정

이해하기 편하도록, 먼저Mask를 제거합니다.

연락처 설정

Anchors를 "streatch x streatch"라고 합니다.
Pivot은 한가운데 있어요.
Conntent Size Fitter 첨부 파일(값을 무시하십시오.)
Grid Layout Group의 "Padding"및 "Cell Size"를 편리한 페이지 보기로 설정
"Constraint를""Fixed Row Count""이라고 합니다."
Constraint Count은 "1"

아이한테 Image 3개.

이런 느낌.
회색 배경이 있는 곳은 게임 화면으로 촬영한 페이지다.마스크 열면 이해하기 쉬울 거야.
Image에 색상을 칠하여 이해하기 쉽게 합니다.

따라서 이전에 설정되지 않은 Content Size Fitter의 Horizontal Fit - Preferred Size를 선택합니다.

그럼 빨간색 Image는 중간의 초기 표시입니다.
이것 괜찮아요?

Conntent Size Fitter의 Horizontal Fit - Unconstained로 돌아가서 Left, Right를 0으로 되돌려줍니다.
Anchors의 streatch x left
Pivot은 왼쪽 가운데
다시 한 번, Conntent Size Fitter의 Horizontal Fit - Preferred Size
결정하다.다음 그림과 같습니다.

이런 느낌.
지금까지 일반 Scroll View 완료

Scroll Rect의 변경 사항

ScrollRect를 상속하여 새 Script를 만듭니다.
Scroll View에서 위로 이동한 Scroll Rect를 다음 스크립트로 바꿉니다.
설정은 원래 상태로 돌아가므로 다음 그림과 같이 다시 설정됩니다.

PageScrollRect.cs

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

// ページスクロールビュー.
public class PageScrollRect : ScrollRect
{
    // 1ページの幅.
    private float pageWidth;
    // 前回のページIndex. 最も左を0とする.
    private int prevPageIndex = 0;

    protected override void Awake()
    {
        base.Awake();

        GridLayoutGroup grid = content.GetComponent<GridLayoutGroup>();
        // 1ページの幅を取得.
        pageWidth = grid.cellSize.x + grid.spacing.x;
    }

    // ドラッグを開始したとき.
    public override void OnBeginDrag(PointerEventData eventData)
    {
        base.OnBeginDrag(eventData);
    }

    // ドラッグを終了したとき.
    public override void OnEndDrag(PointerEventData eventData)
    {
        base.OnEndDrag(eventData);

        // ドラッグを終了したとき、スクロールをとめます.
        // スナップさせるページが決まった後も慣性が効いてしまうので.
        StopMovement();

        // スナップさせるページを決定する.
        // スナップさせるページのインデックスを決定する.
        int pageIndex = Mathf.RoundToInt(content.anchoredPosition.x / pageWidth);
        // ページが変わっていない且つ、素早くドラッグした場合.
        // ドラッグ量の具合は適宜調整してください.
        if (pageIndex == prevPageIndex && Mathf.Abs(eventData.delta.x) >= 5)
        {
            pageIndex += (int)Mathf.Sign(eventData.delta.x);
        }

        // Contentをスクロール位置を決定する.
        // 必ずページにスナップさせるような位置になるところがポイント.
        float destX = pageIndex * pageWidth;
        content.anchoredPosition = new Vector2(destX, content.anchoredPosition.y);

        // 「ページが変わっていない」の判定を行うため、前回スナップされていたページを記憶しておく.
        prevPageIndex = pageIndex;
    }
}

페이지에 놓는 느낌 알아요?

기타(공사 중)

꽉 들이마시는 느낌이라 애니메이션에 나오는 것처럼 멈추고 나중에 조사했으면 좋겠어요.