![見出し画像](https://assets.st-note.com/production/uploads/images/100615146/rectangle_large_type_2_0540e097ff2c59bc0cf66cb911131d07.png?width=1200)
【徒然iOS】気ままにUIKit49〜Blur Effectの使い方〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をレッツゴ🕺
前準備
念の為、
バックアップ
新しいクラス
ビューコントローラの追加
イニシャルビューの変更
をいつも通りやってから本題へ💃
![](https://assets.st-note.com/img/1679178301854-hWBinaDqx4.png?width=1200)
本題
ブラーエフェクトとは、
曇りガラスのように背後の部品がぼんやり見えるビュー
ブラー:ぼんやり見えるもの👀
まんまやね💦
⒈イメージビューをデバイス画面に配置し、画面いっぱいに引き延ばす。
![](https://assets.st-note.com/img/1679178456607-vf3E9HqMWN.png?width=1200)
![](https://assets.st-note.com/img/1679178482195-G381D9nC6d.png?width=1200)
![](https://assets.st-note.com/img/1679178511468-qP6V4SuB0u.png?width=1200)
![](https://assets.st-note.com/img/1679178544833-Whb949VJK8.png?width=1200)
⒉ブラーエフェクトをデバイス画面に配置し、画面いっぱいに引き延ばす。Blur Styleを「Extra Light」に変更。
![](https://assets.st-note.com/img/1679178740251-x4MOaRiWZr.png?width=1200)
![](https://assets.st-note.com/img/1679178757014-oagCgRp6ix.png?width=1200)
![](https://assets.st-note.com/img/1679178770530-MkoJ6BGWuC.png?width=1200)
![](https://assets.st-note.com/img/1679178782952-sSHgDo3QZb.png?width=1200)
![](https://assets.st-note.com/img/1679178796009-uA8qvZKpBB.png?width=1200)
⒊画面の外からブラーエフェクトが現れるものを実装
ここは、SFシンボルの使用例も示しときたいし、音楽アプリっぽい感じにしたいから、
ラベルじゃなくてイメージにする〜〜〜〜
![](https://assets.st-note.com/img/1679179175912-mwdFYJG18r.png?width=1200)
![](https://assets.st-note.com/img/1679179228372-vjSW6N7HTu.png?width=1200)
![](https://assets.st-note.com/img/1679179261514-HIlOsVeQU1.png?width=1200)
![](https://assets.st-note.com/img/1679179297228-xBi1dSTWkX.png?width=1200)
![](https://assets.st-note.com/img/1679179323209-1f6oPAFLx1.png?width=1200)
![](https://assets.st-note.com/img/1679179354029-an7Wyud251.png?width=1200)
![](https://assets.st-note.com/img/1679179377077-LYzoDouSil.png?width=1200)
⒋Pinボタンを押して吹き出しの設定画面を表示
![](https://assets.st-note.com/img/1679179557850-yMcxqiChDh.png?width=1200)
![](https://assets.st-note.com/img/1679179573416-fr18kP7IM7.png?width=1200)
⒌Tap Gesture Recognizerを追加して、アクション接続
![](https://assets.st-note.com/img/1679179785090-hJyPNkTrGv.png?width=1200)
![](https://assets.st-note.com/img/1679179799471-Rk49Qyd2gK.png?width=1200)
![](https://assets.st-note.com/img/1679179817496-oVqPzpP7sl.png?width=1200)
![](https://assets.st-note.com/img/1679179833225-D40qo0gutb.png?width=1200)
⒍Visual Effect View.top = top…をアウトレット接続
![](https://assets.st-note.com/img/1679179926378-V24Nv4xYX8.png?width=1200)
![](https://assets.st-note.com/img/1679179986868-E6ACvEN7E1.png?width=1200)
![](https://assets.st-note.com/img/1679180003554-2aA2GW6gsH.png?width=1200)
⒎以下のコードを組み込む
//
// 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()
}
}
⒏シミュレータで実行
![](https://assets.st-note.com/img/1679180392072-68QJS8tZOV.png?width=1200)
![](https://assets.st-note.com/img/1679180437133-ZIIMeDS2Av.png?width=1200)
はい、サイト記事に関しては以上。
ブラッシュアップ
今回も、ここまででやってるから特になしでいいかな🙇
Apple公式
さて、次回は
をレッツゴする🕺
この記事が気に入ったらサポートをしてみませんか?