#HW2–1:Make friend with component.

Emily
彼得潘的 Swift iOS / Flutter App 開發教室
4 min readJul 11, 2021

Segmented Control、Slider、Switch、Activity Indicator View、Progress View、Date Picker、Page Control、Visual Effect View with Blur

Segmented Control:切換分類的元件

研究欄位

  1. segments 幾個項次
  2. segment 指定項次
  3. Title 指定項次標題
  4. Image 指定項次圖示
  5. Selected (behavior才是選擇)

[注意]單項title/imgae只能二選一

Q:image用途&清除如何清掉A:直接刪掉文字
Q:behavior:selected state:selected差別

舉一反三使用區:
檔案分類名稱

Slider:滑動設定數值的元件

研究欄位

  1. value 所處數值
  2. Minimum 最小值
  3. Maximum 最大值
  4. Min Image 最小圖示
  5. Max Image 最大圖示
  6. Min Track最小底色
  7. Max Track最大底色
  8. Thumb Tint 豆豆顏色

舉一反三使用區:
銳利化程度
圖片大小縮放、左轉右轉(搭配程式控制)

Switch:開關

研究欄位

  1. state 0 or 1
  2. on Tint 元件底色
  3. Thumb Tint 豆豆顏色

舉一反三使用區:
切換功能(T/F架構都可用)

Activity Indicator View:代表正在做某件事的進度條

研究欄位

  1. style
  2. color 顏色選擇
  3. animating
    a boolean value indication whether the activity indicator is currently running its animation.

舉一反三使用區:
過場動畫

Progress View:顯示進度的進度條

研究欄位

  1. style 圓弧進度條/直方進度條
  2. progress
  3. progress Tint 進度顏色
  4. track tint 長度顏色 progress image ??
  5. track image??

Q:能不能遷入圖片在進度條頂端
舉一反三使用區:
讀書章節進度

Visual Effect View with Blur:毛玻璃效果。

研究欄位
Blur Style

以段落文字來說 可以一片就達到多區域關鍵字隱藏/清晰
或是需要以放置多個項目進行位置遮蔽?
舉一反三使用區:
語言練習
背誦練習

Page Control:小圓點,顯示有幾個分頁和目前在第幾個分頁。

研究欄位

  1. #of pages 總共會有幾個頁面
  2. current 現在在第幾頁
  3. hides for single page
  4. tint color
  5. current page

舉一反三使用區:

Date Picker:時間選擇的元件。

  1. style 日曆/轉盤樣式/輸入樣式
  2. mode 格式
  3. locale 當地時間
  4. interval 時間間隔
  5. date 當地日期
  6. minimum date 起始日期
  7. maximum date 最遠日期

舉一反三使用區:
1.時間選擇(沒有反三項…)

--

--

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

一點點一滴滴累積下將會有陽光♡ 一起找到自己怦然的事物吧 ✧( •˓◞•̀ ) #每週日16:00、週二20:00更新 #每一步都走在進步的路途