2020-11-13|閱讀時間 ‧ 約 3 分鐘

研究各種 UI 元件:原來不用寫程式,就能做那麼多事!

    目的:研究各種UI元件

    amp-img-attr
    1. segmented control: 可設定選項讓使用者做選擇,其中幾項可以注意:

    Segments: 可設定要幾種選擇欄位。

    Segment:可選擇哪一個欄位的內容要做更動,包括標題,圖片等等。

    Title: 可輸入更改欄位的文字內容。

    Image:可設定欄位的圖片。

    Selected: 可設定初始欄位為哪一欄。

    2. slider: 可用來設定特定部分的量值,如音量、螢幕亮度等等...。

    Value:可調整初始值的位置。

    Minimum:可設定最小值為多少。

    Maximum:可設定最大值為多少。

    Min Image:顯示最小值的圖片。

    Max Image:顯示最大值的圖片。

    Min Track : 較小值線條的顏色。

    Max Track:較大值線條的顏色。

    Thumb Tint:調整大小鈕的顏色。

    3. switch : 作為開關使用,可打開或關閉特定功能,如鬧鐘。

    State:設定狀態要關或者打開。

    On Tint:打開時的顏色為何。

    Thumb Tint:按鈕的顏色。

    4. Activity Indicator View: 當準備執行某項功能時,會出現的等待圖案。

    Style: 可調整大小。

    color: 可調整圖案顏色。

    Animating: 是否執行旋轉的動畫。

    5. Progress View: 進度條的概念。

    Style:可調整進度條的粗度。
    Progress:調整進度條的初始值。

    Progress Tint:調整進度條已經完成的顏色。
    Track Tint:調整進度條未完成的顏色。

    Progress Image:可將進度條設定為特定圖片進度條,改變進度條的樣式。
    Track Image:可將進度條未完成部分設定為特定圖片進度條,改變進度條的樣式。

    6. Visual Effect View with Blur: 讓背景模糊化的功能,類似毛玻璃。

    Blur Style:可設定其模糊化的顏色及透明度和模糊程度。

    7. Page control: 設定分頁下方的點點,可從此得知所在第幾個分頁。

    # of Pages:可設定點點數。
    Current:初始值的頁數。
    Hides for Single Page: 當只有一頁時隱藏。
    Tint Color:點點的顏色。
    Current Page:所選頁面點點的顏色。

    8. Date picker: 可選擇時間的元件。

    Style:可設定日曆樣式。
    Mode :可設定時間的單位。
    3 Locale:選擇時間的語言。
    4 Interval:可調整的間隔時間。
    5 Date:選擇起始時間點。
    6 Minimum Date:最早可選時間。
    7 Maximum Date最晚可選時間。

    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.