iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Mobile Development

Android Kotlin開發 -小嫩雞的30篇精選筆記系列 第 27

Android x Kotlin : 簡易實作第一堂-滾動式選單NumberPicker

簡介

滾動式選單依然是常用基本元件之一,使用起來也非常容易。直接上圖。
選項裡面可以放Int或String,方式不太一樣。先來看純數字的怎麼做。


資料來源:台灣漫畫基地

1.activity_main.xml

放入numberPicker元件,可以設定solidColor跟scrollbar等一些基本設定

    <NumberPicker
        android:id="@+id/num_year"
        android:layout_width="0dp"
        android:layout_height="144dp"
        android:solidColor="@color/colorFFFFFF"
        android:scrollbarSize="5dp"
        app:layout_constraintBottom_toTopOf="@id/btn_cancel_birth"
        app:layout_constraintEnd_toStartOf="@id/num_month"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="16dp" />
        
    <NumberPicker
        android:id="@+id/num_month"
        android:layout_width="0dp"
        android:layout_height="144dp"
        android:solidColor="@color/colorFFFFFF"
        app:layout_constraintBottom_toTopOf="@id/btn_cancel_birth"
        app:layout_constraintEnd_toStartOf="@id/num_day"
        app:layout_constraintStart_toEndOf="@id/num_year"
        android:layout_marginEnd="4dp"/>

    <NumberPicker
        android:id="@+id/num_day"
        android:layout_width="0dp"
        android:layout_height="144dp"
        android:solidColor="@color/colorFFFFFF"
        app:layout_constraintBottom_toTopOf="@id/btn_cancel_birth"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/num_month"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="4dp"/>

2.MainActivity.kt

設定每個選單的最大值與最小值,並用xxx.value(getValue)取得使用者選取的值。

        num_day.maxValue = 31
        num_day.minValue = 1
        num_month.maxValue = 12
        num_month.minValue = 1
        num_year.maxValue = 2020
        num_year.minValue = 1990
        
        println("${num_year.value}年${num_month.value}月${num_day.value}日")

Done.

那如果選單內容要放字串呢?


資料來源:台灣漫畫基地

1.activity_main.xml

<NumberPicker
        android:id="@+id/text_picker"
        android:layout_width="0dp"
        android:layout_height="144dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@color/colorFFFFFF"
        android:solidColor="@color/colorFFFFFF"
        app:layout_constraintBottom_toTopOf="@id/btn_cancel_txt_picker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

2.MainActivity.kt

我們把選項內容的字串放入一個array,並告知系統這個陣列的size為3(0~2)
取資料時,去拿displayedValues這個陣列中的索引值,來取得對應字串。

text_picker.maxValue = 2
text_picker.minValue = 0
text_picker.setDisplayedValues( arrayOf<String>("創作諮詢", "媒合諮詢", "其他服務"))

println(text_picker.displayedValues[text_picker.value].toString())

Done.

參考資料

【APP/Android】文字選擇器 - NumberPicker 的應用


上一篇
Android x Kotlin : 簡易實作第一堂-螢幕亮度調整
下一篇
Android x Kotlin : 展開式列表ExpandableListView用法
系列文
Android Kotlin開發 -小嫩雞的30篇精選筆記30

尚未有邦友留言

立即登入留言