見出し画像

【徒然iOS】気ままにUIKit49〜Blur Effectの使い方〜

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をレッツゴ🕺

前準備

念の為、

  1. バックアップ

  2. 新しいクラス

  3. ビューコントローラの追加

  4. イニシャルビューの変更

をいつも通りやってから本題へ💃

こんな感じかな💦

本題

ブラーエフェクトとは、

曇りガラスのように背後の部品がぼんやり見えるビュー

ブラー:ぼんやり見えるもの👀
まんまやね💦

⒈イメージビューをデバイス画面に配置し、画面いっぱいに引き延ばす。

選んで〜〜〜
配置して〜〜〜
イメージを選択して〜〜〜
ハイ、引き伸ばした🕺

⒉ブラーエフェクトをデバイス画面に配置し、画面いっぱいに引き延ばす。Blur Styleを「Extra Light」に変更。

選んで〜〜〜
配置〜〜〜
引き伸ばし〜〜〜
設定を変えて〜〜〜
ハイ、完了🕺

⒊画面の外からブラーエフェクトが現れるものを実装

ここは、SFシンボルの使用例も示しときたいし、音楽アプリっぽい感じにしたいから、
ラベルじゃなくてイメージにする〜〜〜〜

わかりやすく、まずはBlurをダークに変更して
選択して〜〜〜
配置して〜〜〜〜
Imageにplayと入力して〜〜〜
playマークが出てきた🕺
Tintを白に〜〜
ハイ、らしくなってきた〜〜〜

⒋Pinボタンを押して吹き出しの設定画面を表示

まあこんな感じで〜〜〜〜
ハイ。画面外になった様子👀

⒌Tap Gesture Recognizerを追加して、アクション接続

選んで〜〜〜
追加できたのを確かめて〜〜〜
アクション接続〜〜〜
できた〜〜〜〜

⒍Visual Effect View.top = top…をアウトレット接続

選んで〜〜〜
こっちはアウトレット接続〜〜〜
ハイ、接続できた👀

⒎以下のコードを組み込む

//
//  ViewController.swift
//
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var testLabel: UILabel!
    @IBOutlet weak var topConstraint: NSLayoutConstraint!
    //画面タップ時の呼び出しメソッド
    @IBAction func tapGamen(sender: AnyObject) {
        //位置の制約を変更する。
        if topConstraint.constant == 0 {
            topConstraint.constant = -568
        } else {
            topConstraint.constant = 0
        }
        //アニメーションさせる。
        UIView.animateWithDuration(0.8,animations: { self.view.layoutIfNeeded()},completion:nil)
    }
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        let testDate = NSDate()
        let testFormatter = NSDateFormatter()
        //ロケールを設定する。
        testFormatter.locale = NSLocale(localeIdentifier:"ja_JP")
        //フォーマットのスタイルを設定する。
        testFormatter.dateStyle = .MediumStyle
        //ラベルに日付を設定する。
        testLabel.text = testFormatter.stringFromDate(testDate)
    }
}

と、今回は、ラベルを付けてなかったので、
以下のコードのみ組み込む〜〜〜

class BlurViewController: UIViewController {
    @IBOutlet weak var myTopConstraint: NSLayoutConstraint!
    @IBAction func tapScreen(_ sender: UITapGestureRecognizer) {
        //位置の制約を変更する。
        if myTopConstraint.constant == 0 {
            myTopConstraint.constant = -132
        } else {
            myTopConstraint.constant = 0
        }
        //アニメーションさせる。
        UIView.animate(withDuration: 0.8,animations: { self.view.layoutIfNeeded()},completion:nil)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

⒏シミュレータで実行

起動時
静止画だとわかりにくいけどもタップすると上からうにょ〜〜〜んと降りてきた👀

はい、サイト記事に関しては以上。

ブラッシュアップ

今回も、ここまででやってるから特になしでいいかな🙇

Apple公式

さて、次回は

をレッツゴする🕺

この記事が気に入ったらサポートをしてみませんか?