月: 2023年1月

よくある、指のドラッグに応じて「選択中」の四角いviewを画面に表示する方法。

指のドラッグに応じてシェイプを描く方法はこのSO記事、DashedUIView(UIViewのBorderを破線 dashed にする)についてはこちらのSO記事を参考にしました。

class ViewController: UIViewController {
  
  var initialPoint: CGPoint = .zero
  
  lazy var overlay: CustomDashedView = {
    let view = CustomDashedView()
    view.dashColor = .systemPink
    view.dashWidth = 1
    view.dashLength = 5
    view.betweenDashesSpace = 2
    return view
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(overlay)
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(onViewSelected))
    view.addGestureRecognizer(panGesture)
  }
  
  @objc func onViewSelected(_ sender: UIPanGestureRecognizer) {
    let location = sender.location(in: view)
    if sender.state == .began {
      initialPoint = location
    }
    if sender.state == .changed {
    // comparing the initialPoint and the current location, and get the smaller value for the x and y coordinate, set it as the origin of the rect
   // abs() gives the absolute value
    let rect = CGRect(x: min(initialPoint.x, location.x), y: min(initialPoint.y, location.y), width: abs(initialPoint.x - location.x), height: abs(initialPoint.y - location.y))
      print(rect)
      overlay.frame = rect
    }
    if sender.state == .ended {
      overlay.frame.size = .zero
    }
  }
}


class CustomDashedView: UIView {

    var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    var dashWidth: CGFloat = 0
    var dashColor: UIColor = .clear
    var dashLength: CGFloat = 0
    var betweenDashesSpace: CGFloat = 0

    var dashBorder: CAShapeLayer?

    override func layoutSubviews() {
        super.layoutSubviews()
        dashBorder?.removeFromSuperlayer()
        let dashBorder = CAShapeLayer()
        dashBorder.lineWidth = dashWidth
        dashBorder.strokeColor = dashColor.cgColor
        dashBorder.lineDashPattern = [dashLength, betweenDashesSpace] as [NSNumber]
        dashBorder.frame = bounds
        dashBorder.fillColor = nil
        if cornerRadius > 0 {
            dashBorder.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
        } else {
            dashBorder.path = UIBezierPath(rect: bounds).cgPath
        }
        layer.addSublayer(dashBorder)
        self.dashBorder = dashBorder
    }
}

iOS機器をクリックする時に、「ピクッ」「プクッ」と若干の振動を起こすためのAPI、UIImpactFeedbackGeneratorの使い方。

class ViewController: UIViewController {
  var impactGenerator: UIImpactFeedbackGenerator!
  override func viewDidLoad() {
    super.viewDidLoad()
    impactGenerator = UIImpactFeedbackGenerator(style: .medium)
    impactGenerator.prepare()
  }

  @objc func onTap() {
    impactGenerator.impactOccured()
  }
}

前回のPart 1と同様に、簡単な画面を作成していきます。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    let square = UIView()
    square.backgroundColor = .red
    view.addSubview(square)
    // frame.sizeを指定し
    square.frame.size = CGSize(width: 100, height: 100)
    // 位置情報を指定することも出来る
    square.center = view.center
    
    // UIButtonクラスを使用してみる
    let button = UIButton()
    button.backgroundColor = .green
    button.setTitle("Hello", for: .normal)
    button.setTitleColor(.black, for: .normal)
    // buttonにアクションを追加
    button.addTarget(self, action: #selector(onButtonTapped), for: .touchUpInside)
    view.addSubview(button)
    let buttonSize: CGFloat = 100
    button.frame = CGRect(x: view.bounds.width/2 - buttonSize/2, y: view.bounds.height*3/4 - buttonSize/2, width: buttonSize, height: buttonSize)
  }
  
  // "hello"とprintする簡単なfunction
  // @objcキーワードは、Objective-CというSwiftの前身の言語のAPIを使う場合のもの。button.addTargetを使う場合は必要。
  @objc private func onButtonTapped() {
    print("hello")
  }
}

buttonをクリックすると”hello”とprintされます。

さて、ここで、buttonをクリックすると赤い四角が黄色になる仕組みを組もうとするとどうすればいいでしょうか？

onButtonTapped( )の中にこう書きたいのですが、

@objc private func onButtonTapped() {
    square.backgroundColor = .yellow
}

