7 Minutes Workout的十堂必修課

7 Minutes Workout的發明者

七分鐘運動(7 Minutes Workout)是一位叫Kayla Itsines的澳洲女孩發明的,她努力成為一名專業的健身教練並不是為了減肥,而是為了健康,自幼體弱多病的她,在接觸健身之後身體越來越來好,漸漸的愛上健身,從澳洲健身研究學院畢業之後到健身房工作,她很快就注意到她所領導的機器類課程無法幫助她的客戶達到目標,有一天,她帶領學生進行非機器類的有氧運動,發現他們都很愛此項目,後來就發明了一套七分鐘運動系統,之後更是創立了一間叫做Bikini Body Training的公司;除了發明了七分鐘運動之外,Kayla Itsines還出版了健身主題的電子書及發佈健身App,24歲時入選《福布斯》全球最具影響力健身人物,年收入超過5000萬,2016年3月被美國時代雜誌《TIME》列為網際網路上30位最具影響力的人物之一。

Kayla Itsines的健身App - Kayla《 Itsines Fintess》

把家裡變身成健身房

其實在做完這個作業之後才認真查了七分鐘運動的發明者是誰,原來是個年輕的人生勝利組啊!(但是她也是充滿熱忱並努力朝夢想前進才成為人生勝利組的😆),我還蠻喜歡在家裡做七分鐘運動的,主要是懶得出門去健身房或是吃太多美食時安慰自己用的(自以為有動就不會胖🤣),這次利用《#51 實作 Table View 的基本功能》練習作業,把平常在看的七分鐘運動YouTube影片做成一個App,覺得做成App比在網頁看方便多了,來看看成品吧:

7 Minutes Workout的十堂必修課(有10個Cell)
好像不小心錄一個太攏長😅

作業題目

我有做到的部分

基本題

使用 table view controller,實現以下功能:

1. 利用內建的 cell 樣式顯示表格內容,定義 UITableViewDataSource 的相關 function。

2.表格的資料練習:array 的成員型別是自訂型別,比方 struct Song。

3. 點選 cell 後可到下一頁顯示詳細資訊:使用present。

透過present開啟iOS SDK內建的SFSafariViewController播放Youtube影片。

進階題

1. 客製 cell 顯示表格的內容,自訂 cell 類別和連結 outlet 到 cell 類別。

2. cell 搭配 as! 轉型。

3. cell 採用固定高度,cell 裡的元件設定 auto layout 條件。

4. cell 類別裡定義設定內容的 function。

更進階題

cell 搭配 auto layout 自動計算高度。

作法紀錄

1.在storyboard加入TableViewController。

Table View Controller

2.固定TableViewCell的高度(取消Automatic)。

固定TableViewCell的高度

3.加入imageview。

Image View

4.設定imageview的autolayout。

imageview上下左右都對齊constraints
imageview的autolayout

5.加入放標題及副標的Label。

Label

6.設定標題及副標Label的autolayout。

設定Label的autolayout

7.建立一個TableViewCell的Class。

Exercise Table Cell

8.在剛剛建立的Exercise Table Cell裡面拉imageview及lable的IBOutlet。

Lable的IBOutlet
Imageview及Lable的IBOutlet

9.建立一個TableViewController的Class。

ExerciseTableViewController

10.TableViewCell的類別改成剛剛新增的ExerciseTableViewCell。

右上角class改成ExerciseTableViewCell

11.加入圖片至Assets。

加入圖片

12.建立一個Swift file,命名為exercise。

建立Swift File

13.在剛剛建立的使用Swift file裡寫入struct自訂array的型別。

struct自訂array的型別

14.xcode非常貼心,因為我們有自訂型別所以會自動出現參數名稱。

自動出現參數名稱
自動出現參數名稱
自動出現參數名稱

15.給Table View Cell一個identifier之後在程式碼裡才能被呼叫到。

給Table View Cell一個identifier名稱

程式碼

ExerciseTableViewController

