最後一天要來使用自訂dialog,並使用NumberPicker來做到時間選擇的功能,通過自訂dialog將能依照需求來選擇內部元件。
首先在layout的部分與先前相同使用textview來做儲存與按鈕來顯示。
<?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來做時間選擇的功能。
<?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。
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) {
}
}