はじめに
以下のようなTwitterのツイートボタンライクなUIを実装してみます。
実装イメージ
複数のボタンを重ねて配置し、アニメーションで拡散するようにしてみます。
レイアウト実装
今回は、UIViewのサブクラスを用意して、そのクラス内で必要なボタンを全て配置してみるようにします。
CircleSpreadButtonView.swift
class CircleSpreadButtonView: UIView {}
なので、CircleSpreadButtonViewのinit時に配置するボタンに関する情報を渡してあげます。
今回は以下のstructにまとめて渡すようにしました。
CircleSpreadButtonInfo.swift
import UIKit
// 円の中心のボタン情報
struct CenterButtonInfo {
let title: String
let backgroundColor: UIColor
let backgroundImage: UIImage?
let type: CircleSpreadButtonType?
init(title: String = "", backgroundColor: UIColor = .white, backgroundImage: UIImage? = nil, type: CircleSpreadButtonType? = nil) {
self.title = title
self.backgroundColor = backgroundColor
self.backgroundImage = backgroundImage
self.type = type
}
}
// 円形に広がるボタン情報
struct SpreadButtonInfo {
let title: String
let backgroundColor: UIColor
let backgroundImage: UIImage?
let type: CircleSpreadButtonType?
let task: () -> ()
init(title: String = "", backgroundColor: UIColor = .white, backgroundImage: UIImage? = nil, type: CircleSpreadButtonType? = nil, task: @escaping () -> ()) {
self.title = title
self.backgroundColor = backgroundColor
self.backgroundImage = backgroundImage
self.type = type
self.task = task
}
}
structの引数にCircleSpreadButtonTypeという型がありますが、これはデフォルトで用意したボタン情報を使用する際に渡すenumですので、独自でボタン情報を設定する場合はnilで問題ないです。
CircleSpreadButtonViewクラスのinit時に作成したstructを渡します。
CircleSpreadButtonView.swift
/// イニシャライズ
///
/// - Parameters:
/// - origin: origin
/// - length: 自身の長さ（絶対正方形にしたいので一辺の長さだけ渡します）
/// - firstSpreadButtonCenterAngle: 一つ目の拡散用ボタンの中心ボタンから見た配置角度（以降は等間隔で配置される）
/// - spreadButtonAngleInterval: 拡散用ボタンの配置間隔の角度
/// - centerButtonInfo: 中心ボタン情報
/// - spreadButtonInfoArray: 拡散用ボタン情報の配列
init(origin: CGPoint, length: CGFloat = 80,
firstSpreadButtonCenterAngle: Double = 100, spreadButtonAngleInterval: Double = 40,
centerButtonInfo: CenterButtonInfo, spreadButtonInfoArray: [SpreadButtonInfo]) {
self.origin = origin
viewSize = CGSize(width: length, height: length)
self.centerButtonInfo = centerButtonInfo
self.spreadButtonInfoArray = spreadButtonInfoArray
self.firstSpreadButtonCenterAngle = firstSpreadButtonCenterAngle
self.spreadButtonAngleInterval = spreadButtonAngleInterval
super.init(frame: CGRect(origin: origin, size: viewSize))
// 自身を円形にする
roundCorner(view: self)
// 拡散用ボタンの生成・配置
setupSpreadButton()
// 中心ボタンの生成・配置
setupCenterButton()
}
// 拡散用ボタンの生成・配置
func setupSpreadButton() {
spreadButtonInfoArray.enumerated().forEach { [weak self] (index, spreadButtonInfo) in
guard let self = self else { return }
let spreadButton = UIButton(frame: CGRect(origin: .zero,
size: CGSize(width: self.viewSize.width * self.spreadButtonSizeParcentage,
height: self.viewSize.height * self.spreadButtonSizeParcentage)))
spreadButton.setBackgroundImage(spreadButtonInfo.type?.backgroundImage ?? spreadButtonInfo.backgroundImage,
for: .normal)
spreadButton.center = self.roundViewCenter(length: self.viewSize.width)
spreadButton.backgroundColor = spreadButtonInfo.type?.backgroundColor ?? spreadButtonInfo.backgroundColor
spreadButton.setTitle(spreadButtonInfo.type?.title ?? spreadButtonInfo.title, for: .normal)
spreadButton.setTitleColor(.white, for: .normal)
spreadButton.setTitleColor(UIColor.white.withAlphaComponent(0.5), for: .highlighted)
spreadButton.titleLabel?.lineBreakMode = .byTruncatingTail
spreadButton.tag = index + 1
spreadButton.addTarget(self, action: #selector(spreadButtonAction(sender:)), for: .touchUpInside)
self.addSubview(spreadButton)
self.roundCorner(view: spreadButton)
}
}
// 中心ボタンの生成・配置
func setupCenterButton() {
let centerButton = UIButton(frame: CGRect(origin: .zero, size: viewSize))
centerButton.setBackgroundImage(centerButtonInfo.type?.backgroundImage ?? centerButtonInfo.backgroundImage,
for: .normal)
centerButton.backgroundColor = centerButtonInfo.type?.backgroundColor ?? centerButtonInfo.backgroundColor
centerButton.setTitle(centerButtonInfo.type?.title ?? centerButtonInfo.title, for: .normal)
centerButton.setTitleColor(.white, for: .normal)
centerButton.setTitleColor(UIColor.white.withAlphaComponent(0.5), for: .highlighted)
centerButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 24)
centerButton.addTarget(self, action: #selector(centerButtonAction(sender:)), for: .touchUpInside)
addSubview(centerButton)
roundCorner(view: centerButton)
}
※ 実装の細かい部分に関しては、記事の最後にリポジトリのURLを貼ってありますので、そちらを参照ください
アニメーションの実装
用意したボタンを拡散させるアニメーションを実装します。
上で用意した中心ボタンのタップをトリガーにアニメーションさせるようにします。
ちょっと長くなってますが、やっていることは単純で、各ボタンのアニメーション後の座標計算と実行だけです。
CircleSpreadButtonView.swift
@objc func centerButtonAction(sender: UIButton) {
// 連打防止
sender.isEnabled = false
// 拡散用ボタンとアニメーション後のcenterの座標を保持
var buttonPairs = [(button: UIButton, center: CGPoint)]()
// アニメーション後のこのクラスのサイズ
let spreadViewSize = isOpen ? viewSize : CGSize(width: viewSize.width * spreadViewSizeParcentage,
height: viewSize.height * spreadViewSizeParcentage)
// アニメーションさせる前のcenter座標を保持（アニメーション時の位置調節に使用）
let spreadViewCenterBeforeTransform = center
// アニメーション後の中心ボタンのcenter座標
let centerButtonCenter = CGPoint(x: spreadViewSize.width / 2, y: spreadViewSize.height / 2)
// アニメーション後のこのクラスのcenter座標
let spreadViewCenterAfterTransform = self.roundViewCenter(length: spreadViewSize.width)
// アニメーション後の拡散用ボタンのcenter座標を生成
spreadButtonInfoArray.enumerated().forEach { [weak self] (index, _) in
guard let self = self, let spreadButton = self.viewWithTag(index + 1) as? UIButton else {
sender.isEnabled = true
return
}
// 角度ごとの円形状の座標を取得
let degree = firstSpreadButtonCenterAngle + (spreadButtonAngleInterval * Double(index))
let circumferencePoint = self.convert(self.circumferenceCoordinate(degree: degree,
radius: (spreadViewSize.width / 2) - (spreadButton.frame.width * 0.6)), to: self)
// Viewの配置位置に合わせて、アニメーション後の拡散用ボタンのcenter座標を計算
let spreadButtonCenter = CGPoint(x: self.isOpen ? spreadViewCenterAfterTransform.x : spreadViewCenterAfterTransform.x + circumferencePoint.x,
y: self.isOpen ? spreadViewCenterAfterTransform.y : spreadViewCenterAfterTransform.y + circumferencePoint.y)
buttonPairs.append((spreadButton, spreadButtonCenter))
}
// アニメーションの用意
let animation = { [weak self] () -> () in
guard let self = self else { return }
// 本Viewを円形に広げるアニメーション
self.frame.size = spreadViewSize
self.center = spreadViewCenterBeforeTransform
self.roundCorner(view: self)
// 本Viewのアニメーションに合わせて中心ボタンもアニメーションさせる
sender.center = centerButtonCenter
// 生成した拡散用ボタンをアニメーションさせる（中心座標の移動）
buttonPairs.forEach({ (button, center) in
button.center = center
})
}
let animator = self.isOpen ?
UIViewPropertyAnimator(duration: 0.1, curve: .linear, animations: {
animation()
})
:
UIViewPropertyAnimator(duration: 0.7, dampingRatio: 0.5) {
animation()
}
animator.addCompletion { [weak self] (_) in
self?.isOpen.toggle()
sender.isEnabled = true
}
// アニメーションの実行
animator.startAnimation()
}
※ 拡散用ボタンのみ移動させるのではなく、CircleSpreadButtonView自体も拡散に合わせて変形させているのは、親Viewの範囲外まで子Viewが移動するとタップジェスチャーを認識できないためです。
動作確認
実際にCircleSpreadButtonViewをinitしてレイアウトを確認します。
ViewController.swift
let centerButtonInfo = CenterButtonInfo(title: "Tap", backgroundColor: .black)
let redButtonInfo = SpreadButtonInfo(title: "赤", backgroundColor: .red, backgroundImage: nil, type: nil, task: {
print("赤ボタンを押したよ")
})
let blueButtonInfo = SpreadButtonInfo(title: "青", backgroundColor: .blue, backgroundImage: nil, type: nil, task: {
print("青ボタンを押したよ")
})
let greenButtonInfo = SpreadButtonInfo(title: "緑", backgroundColor: .green, backgroundImage: nil, type: nil, task: {
print("緑ボタンを押したよ")
})
let circleSpreadButtonView = CircleSpreadButtonView(origin: view.center,
length: 80,
centerButtonInfo: centerButtonInfo,
spreadButtonInfoArray: [redButtonInfo, blueButtonInfo, greenButtonInfo])
デフォルトで用意したenumでボタンを生成する場合
ViewController.swift
let centerButtonInfo = CenterButtonInfo(title: "Tap", backgroundColor: .black)
let cameraButtonInfo = SpreadButtonInfo(type: .camera, task: {
print("カメラ")
})
let libraryButtonInfo = SpreadButtonInfo(type: .library, task: {
print("フォトライブラリ")
})
let writeButtonInfo = SpreadButtonInfo(type: .write, task: {
print("作成")
})
let circleSpreadButtonView = CircleSpreadButtonView(origin: view.center,
length: 80,
centerButtonInfo: centerButtonInfo,
spreadButtonInfoArray: [cameraButtonInfo, libraryButtonInfo, writeButtonInfo])
円形に広がるということで、こんな感じもやってみました。
ViewController.swift
let centerButtonInfo = CenterButtonInfo(title: "Tap", backgroundColor: .black)
let b1 = SpreadButtonInfo(title: "😆", backgroundColor: .red, task: { print("red") })
let b2 = SpreadButtonInfo(title: "😃", backgroundColor: .blue, task: { print("blue") })
let b3 = SpreadButtonInfo(title: "😌", backgroundColor: .green, task: { print("green") })
let b4 = SpreadButtonInfo(title: "😝", backgroundColor: .cyan, task: { print("cyan") })
let b5 = SpreadButtonInfo(title: "😍", backgroundColor: .purple, task: { print("purple") })
let b6 = SpreadButtonInfo(title: "😀", backgroundColor: .orange, task: { print("orange") })
let b7 = SpreadButtonInfo(title: "🤓", backgroundColor: .brown, task: { print("brown") })
let b8 = SpreadButtonInfo(title: "😁", backgroundColor: .magenta, task: { print("magenta") })
let b9 = SpreadButtonInfo(title: "😊", backgroundColor: .yellow, task: { print("yellow") })
let length: CGFloat = 80
let centerOrigin = CGPoint(x: (view.frame.width / 2) - (length / 2), y: view.frame.height / 2 - (length / 2))
let circleSpreadButtonView = CircleSpreadButtonView(origin: centerOrigin,
length: length,
firstSpreadButtonCenterAngle: 0,
centerButtonInfo: centerButtonInfo,
spreadButtonInfoArray: [b1, b2, b3, b4, b5, b6, b7, b8, b9])
# ソースコード
今回作ったサンプルのソースは以下のリポジトリにあります。
https://github.com/ddd503/CircleSpreadButton