人生轉捩點之 My 10YearChallenge！

圖片來源：https://www.marketing-interactive.com/the-art-of-trendjacking-brands-get-in-on-the-10yearchallenge/

我的私房照片要公開了啊～

面對這個作業時突然有個想法，今年也算是我人生的轉捩點，我離開做了五年多的工作，認真的想要來學習Swift，於是就踏上這條不歸路了，基於這個心情，利用這份作業做了一個小小的App，分為「我的10YearChallenge」以及「2019 Calendar」兩個部分，象徵著我的過去十年以及2019這個人生關鍵的一年，來看看成品吧！

App開始畫面

首頁

這個畫面使用到的元件有：

1. UILable：我的名字。
2. UIText View：Facebook、Medium、Github的連結。
3. Button：連結「我的10YearChallenge」及「2019 Calendar」兩個頁面，而這兩個頁面使用自訂 view controller 類別來實現。
4. Navigation Controller：可以回到上一頁。
5. UIImage View：增加照片斜邊的功能(順便練習了一份小作業)。

自訂ViewController及TenYearsViewController兩個controller來完成兩個畫面

參考文章：

利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心

自訂 controller 類別和利用 viewDidLoad 客製 App 畫面

2019 Calendar

這個畫面使用到的元件有：

1. UILable：顯示年初及年底、Autoplay。
2. Date picker：選擇月曆。
3. Slider：滑動選擇月曆。
4. Switch：切換自動播放功能。
5. UIImage View：播放照片。

程式碼：

import UIKit
class ViewController: UIViewController {

@IBOutlet weak var calendarImageVIew: UIImageView!
@IBOutlet weak var datePicker: UIDatePicker!
@IBOutlet weak var yearSlider: UISlider!
//宣告常數：dateFormatter、及月曆的圖片
let dateFormatter = DateFormatter()
let monthimage = ["Jan","Feb","Mar","Apr","May","Jen","Jul","Aug","Sep","Oct","Nev","Dev"]
//宣告變數：日期、數圖片、slider
var dateString:String = ""
var timer:Timer?
var monthcount = 0
var slidervalue = 0
override func viewDidLoad() {
super.viewDidLoad()
// 建立 dateFormatter
time()
datePicker.locale = Locale(identifier: "zh_TW")
dateFormatter.dateFormat = "yyyy/MM/dd"
}
//比對陣列內的月曆圖片
func compare(){
if monthcount >= monthimage.count{
monthcount = 0
chooseImage(num2:monthcount)
calendarImageVIew.image = UIImage(named: monthimage[monthcount])
}else{
chooseImage(num2:monthcount)
calendarImageVIew.image = UIImage(named: monthimage[monthcount])
}
//Slider跟著動
yearSlider.value = Float(monthcount)
monthcount += 1
}
//每一秒執行一次compare
func time(){
timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true){(timer)in self.compare()}
}
//UIDatePicker的Action
@IBAction func changeImageDatePicker(_ sender: UIDatePicker){
let ImageDate = datePicker.date
let dateComponents = Calendar.current.dateComponents(in: TimeZone.current, from: ImageDate)
var month = dateComponents.month!
//由於array的起始值為0，而取出的月份數值起始值為1，所以取出的月份數值減一才會跟array內的圖片同步
month -= 1
calendarImageVIew.image = UIImage(named: monthimage[month])
}
//UISlider的Action
@IBAction func changeValueSlider(_ sender: UISlider) {
sender.value.round()
slidervalue = Int(sender.value)
calendarImageVIew.image = UIImage(named: monthimage[slidervalue])
}
//UISwitch的Action
@IBAction func autoplaySwitch(_ sender: UISwitch) {
if sender .isOn{
time()
monthcount = slidervalue
yearSlider.value = Float(monthcount)
}else{
timer?.invalidate()
}
}
//使用switch做選擇月曆圖片的連續數值判斷
func chooseImage(num2:Int){
switch num2 {
case 0:
dateString = "2019/01/01"
case 1:
dateString = "2019/02/01"
case 2:
dateString = "2019/03/01"
case 3:
dateString = "2019/04/01"
case 4:
dateString = "2019/05/01"
case 5:
dateString = "2019/06/01"
case 6:
dateString = "2019/07/01"
case 7:
dateString = "2019/08/01"
case 8:
dateString = "2019/09/01"
case 9:
dateString = "2019/10/01"
case 10:
dateString = "2019/11/01"
default:
dateString = "2019/12/01"
}
//修改datapicker顯示日期為dateString內字串的日期
let date = dateFormatter.date(from: dateString)
datePicker.date = date!
}
//關閉app畫面即停止timer，以防止在背景持續執行
override func viewDidDisappear(_ animated: Bool) {
timer?.invalidate()
}
}

