스와이프를 배우기 시작했어요!뭘 하면서 공부하려고 간단한 앱을 만들었어요.

[Swift] 파라파라 만화풍의 앱을 만들어 보세요!

목표

storyboard와viewController를 처리하여 그림의 화면 이동을 설정할 수 있는 프로그램 제작!

공사.

프로젝트 생성

storyboard를 이용하여 판식 제작

이미지 파일 구성

UIPageViewController의 제작

viewController의 생성

이미지 뷰에 이미지 설정

페이지 마이그레이션 작업

완성!

1. 프로젝트 제작

프로젝트를 먼저 만듭니다.Single ViewApp을 선택하십시오.

project_name 이름을 설정합니다.당신이 좋아하는 이름을 지어주세요.

이번에는 가로로 흩어지고 싶어서 가로화면을 지정했습니다.
Device Orientation에서 portrait를 제거하십시오.

2.storyboard를 통해 판식 제작

레이아웃을 먼저 생성합니다.Main.storyboard 파일을 열어 주십시오.
처음에는 세로로 설정되었으므로 가로 정렬 설정으로 변경됩니다.

이미지를 표시할 위치에 Image View를 설정합니다.
오른쪽 아래에 표시된 Image View를 끌어 놓습니다.

화면 중앙에 Image View를 구성합니다.
오른쪽 아래 모서리의 마커를 클릭하여 수평 및 수직 값을 0으로 설정합니다.

Image View를 화면에 가득 채우고 싶어 제한을 추가했다.
위아래 좌우 너비의 값을 0으로 설정하십시오.

3. 이미지 파일 구성

흐트러진 이미지를 설정합니다.
Assets.xcassets라는 폴더 설정 그림을 열어 주십시오.

storyboard에서 지정한 설정과viewController입니다.swift 링크
먼저 화면 오른쪽 상단에 있는 표시를 클릭하세요.화면이 두 개로 나뉘다.
그런 다음 storyboard의 Image View를 마우스 오른쪽 버튼으로 클릭합니다.
New Referenting Outlet 옆에 있는 원을 사진 위치로 드래그하십시오.
Name을 image View로 사용하여 Connect 버튼을 누르면 다음 코드가 추가됩니다.

ViewController.swift

@IBOutlet weak var imageView: UIImageView!

4. UIPageViewController의 제작

분산을 위해storyboard에pageViewController를 설정합니다.
페이지ViewController는viewController를 관리하는 이미지입니다.
자세한 내용은 뒤에 설명되며, 펼치려는 그림의 양만 생성됩니다.

UIPage ViewController의 하위 클래스인 PageViewController 클래스를 만듭니다.
새 파일을 만들고 하위 클래스를 선택하고 클래스 이름을 지정하십시오.

생성된storyboard의 페이지 ViewController와 PageViewController 클래스가 연결됩니다.
오른쪽 위 모서리의 마커를 클릭하고 PageViewController를 클래스로 선택합니다.

5.viewController의 생성

PageViewController.swif에서 다음에 사용할 변수를 정의합니다.

PageViewController.swift

import UIKit

class PageViewController: UIPageViewController {

//ページ番号
var viewControllerIndex : Int = 0  

//画像の名前を格納
let imageNames: [String] = ["kronosくん1", "kronosくん2", "kronosくん3", "kronosくん4","kronosくん5","kronosくん6"]  

//viewControllerを格納
var targetViewControllers : [UIViewController] = []

다음 실례storyboard의viewController.

PageViewController.swift

override func viewDidLoad() {
  super.viewDidLoad()

  // 表示用ViewControllerを生成（ここで画像分のviewControllerを生成）
  for i in 0..<imageNames.count {
    let viewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "vc") as! ViewController

  //viewControllerを追加
    targetViewControllers.append(viewController)
  }
  // Do any additional setup after loading the view.
  self.setViewControllers([targetViewControllers[0]], direction: .forward, animated: true, completion: nil)

  //自身を格納
  self.dataSource = self

  }

6. 이미지 뷰에서 이미지 설정

viewController의 초기 디스플레이를 설정합니다.

ViewController.swift

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!

private var imageName: String?

override func viewDidLoad() {
    super.viewDidLoad()
    imageView.image = UIImage(named:"kronosくん1")
    guard let imageName = imageName else {
        return
    }
    imageView.image = UIImage(named: imageName)
}

이미지 이름을 매개 변수로 이미지를 설정하는 방법을 만듭니다.

ViewController.swift

//画像を設定する処理
func setImageName(_ imageName: String) {
    self.imageName = imageName
    if let _ = imageView {
      imageView.image = UIImage(named: imageName)
    }
  }

PageViewController.swift에서viewController를 생성하는 곳에 그림을 추가하는 방법입니다.

PageViewController.swift

for i in 0..<imageNames.count {

        let viewController =  UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "vc") as! ViewController
        // ここで画像を設定    
        viewController.setImageName(imageNames[i])
        targetViewController.append(viewController)

        }

7. 페이지 마이그레이션 작업

마지막으로 extension U I P g eviewController DataSource를 변환한 후 추가 처리를 수행합니다.

PageViewController.swift

extension PageViewController : UIPageViewControllerDataSource {

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {

        //左にスワイプ
        if viewControllerIndex == targetViewControllers.count - 1 {
            return nil
        } else {
            viewControllerIndex = viewControllerIndex + 1
        }

        return targetViewControllers[viewControllerIndex]
    }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {

        //右にスワイプ
        if viewControllerIndex == 0 {
            return nil
        } else {
            viewControllerIndex = viewControllerIndex - 1
        }

        return targetViewControllers[viewControllerIndex]
    }
}

８.완성!

여정은 이만 마치겠습니다!실행해 본다면.
표정이 변하는 파라파라 만화풍 앱이 완성되었습니다!!