在 Android 应用开发中，Material Design 是一种时下流行的设计风格。其中，时间选择器是应用中经常使用的界面组件之一。本文将介绍如何在 Android 应用开发中实现 Material Design 风格的时间选择器。
需求分析
在实现时间选择器之前，首先需要对需求进行分析。时间选择器需要支持以下功能：
- 显示当前日期和时间。
- 支持选择日期和时间。
- 时间选择器中的日期和时间需要根据系统本地化设置进行格式化。
- 点击“确定”按钮后，需要将选择的日期和时间返回给调用者。
实现步骤
根据需求分析，我们可以将时间选择器的实现分为以下几个步骤：
1. 创建布局文件
创建一个 XML 布局文件，用于显示时间选择器的各个部分，包括当前日期、时间选择器和“确定”、“取消”按钮等。
// javascriptcn.com 代码示例
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/picker_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:background="@android:color/white">
<TextView
android:id="@+id/current_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"/>
<TimePicker
android:id="@+id/time_picker"
android:layout_marginTop="16dp"
android:layout_below="@id/current_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/cancel_button"
android:layout_marginTop="16dp"
android:layout_below="@id/time_picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancel"/>
<Button
android:id="@+id/ok_button"
android:layout_marginTop="16dp"
android:layout_below="@id/time_picker"
android:layout_toRightOf="@id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok"/>
</RelativeLayout>2. 创建时间选择器类
创建一个继承自 DialogFragment 的时间选择器类，并实现 DialogFragment.OnCancelListener 和 DialogFragment.OnDismissListener 接口。
// javascriptcn.com 代码示例
public class TimePickerFragment extends DialogFragment
implements TimePickerDialog.OnTimeSetListener,
DialogFragment.OnCancelListener,
DialogFragment.OnDismissListener {
private static final String TAG = "TimePickerFragment";
private TimePickerDialog.OnTimeSetListener mListener;
public static TimePickerFragment newInstance() {
TimePickerFragment fragment = new TimePickerFragment();
return fragment;
}
public TimePickerFragment() {
// Required empty public constructor
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
try {
mListener = (TimePickerDialog.OnTimeSetListener) context;
} catch (ClassCastException e) {
throw new ClassCastException(context.toString()
+ " must implement OnTimeSetListener");
}
}
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Calendar calendar = Calendar.getInstance();
int hour = calendar.get(Calendar.HOUR_OF_DAY);
int minute = calendar.get(Calendar.MINUTE);
return new TimePickerDialog(getActivity(), this, hour, minute,
DateFormat.is24HourFormat(getActivity()));
}
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
if (mListener != null) {
mListener.onTimeSet(view, hourOfDay, minute);
}
}
@Override
public void onCancel(DialogInterface dialog) {
Log.d(TAG, "onCancel");
}
@Override
public void onDismiss(DialogInterface dialog) {
Log.d(TAG, "onDismiss");
}
}其中，onCreateDialog 方法用于创建时间选择器对话框，onTimeSet 方法用于获取用户选择的日期和时间。
3. 创建日期选择器类
创建一个继承自 DialogFragment 的日期选择器类，并实现 DatePickerDialog.OnDateSetListener、DialogFragment.OnCancelListener 和 DialogFragment.OnDismissListener 接口。
// javascriptcn.com 代码示例
public class DatePickerFragment extends DialogFragment
implements DatePickerDialog.OnDateSetListener,
DialogFragment.OnCancelListener,
DialogFragment.OnDismissListener {
private static final String TAG = "DatePickerFragment";
private TimePickerDialog.OnTimeSetListener mTimeListener;
public static DatePickerFragment newInstance() {
DatePickerFragment fragment = new DatePickerFragment();
return fragment;
}
public DatePickerFragment() {
// Required empty public constructor
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
try {
mTimeListener = (TimePickerDialog.OnTimeSetListener) context;
} catch (ClassCastException e) {
throw new ClassCastException(context.toString()
+ " must implement OnTimeSetListener");
}
}
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Calendar calendar = Calendar.getInstance();
int year = calendar.get(Calendar.YEAR);
int month = calendar.get(Calendar.MONTH);
int day = calendar.get(Calendar.DAY_OF_MONTH);
return new DatePickerDialog(getActivity(), this, year, month, day);
}
@Override
public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.YEAR, year);
calendar.set(Calendar.MONTH, month);
calendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);
showTimePickerDialog(calendar.getTime());
}
@Override
public void onCancel(DialogInterface dialog) {
Log.d(TAG, "onCancel");
}
@Override
public void onDismiss(DialogInterface dialog) {
Log.d(TAG, "onDismiss");
}
private void showTimePickerDialog(Date date) {
TimePickerFragment timePickerFragment = TimePickerFragment.newInstance();
timePickerFragment.setOnTimeSetListener(mTimeListener);
timePickerFragment.show(getFragmentManager(), "timePicker");
}
public void setOnTimeSetListener(TimePickerDialog.OnTimeSetListener listener) {
mTimeListener = listener;
}
}其中，onCreateDialog 方法用于创建日期选择器对话框，onDateSet 方法用于获取用户选择的日期，并弹出时间选择器对话框。
4. 在 MainActivity 中调用时间选择器
在 MainActivity 中，可以按照以下步骤调用时间选择器：
- 点击一个按钮，弹出日期选择器对话框。
- 用户选择日期后，弹出时间选择器对话框。
- 用户选择时间后，将选择的日期和时间信息返回给 MainActivity。
下面是 MainActivity 的示例代码：
// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity
implements TimePickerDialog.OnTimeSetListener {
private static final String TAG = "MainActivity";
private TextView mTextView;
private Button mButton;
private DatePickerFragment mDatePickerFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextView = (TextView) findViewById(R.id.text_view);
mButton = (Button) findViewById(R.id.button);
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDatePickerDialog();
}
});
}
private void showDatePickerDialog() {
mDatePickerFragment = DatePickerFragment.newInstance();
mDatePickerFragment.setOnTimeSetListener(this);
mDatePickerFragment.show(getFragmentManager(), "datePicker");
}
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.HOUR_OF_DAY, hourOfDay);
calendar.set(Calendar.MINUTE, minute);
SimpleDateFormat dateFormat = new SimpleDateFormat(
android.text.format.DateFormat.getBestDateTimePattern(
Locale.getDefault(), "EEE MMM dd yyyy hh:mm a"));
mTextView.setText(dateFormat.format(calendar.getTime()));
}
}总结
在本文中，我们介绍了如何在 Android 应用中实现 Material Design 风格的时间选择器。具体实现包括创建布局文件、创建时间选择器类、创建日期选择器类和在 MainActivity 中调用时间选择器。这些技术在 Android 应用开发中经常使用，能够帮助开发人员实现更加优雅和美观的界面效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530c1347d4982a6eb250616