このままだと「Cannot find ‘square’ in scope」というエラーになります。’square’ という名前のオブジェクトがスコープ内に見つからない、という意味です。

さて、現時点ではsquareはviewDidLoad( )内で定義されています。関数の中で定義された変数(variable, varキーワードで定義)や定数(constant, letキーワードで定義は関数の中でしか扱えません。これを変数や定数の「スコープ」（範囲）といいます。

onButtonTapped( )内で扱えるようにするには、その関数と変数のスコープを合わせます。つまり、同じclass内のトップレベルで定義します。

class ViewController: UIViewController {
  
  let square: UIView = {
    let square = UIView()
    square.backgroundColor = .red
    return square
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    view.addSubview(square)
    square.frame.size = CGSize(width: 100, height: 100)
    square.center = view.center
    
    let button = UIButton()
    button.backgroundColor = .green
    button.setTitle("Hello", for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.addTarget(self, action: #selector(onButtonTapped), for: .touchUpInside)
    view.addSubview(button)
    let buttonSize: CGFloat = 100
    button.frame = CGRect(x: view.bounds.width/2 - buttonSize/2, y: view.bounds.height*3/4 - buttonSize/2, width: buttonSize, height: buttonSize)
  }
  
  @objc private func onButtonTapped() {
    square.backgroundColor = .yellow
  }
}

ボタンをクリックすると黄色に変化するプログラムを書けました！

さて、次に、ほんの少しだけ高度な内容についてですが、iOS開発をする上でとても重要なViewControllerのLifecycleの話をします。

例えばiPhoneでは、画面にこのような部分があります。SafeAreaといって、この部分にはアプリに大きく影響する内容のものは表示しない方がいいでしょう。

このpostに書いていますが、view.safeAreaInsets情報はUIViewControllerのlifecycleの中で得られるタイミングが決まっています。viewDidLoad( )がコールされるタイミングではまだ得られておらず、viewWillLayoutSubviews( )で得られます。

viewDidLoad( )はUIViewControllerの生成時に一度だけ呼ばれるため、view.addSubview( )などをコールする場所としては適していますが、実はframeを設定するなどレイアウト関連の作業を実施するには適していません。また、viewWillLayoutSubviews( )はlifecycleの中で状況に応じて何度もコールされるため、view.addSubview( )を実行するには適していません。

つまり、実行する内容によってコールする場所を考慮する必要がある、ということです。

文字にすると難しそうに見えますが、実際にコードを書いて説明します。以下のコードは意図の通りの結果は得られません。

class ViewController: UIViewController {
  // viewWidth、topInsetはcomputed propertyです
  // 何かしらの計算の結果を返すvariableのことをcomputed propertyと呼びます
  var viewWidth: CGFloat {
    return view.bounds.width
  }
  // 
  var topInset: CGFloat {
    view.safeAreaInsets.top
  }
  
  let square: UIView = {
    let square = UIView()
    square.backgroundColor = .red
    return square
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    view.addSubview(square)
    square.frame = CGRect(x: 0, y: topInset, width: viewWidth, height: 100)
  }
}

下記のようにviewWillLayoutSubviews( )でコールすると、safeAreaInsetsの情報が反映されます。

class ViewController: UIViewController {
  
  var viewWidth: CGFloat {
    return view.bounds.width
  }
  
  var topInset: CGFloat {
    view.safeAreaInsets.top
  }
  
  let square: UIView = {
    let square = UIView()
    square.backgroundColor = .red
    return square
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    view.addSubview(square)
  }
  
  override func viewWillLayoutSubviews() {
    square.frame = CGRect(x: 0, y: topInset, width: viewWidth, height: 100)
  }
}

最初は取っ付きにくい部分はあまり語らず、出来るだけ直感的に手を動かせるように説明していきます。手を動かして行くと徐々に分かってくると思うからです！

また、後々役に立つため、今回はStoryboardを使用せずに全てコードで書いて行きます。

まずはXcodeのメニューから新しいプロジェクトを作成します。

iOSのApp、を選択し、プロジェクト名（なんでもOK）を入力、InterfaceはStoryboard、LanguageはSwiftを選択してください。

まずはこのまま空のプロジェクトをビルドしてみましょう。ビルド先にSimulatorもしくは実機を選択し、右向きの三角ボタン（プレイボタン）をクリックするか、ショートカットCommand + Rでビルド出来ます。

まっ白なスクリーンが表示されます。

この表示されているものがUIViewControllerです。もう少し正確にいうとViewControllerが標準で持っているviewという「部品」です。

Xcodeの一番左にナビゲーションが表示されているので、ViewControllerという名前のファイルをクリックして開きましょう。ちなみに、この赤く囲っているボタンを押すとナビゲーションを隠したり開いたり出来ます。

ViewController最初は以下のようになっています。「クラスの継承」が最初は分からないかも知れませんが、それは後々説明します。

ちなみに、// の後のテキストは、次に改行されるまで全てコメントとして扱われ、プログラム自体には影響を及ぼしません。プログラムというものは多くの場合、将来の自分が見てもよく分からないことがあります。そのため、どのようなつもり、背景でそう書いたのかを書き残しておくと半年後、一年後の自分に感謝されます ^^　このブログもそのようなきっかけで始めました。。。

import UIKit

// UIViewControllerというクラスを継承(inherit)したViewControllerというクラス
class ViewController: UIViewController {
  // UIViewControllerが持つ標準のfunc
  override func viewDidLoad() {
    super.viewDidLoad()
    
  }
}

ごく簡単に説明すると、iOSのスクリーン上に何かを表示させるためには、最低一つのUIViewController（Root ViewControllerと呼びます）が必要ということです。プロジェクト作成時にはXcodeがViewControllerをひとつ自動で作成してくれます。

viewDidLoadというfunctionは、UIViewControllerが標準で持っている関数ですが、これもまた後々Life Cycle（UIViewControllerが作成されてから破棄されるまで）を解説する時にもう少し詳しく説明します。

実際に手を動かすと徐々に分かってくるので、viewに色をつけてみましょう。viewDidLoad内に以下のように書きます。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink
  }
}

Command + Rでビルドしてみると、濃いピンクに変更されました。

iOS開発では、このviewに対して別のviewを追加し画面を組んで行きます。

では実際に別のviewを追加してみましょう。以下のように書きます。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink

    // UIViewクラスのインスタンスを作成しanotherViewという名前をつける
    let anotherView = UIView() 
　　// 色をつける
    anotherView.backgroundColor = .systemCyan 
　　// 親viewにsub viewとして追加
    view.addSubview(anotherView) 
    // 追加しただけだとまだサイズが指定されていないため表示されないので、CGRectを使って指定する
　　anotherView.frame = CGRect(x: 0, y: 0, width: 100, height: 100) 
  }
}

