iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
0
自我挑戰組

Android的學習歷程系列 第 30

[Day 30]Android-NumberPicker與自訂dialog

  • 分享至 

  • twitterImage
  •  

最後一天要來使用自訂dialog,並使用NumberPicker來做到時間選擇的功能,通過自訂dialog將能依照需求來選擇內部元件。

首先在layout的部分與先前相同使用textview來做儲存與按鈕來顯示。

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
    android:textSize="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:text="NumberPicker"
    />

<TextView
    android:id="@+id/my_clock"
    android:layout_marginTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/select"
    android:text="選擇時間"
    android:layout_marginTop="25dp"
    android:layout_width="150dp"
    android:layout_height="50dp" />

</LinearLayout>

下面是自訂dialog的畫面,裡面放入了三個numberpicker來做時間選擇的功能。

dialog

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <NumberPicker
        android:id="@+id/hour_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:layout_toStartOf="@id/min_picker"
        android:layout_toLeftOf="@id/min_picker" />

    <NumberPicker
        android:id="@+id/min_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="25dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="25dp" />

    <NumberPicker
        android:id="@+id/sec_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:layout_toEndOf="@id/min_picker"
        android:layout_toRightOf="@id/min_picker" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/min_picker"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:layout_toEndOf="@id/center_dot"
        android:layout_toRightOf="@id/center_dot"
        android:text="取消" />

    <TextView
        android:id="@+id/center_dot"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_below="@id/min_picker"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="75dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/min_picker"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:layout_toStartOf="@id/center_dot"
        android:layout_toLeftOf="@id/center_dot"
        android:text="確定" />

</RelativeLayout>

最後是MainActivity的部分通過selectTime來叫出dialog的畫面在按下確定按鍵後依照選擇內容來將資料儲存在textView中,使用dismiss()便能在選擇後或是取消按鍵關閉dialog。

MainActivity

public class MainActivity extends AppCompatActivity  implements NumberPicker.OnValueChangeListener {
    private TextView textView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.my_clock);
        Button button = findViewById(R.id.select);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectTime();
            }
        });
    }

    public void selectTime() {
        final Dialog dialog = new Dialog(MainActivity.this);
        dialog.setContentView(R.layout.dialog);
        Button setBtn = dialog.findViewById(R.id.button1);
        Button cancelBtn = dialog.findViewById(R.id.button2);
        final NumberPicker hourPicker = dialog.findViewById(R.id.hour_picker);
        hourPicker.setMaxValue(23);
        hourPicker.setMinValue(1);
        hourPicker.setWrapSelectorWheel(false);
        hourPicker.setOnValueChangedListener(this);

        final NumberPicker minPicker = dialog.findViewById(R.id.min_picker);
        minPicker.setMaxValue(59);
        minPicker.setMinValue(0);
        minPicker.setWrapSelectorWheel(false);
        minPicker.setOnValueChangedListener(this);

        final NumberPicker secPicker = dialog.findViewById(R.id.sec_picker);
        secPicker.setMaxValue(59);
        secPicker.setMinValue(0);
        secPicker.setWrapSelectorWheel(false);
        secPicker.setOnValueChangedListener(this);
        setBtn.setOnClickListener(new View.OnClickListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onClick(View v) {
                textView.setText(hourPicker.getValue() + ":" + minPicker.getValue() + ":" + secPicker.getValue());
                dialog.dismiss();
            }
        });
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
        dialog.show();
    }

    @Override
    public void onValueChange(NumberPicker numberPicker, int i, int i1) {

    }
}

上一篇
[Day 29]Android-TimePickerDialog的使用
系列文
Android的學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言