みなさんはじめまして. 私, かどわきと申します.
今年の3月に岩手県立大学を卒業して, 今は筑波大学大学院で勉強しています.
そして今回Qiitaに初投稿するので温かい目で見守ってくだされば幸いです泣
※フライングしてすみません...泣
作ったもの
最近はSwiftの勉強をしていて, ちょいちょいアプリを作っています.
そして今回は最近いいなぁと思っている「Tinder」のUIを使って, 岩手の風景画像を選ぶやつ作りました.
本AdventCalendarのトップバッター@otukutunさんが作ってくださった「いわてスイッチ」に感動して, 自分も岩手の魅力を伝えられるようなものを作ってみたいなーと思った次第でございます.
ただ, 時間がなかったので今回は風景画像が「好き」か「微妙」かに分別するだけのものになってしまいました泣
これをもとに, このあと何か面白い感じにできたらいいなぁと思っています.
使ったライブラリは「MDCSwipeToChooseView」というライブラリです.
CocoaPodsを使用すると楽に入ります.
※ここの作業は省略させていただきます泣
公式のgithubの方ではObjective-cで書かれていたので, そのままSwiftに変換しました.
とにかく実装できればいいやと思って書いてるので, 処理の最適化とかはしていません泣
その他, 色々適当なサイズ指定しているところは無視しちゃってください^^;
ViewController.swift
import UIKit
class ViewController: UIViewController, MDCSwipeToChooseDelegate {
var frontView: MDCSwipeToChooseView = MDCSwipeToChooseView()
var backView: MDCSwipeToChooseView = MDCSwipeToChooseView()
var chooseViewArray: Array<MDCSwipeToChooseView> = []
var chooseViewCount: Int = Int()
var likeButton: UIButton = UIButton()
var nopeButton: UIButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
chooseViewCount = 0
// MDCSwipeToChooseViewのオプションを設定する(like or nope の時の文字とか文字色とか)
var options: MDCSwipeToChooseViewOptions = MDCSwipeToChooseViewOptions()
options.delegate = self
options.likedText = "LIKE!"
options.likedColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
options.nopeText = "Hummm...."
options.nopeColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)
// 背景の画像を設定してブラーをかける処理
var image = UIImage(named: "background.jpg")
var imageView = UIImageView(image: image)
imageView.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
visualEffectView.frame = imageView.bounds
imageView.addSubview(visualEffectView)
let screenHeight = UIScreen.mainScreen().applicationFrame.size.height
let screenWidth = UIScreen.mainScreen().applicationFrame.size.width
let navigationBarHeight = self.navigationController?.navigationBar.frame.size.height
let statusBarHeight = UIApplication.sharedApplication().statusBarFrame.size.height
let logoViewWidth = screenWidth
let logoViewHeight = screenHeight / 10
let logoViewX = 0 as CGFloat
let logoViewY = screenHeight / 6
let lastImageWidth = screenWidth / 2
let lastImageHeight = screenHeight / 6
let lastImageX = (screenWidth - lastImageWidth) / 2
let lastImageY = (screenHeight - lastImageHeight) / 2
let chooseViewWidth = screenWidth
let chooseViewHeight = screenHeight / 2
let chooseViewX = 0 as CGFloat
let chooseViewY = logoViewY + logoViewHeight + 20
let buttonWidth = screenWidth / 4
let buttonHeight = screenHeight / 11
let likeButtonX = ((screenWidth / 2) - buttonWidth) / 2
let nopeButtonX = (screenWidth / 2) + likeButtonX
let buttonY = chooseViewY + chooseViewHeight + 20
// ロゴ(?)の画像
var logo = UIImage(named: "logo.png")
var logoView = UIImageView(image: logo)
logoView.frame = CGRectMake(logoViewX, logoViewY, logoViewWidth, logoViewHeight)
// 全選択後の画像
var lastImage = UIImage(named: "ganbarouiwate.gif")
var lastImageView = UIImageView(image: lastImage)
lastImageView.frame = CGRectMake(lastImageX, lastImageY, lastImageWidth, lastImageHeight)
var chooseView1: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
chooseView1.imageView.image = UIImage(named: "picture1.jpeg")
var chooseView2: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
chooseView2.imageView.image = UIImage(named: "picture2.png")
var chooseView3: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
chooseView3.imageView.image = UIImage(named: "picture3.jpeg")
chooseViewArray = [chooseView1, chooseView2, chooseView3]
self.view.addSubview(imageView)
self.view.addSubview(logoView)
self.view.addSubview(lastImageView)
setChooseView(chooseViewArray)
setLikeButton(likeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
setNopeButton(nopeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func viewDidCancelSwipe(view: AnyObject!) {
println("決めれないって?")
}
func view(view: AnyObject!, wasChosenWithDirection direction: MDCSwipeDirection) {
if (direction == MDCSwipeDirection.Left) {
println("写真を消しました!")
}
else {
println("写真を残しました!")
}
// 写真がスワイプ(選択)された回数を増やす
chooseViewCount++
// 写真がスワイプされた回数が選択画像の枚数以上だった場合, likeButtonとnopeButtonは無効化にする
if chooseViewCount >= chooseViewArray.count {
likeButton.enabled = false
nopeButton.enabled = false
likeButton.backgroundColor = UIColor.grayColor()
likeButton.layer.borderColor = UIColor.grayColor().CGColor
nopeButton.backgroundColor = UIColor.grayColor()
nopeButton.layer.borderColor = UIColor.grayColor().CGColor
}
}
// 画像を用意した枚数分セットする
func setChooseView(chooseViewArray: Array<MDCSwipeToChooseView>) {
for var i = 0; i < chooseViewArray.count; i++ {
if i == 0 {
self.view.addSubview(chooseViewArray[i])
}
else {
self.view.insertSubview(chooseViewArray[i], aboveSubview: chooseViewArray[i])
}
}
}
// 「Like」ボタンの設置
func setLikeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
likeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
likeButton.titleLabel?.textAlignment = NSTextAlignment.Center
likeButton.setTitle("LIKE", forState: UIControlState.Normal)
likeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
likeButton.backgroundColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
likeButton.layer.borderColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8).CGColor
likeButton.layer.borderWidth = 2.0
likeButton.layer.cornerRadius = 5.0
likeButton.addTarget(self, action: "chooseLike", forControlEvents: UIControlEvents.TouchUpInside)
self.view.addSubview(likeButton)
}
// 「戻る」ボタンの設置
func setNopeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
nopeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
nopeButton.titleLabel?.textAlignment = NSTextAlignment.Center
nopeButton.setTitle("Humm...", forState: UIControlState.Normal)
nopeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
nopeButton.backgroundColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)
nopeButton.layer.borderColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0).CGColor
nopeButton.layer.borderWidth = 2.0
nopeButton.layer.cornerRadius = 5.0
nopeButton.addTarget(self, action: "chooseNope", forControlEvents: UIControlEvents.TouchUpInside)
self.view.addSubview(nopeButton)
}
// likeButtonが押された場合, 一番上にある画像を右へスワイプする(LIKEにする)
func chooseLike() {
self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Right)
}
// nopeButtonが押された場合, 一番上にある画像を左へスワイプする(Hummm...にする)
func chooseNope() {
self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Left)
}
}
デモ
見にくいですが, 右にスワイプすると「LIKE」, 左にスワイプすると「Hummm...」となります.
終わりに
本当はもう少し丁寧に書きたかったのですが, 時間と知識が足らずすみません...
とにもかくにも, 岩手には本当に素晴らしい観光スポットがあるので, 広めていけたらいいなぁと思います.
ということで今回は以上です(๑╹ڡ╹๑)
ありがとうございました!