我想要特別說明一下關於DatePicker的部分，其實這份作業我參考蠻多同學及學長姐的程式碼，發現大家都沒有做到利用DatePicker去換照片啊！(是想說用switch去連動就好了嗎ＸＤ？)由於沒得抄襲又很想做出這個功能，所以開始研究到底要怎麼做，還煩了小王子整整兩天，感謝小王子不厭其煩的引導及解說，給我製作出這個功能的方向，最後終於生出來了(超感動～)

利用DatePicker去換圖片的部分：

@IBAction func changeImageDatePicker(_ sender: UIDatePicker){
//讀取datePicker的日期數值
let ImageDate = datePicker.date
let dateComponents = Calendar.current.dateComponents(in: TimeZone.current, from: ImageDate)
//取出月份數值
var month = dateComponents.month!
//由於array的起始值為0，而取出的月份數值起始值為1，所以取出的月份數值減一才會跟array內的圖片同步
month -= 1
//讓ImageView顯示放在array裡圖片對應的月曆圖片
calendarImageVIew.image = UIImage(named: monthimage[month])
}

我的10YearChallenge

10YearChallenge 彩蛋是猜我的生日及星座ＸＤ

我必須感謝我家的基因讓我的面貌看起來十年變化似乎沒有太大，唯一變化的是體重(讓我哭一下)，這不能怪基因了，只能怪我沒有好好保持身材，驚人的是我的體重似乎跟我的年齡成正比，一年增加一公斤這樣(好悲傷)。

程式碼跟前一頁2019 Calendar大同小異，主要是修改DatePicker的部分，不知道該如何修改又煩了小王子，後來才發現是自己太鑽牛角尖，套句小王子說的話：「跟人生一樣，不用想得太難」，真的！別把自己往胡同裡鑽！

@IBAction func yearsPChangeDatePicker(_ sender: UIDatePicker) {
//讀取datePicker的日期數值
let ImageDate = tenyearsDatePicker.date
let dateComponents = Calendar.current.dateComponents(in: TimeZone.current, from: ImageDate)
//取出年份數值
let year = dateComponents.year!
//將讀出的年份轉成字串，讓ImageView顯示對應的年份照片（前提是照片用年份命名）
tenyearsImageView.image = UIImage(named:"\(year)")
}

加碼練習

在TenYearsViewController的viewDidLoad裡面加入player.play()，這樣進入10YearChallenge的頁面之後就會自動播放歌曲。

let player = AVPlayer(url: URL(string: "https://bit.ly/2ZGwSBt")!)
override func viewDidLoad() {
super.viewDidLoad()
player.play()
}

成品操作展示

My 10YearChallenge App

進入10YearChallenge的頁面之後似乎沒有立即播放歌曲，這是因為我放的音樂連結來源是Youtube，是一首Taylor Swift的音樂MV，看看MV就會知道為什麼一開始沒聲音了：

Taylor Swift — ME! (feat. Brendon Urie of Panic! At The Disco)

附上Github

Julia1032003/Calendar2019

參考文章：

感謝小王子

#69 10YearChallenge，時間都去哪了

請問 Swift 大大，今天幾月幾號星期幾 ?

感謝厲害的陳永展同學

天后蔡依林-金曲時光機

如果有值得大家參考的地方再麻煩大家幫我拍拍手喲，謝謝大家～