Command + Rでビルドすると、左上コーナーにanotherViewが表示されました。

ここではCGRectというクラスを使ってanotherViewのframeを設定しています。frameは親viewに対してどの位置を起点に、どのサイズで表示するか、というものです。

iOSでは左上コーナーが(x: 0, y: 0)という座標でxは左方向へ、yは下方向へプラスの値ということになっています。（ちなみにmacOSの場合は逆で、左下コーナーが(0, 0)です。なぜでしょうね？中の人の派閥が違うんでしょうか？？笑）

では、このCyan（シアン）色の四角を、親viewに対して中央に配置してみましょう。いくつかやり方があるのですが、最も簡単な方法は以下です。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink
    
    let anotherView = UIView()
    anotherView.backgroundColor = .systemCyan
    view.addSubview(anotherView)
    anotherView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    // anotherViewのcenterを親viewのcenterに合わせる
    anotherView.center = view.center
  }
}

ビルドするとCyanの四角が中央に来ました。

別の方法としては、親viewの中のどこに配置するのかを数値で指定するものです。

そのためには親viewのサイズが分かると良さそうです。

先ほどのviewDidLoad内の各ポイントでいくつかの値をprint出力してみたいと思います。

ちなみに、swift標準のprint関数はとても便利です。print関数の引数(arugument)には、コンマ（,）で区切ることで幾つでもオブジェクトをprint出力出来ますし、”文字列”(string)の中に\( )でオブジェクトを囲ってもstringとして出力出来ます。#functionや#lineなどのキーワードを使うことで、どの関数の何行目の出力なのかが分かり、後々デバッグが楽になると思います。ここでは敢えて色々な書き方をしています ^^

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    print("\(#function) printing view.bounds: ", view.bounds)
    print("printing view.frame: ", view.frame)
    view.backgroundColor = .systemPink
    
    let anotherView = UIView()
    anotherView.backgroundColor = .systemCyan
    view.addSubview(anotherView)
    anotherView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    
    print(#line, " printing anotherView.frame: ", anotherView.frame)
    print("\(#line) printing anotherView.bounds: \(anotherView.bounds)")
    
    anotherView.center = view.center
    
    print("\(#line) frame after centered: ", anotherView.frame)
    print("\(#line) bounds after centered: ", anotherView.bounds)
  }
}