import UIKitimport SafariServices 
//點選cell會開啟網頁播放Youtube的影片,所以要先import SafariServices
class ExerciseTableViewController: UITableViewController {
//宣告exercisetopic存放Lable名稱、ImageView檔名及Youtube影片URL的array
//array裡資料的型別已經在exercise.swift寫入struct自訂好
var exercisetopic = [Exercise(topic: "七分鐘運動Lesson1", intro: "初學者入門" , videophoto: "sevenMinExercise0.jpg" , videourl: URL(string:"https://youtu.be/oYQ32VXMxJ0")!),Exercise(topic: "七分鐘運動Lesson2", intro: "經典七分鐘運動", videophoto: "sevenMinExercise1.jpg",videourl: URL(string:"https://youtu.be/P5st7m7PmuE")!),Exercise(topic: "七分鐘運動Lesson3", intro: "初學者腹部微調", videophoto: "sevenMinExercise2.jpg",videourl: URL(string:"https://youtu.be/VLrONQj-_fM")!),Exercise(topic: "七分鐘運動Lesson4", intro: "重點練腹部", videophoto: "sevenMinExercise3.jpg" , videourl: URL(string:"https://youtu.be/Mvad7d1Kw6A")!),Exercise(topic: "七分鐘運動Lesson5", intro: "爆汗版", videophoto: "sevenMinExercise4.jpg" , videourl: URL(string:"https://youtu.be/X1kum5-yLfk")!),Exercise(topic: "七分鐘運動Lesson6", intro: "重點練背肌", videophoto: "sevenMinExercise5.jpg" , videourl: URL(string:"https://youtu.be/ATVFe8z1N8A")!),Exercise(topic: "七分鐘運動Lesson7", intro: "重點鍊臀部", videophoto: "sevenMinExercise6.jpg" , videourl: URL(string:"https://youtu.be/LeGKguv1JaY")!),Exercise(topic: "七分鐘運動Lesson8", intro: "重點練腿部", videophoto: "sevenMinExercise7.jpg", videourl: URL(string:"https://youtu.be/37NplG7wY2A")!),Exercise(topic: "七分鐘運動Lesson9", intro: "重點練手臂", videophoto: "sevenMinExercise8.jpg",videourl: URL(string:"https://youtu.be/x4mCFpazHTA")!),Exercise(topic: "七分鐘運動Lesson10", intro: "加強練手臂", videophoto: "sevenMinExercise9.jpg",videourl: URL(string:"https://youtu.be/ux5M-2kxxb0")!)]override func viewDidLoad() {super.viewDidLoad()tableView.rowHeight = 180tableView.estimatedRowHeight = 0}// MARK: - Table view data source//設定Section的數量override func numberOfSections(in tableView: UITableView) -> Int {return 1}
//cell的數量等於array成員的數量
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {return exercisetopic.count}// Configure the cell...
//得到要顯示的Cell,設定Cell的內容
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {let cell = tableView.dequeueReusableCell(withIdentifier: "exerciseCell", for: indexPath) as! ExerciseTableViewCelllet athlete = exercisetopic[indexPath.row]cell.exerciseLabel.text = athlete.topiccell.exerciseIntro.text = athlete.introcell.exerciseImageView.image = UIImage(named: athlete.videophoto)return cell}//設定觸發cell後透過present開啟iOS SDK內建的SFSafariViewController播放Youtube影片override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {if let indexPath = self.tableView.indexPathForSelectedRow{let exercisevideo = exercisetopic[indexPath.row]let url = exercisevideo.videourllet safariVC = SFSafariViewController(url: url)present(safariVC, animated: true, completion: nil)}}}

參考文章:

如果有值得大家參考的地方再麻煩大家幫我拍拍手喲,謝謝大家耐心閱讀🙇‍♀️

--

--

Julia Wang
彼得潘的 Swift iOS / Flutter App 開發教室

Learning Programming , Hiking , Travels , Tour , Exploring nature 『你必須要很努力,才能看起來毫不費力』