iOS 앱에서 HUD(HeadUp-Display)를 자작하기 위한 라이브러리를 만들어 보았다

iOS 앱에서 HUD(HeadUp-Display)를 자작하기 위한 라이브러리를 만들어 보았다



안녕하세요, natmark 입니다.

이번, HUDMakerKit 라고 하는 HUD를 자작하기 위한 라이브러리를 만들어 보았으므로, 그쪽을 소개합니다.

HUD(HeadUp-Display)란?



자주 보는 화면에 팝업하여 인디게이터 등을 표시하는 사람입니다. iOS에서이 HUD를 구현하고 싶을 때 다음과 같은 라이브러리가 자주 사용됩니다.
  • SVProgressHUD
  • MBProgressHUD
  • PKHUD

  • 단순히 빙글빙글을 표시하는 것만으로는, 위와 같은 라이브러리를 사용하는 것으로 간단하게 실현할 수 있습니다만, 굳은 애니메이션 첨부의 HUD를 만들려고 하면(자), 자작할 필요가 나옵니다.

    거기서, 굳은 애니메이션 첨부 HUD의 구현을 돕는 라이브러리로서, 애니메이션의 묘화를 심플한 묘화 함수로 실시할 수 있는 ProcessingKit 를 이용해 작성해 보았습니다.

    만든 것





    HUDMakerKit : htps : // 기주 b. 코 m / 나 t 마 rk / 후 D 마케 r t

    ProcessingKit 을 이용하여 간단한 드로잉 함수로 애니메이션 가능한 HUD를 구현할 수 있습니다.

    ProcessingKit에 대한 설명은 여기

    샘플




    예를 들어, 위와 같은 움직임을 하는 HUD를 만들고 싶은 경우, 아래와 같은 코드를 쓰는 것으로 구현 가능합니다.

    익숙하지 않은 함수가 포함되어 있지만 clear() , translate() , point() 등이 ProcessingKit
    ProcessingKit에서는 처리 이라는 프로그래밍 언어의 드로잉 함수를 같은 인터페이스로 제공하고 있으므로, 이러한 간단한 구문으로 드로잉이나 도형 변환을 실시할 수 있습니다.

    소개


    Carthage 혹은 CocoaPods 를 사용해 도입할 수가 있습니다.

    Carthage를 이용하는 경우



    Cartfile
    github "natmark/HUDMakerKit" ~> 0.2.4
    
    $ carthage update --platform iOS --no-use-binaries
    

    참고 : htps : // 코 m / 유타 t93 / ms / 97 9bc2bf2 97 7 e c1

    CocoaPods를 이용하는 경우


    $ pod init
    

    Podfile
    # Uncomment the next line to define a global platform for your project
    # platform :ios, '9.0'
    
    target 'HUDMakerKitExample' do
      # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
      use_frameworks!
    
      # Pods for PKPodsExample
      pod "HUDMakerKit","~>0.2.4"
    end
    

    구현


  • HUDMaker를 상속받은 사용자 정의 클래스 만들기

  • SimpleHUD
    import HUDMakerKit
    
    class SampleHUD: HUDMaker {
        func draw(frameCount: Int) {
          // HUDが表示されている間、毎フレーム呼ばれる関数
        }
    }
    
  • func draw(frameCount:Int) 함수 안에 드로잉 처리를 작성합니다.

    SampleHUD
    class SampleHUD: HUDMaker {
        func draw(frameCount: Int) {
            // MARK: Examples
            fill(255, 0, 0) // 赤色で塗りつぶす
            ellipse(50, 50, 100, 100) // x:50, y50を中心に、幅100、高さ100の円を描く
        }
    }
    
  • HUDRunner customHUD 속성에 만든 사용자 지정 HUD 클래스를 설정하고 표시

  • ViewController.swift
    import UIKit
    import HUDMakerKit
    
    class ViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
            let customHUD = SampleHUD(frame: CGRect(x: 0, y: 0, width: 150, height: 150)) // カスタムHUDクラスのインスタンスを作る
            customHUD.backgroundColor = UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 0.3) // HUDの背景色を設定したり
            customHUD.layer.cornerRadius = 10 // 角丸にしたり
    
            HUDRunner.shared.customHUD = customHUD // HUDRunnerのcustomHUDにカスタムHUDクラスのインスタンスを設定する
        }
    
        @IBAction func didTapShowButton(_ sender: Any) {
            HUDRunner.shared.show() // HUDを表示する
        }
    }
    

    샘플 정보


  • natmark/HUDmakerKit에서 HUDMakerKitDemo이라는 데모 용 앱을 제공합니다.
  • 좋은 웹페이지 즐겨찾기