ここで注目したいのは、viewのframeとboundsです。簡単に言うと、frameは親viewの中の位置情報を含んだもの、boundsは自分自身におけるサイズです。これらはiOS開発でしょっちゅう使うので、とても大切です。

ビルドすると、以下のように出力されます。太字はコメントです。

view.boundsは親view自身におけるサイズ情報
viewDidLoad() printing view.bounds:  (0.0, 0.0, 390.0, 844.0)
親viewのframeの位置(起点、origin)は、root viewであるため(0.0, 0.0)
printing view.frame:  (0.0, 0.0, 390.0, 844.0)
centeringする前のanotherViewのframe
24  printing anotherView.frame:  (0.0, 0.0, 100.0, 100.0)
centeringする前のanotherViewのbounds
25 printing anotherView.bounds: (0.0, 0.0, 100.0, 100.0)
centering後のanotherViewのframeは、親view内の位置情報を含みます
29 frame after centered:  (145.0, 372.0, 100.0, 100.0)
centering後のboundsは自分自身における情報なので、変わらず
30 bounds after centered:  (0.0, 0.0, 100.0, 100.0)

では、親viewのサイズが分かったので、それを利用してcenter配置してみます。

x軸の中心値はview.bounds.width/2、y軸の中心値はview.bounds.height/2 でゲット出来ます。anotherViewのサイズは100なので、その半分の値100/2を引くことで、anotherViewのorigin（左上コーナー）とするべき値が得られます。ビルドすると同じ結果が得られます。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink
    
    let anotherView = UIView()
    anotherView.backgroundColor = .systemCyan
    view.addSubview(anotherView)
    // Swiftでは文(statement)の途中で改行も可能です。
    anotherView.frame = CGRect(
      x: view.bounds.width/2 - 100/2,
      y: view.bounds.height/2 - 100/2, width: 100, height: 100
    )
  }
}

同じ要領で、anotherViewの中に別のviewを配置してみましょう。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink
    
    let anotherView = UIView()
    anotherView.backgroundColor = .systemCyan
    view.addSubview(anotherView)
    anotherView.frame = CGRect(
      x: view.bounds.width/2 - 100/2,
      y: view.bounds.height/2 - 100/2, width: 100, height: 100
    )
    
    let oneMoreView = UIView()
    // .yellowとも書けますが、省略せずに書くとUIColor.yellowです。Swiftは型を推定出来る場合、型を省略して書くことが出来ます。
    oneMoreView.backgroundColor = UIColor.yellow
    // ここではCGFloat型の定数sizeを作成して使っています
    let size: CGFloat = 80
    anotherView.addSubview(oneMoreView)
    oneMoreView.frame = CGRect(x: anotherView.bounds.width/2 - size/2, y: anotherView.bounds.height/2 - size/2, width: size, height: size)
  }
}

黄色のoneMoreViewを円形にしてみましょう。

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .systemPink
    
    let anotherView = UIView()
    anotherView.backgroundColor = .systemCyan
    view.addSubview(anotherView)
    anotherView.frame = CGRect(
      x: view.bounds.width/2 - 100/2,
      y: view.bounds.height/2 - 100/2, width: 100, height: 100
    )
    
    let oneMoreView = UIView()
    oneMoreView.backgroundColor = UIColor.yellow
    let size: CGFloat = 80
    anotherView.addSubview(oneMoreView)
    oneMoreView.frame = CGRect(x: anotherView.bounds.width/2 - size/2, y: anotherView.bounds.height/2 - size/2, width: size, height: size)
   // UIViewの持つlayerというオブジェクトのcornerRadiusというattributeにsize/2を入力します。
    oneMoreView.layer.cornerRadius = size/2
  }
}

UIView以外にもUIButtonやUILabelなどさまざまな部品がUIKitフレームワークには用意されていますが、配置の基本は同じです。

Part 2では変数（や定数）のスコープや、UIViewControllerのLife Cycleを説明するために、もう少しだけ機能を追加した画面を作ってみます。