Android UI components-DatePicker, TimePicker, and androidui Components

Android UI components-DatePicker, TimePicker, and androidui Components

I have been reading various technical blogs on the blog Park and csdn. I can't help but start to write my own blog and hope to grow together. I will put my learning process into my blog, at the same time, I prefer to post the errors I encountered. You are also welcome to guide and correct your website. We hope that you can continue to write your own blog.

Not to mention nonsense, go to the topic and recently learn about android development. The most important thing for development of these interfaces is the use of a bunch of controls. DatePicker and TimePicker are available today. Now that you want to learn, you need learning materials. The most natural idea of encountering a new thing is to search for it. There are also a lot of online articles. With the help of the materials, you can start the design. For the Date and Time Selection control, the most common one is to obtain the selection result. So a demo function came out:

1. Start the program and enter the main interface. When you see a simple layout, you are prompted to select the start time and end time.

2. The onTouch event is triggered when you touch EditText. Datepicker dialog is displayed.

3. Select and confirm the date and time.

4. The result is returned to EditText.

With the procedure, we will design the interface. The layout file of activity_main.xml on the main interface is as follows:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="fill_parent" 4     android:layout_height="fill_parent" 5     android:orientation="vertical" 6     android:padding="10dip" 7     tools:context=".MainActivity" > 8     <RelativeLayout  9         android:layout_width="fill_parent"10         android:layout_height="wrap_content">11         <TextView12           android:id="@+id/startTextView"13             android:layout_width="wrap_content"14             android:layout_height="wrap_content"15             android:gravity="center_vertical"16             android:text="@string/start" />17         <EditText18               android:id="@+id/startEditText"  19             android:layout_width="fill_parent"20             android:layout_height="wrap_content"21             android:singleLine="true"22             android:layout_toRightOf="@id/startTextView"/>23     </RelativeLayout>24     <RelativeLayout 25         android:layout_width="fill_parent"26         android:layout_height="wrap_content">27         <TextView28           android:id="@+id/endTextView"29             android:layout_width="wrap_content"30             android:layout_height="wrap_content"31             android:gravity="center_vertical"32             android:text="@string/end" />33         <EditText34               android:id="@+id/endEditText"  35             android:layout_width="fill_parent"36             android:layout_height="wrap_content"37             android:singleLine="true"38             android:layout_toRightOf="@id/endTextView"/>39     </RelativeLayout>40 </LinearLayout>

The interface effect is as follows:

 

Next, datepicker dialog's view layout datepicker. xml:

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="fill_parent" 4     android:layout_height="fill_parent" 5     android:orientation="vertical"  6     android:scrollbars="vertical"> 7     <TextView  8         android:layout_width="wrap_content" 9         android:layout_height="wrap_content"10         android:textSize="16sp"11         android:text="@string/datepicker"/>12     <DatePicker 13         android:id="@+id/myDatePicker"14         android:layout_width="fill_parent"15         android:layout_height="wrap_content"16         android:layout_marginTop="5dip"/>17      <TextView 18         android:layout_width="wrap_content"19         android:layout_height="wrap_content"20         android:textSize="16sp"21         android:text="@string/timepicker"/>22      <TimePicker 23         android:id="@+id/myTimePicker" 24         android:layout_width="fill_parent" 25         android:layout_height="wrap_content" 26         android:layout_marginTop="5dip" /> 27 28 </LinearLayout>

The interface effect is as follows:

This effect shocked me. Why. Forget it. Wait until you run it. Now that all layout files are available, it is necessary to start the functional part of the program.

1 package com. example. datepickertest; 2 3 import java. util. calendar; 4 5 import android. app. activity; 6 import android. app. alertDialog; 7 import android. content. dialogInterface; 8 import android. OS. bundle; 9 import android. text. inputType; 10 import android. view. menu; 11 import android. view. motionEvent; 12 import android. view. view; 13 import android. widget. datePicker; 14 import android. widget. editTe Xt; 15 import android. widget. timePicker; 16 17 public class MainActivity extends Activity {18 // define control variable 19 private EditText startEdit, endEdit; 20 @ Override 21 protected void onCreate (Bundle savedInstanceState) {22 super. onCreate (savedInstanceState); 23 setContentView (R. layout. activity_main); 24 startEdit = (EditText) findViewById (R. id. startEditText); 25 endEdit = (EditText) findViewById (R. id. endE DitText); 26 startEdit. setOnTouchListener (new MyTouchListener (); 27 endEdit. setOnTouchListener (new MyTouchListener (); 28} 29 class MyTouchListener implements View. onTouchListener {30 @ Override 31 public boolean onTouch (View v, MotionEvent event) {32 // TODO Auto-generated method stub 33 if (event. getAction () = MotionEvent. ACTION_DOWN) {34 AlertDialog. builder builder = new AlertDialog. builder (M AinActivity. this); 35 View view = View. inflate (MainActivity. this, R. layout. datepicker, null); 36 // get datepicker and timepicker. Pay attention to this. 37 // if you use datepicker = (DatePicker) findViewById (R. id. myDatePicker); or 38 // datepicker = (DatePicker) this. findViewById (R. id. myDatePicker); to get control 39 // a null pointer exception will occur, because the current this refers to the instance of MyTouchListener. So here we use view to obtain the 40 final DatePicker datepicker = (DatePicker) view of the control. findViewById (R. id. myDatePicker); 41 final TimePicker timepicker = (TimePicker) view. findViewById (R. id. myTimePicker); 42 // layout file 43 builder in the Setting dialog box. setView (view); 44 // obtain the Calendar instance to initialize datepicker and set the initial value of timepicker to 45. getInstance (); 46 cal. setTimeInMillis (System. currentTimeMillis (); 47 datepicker. init (cal. get (Calendar. YEAR), cal. get (Calendar. MONTH), 48 cal. get (Calendar. DAY_OF_MONTH), null); 49 timepicker. setIs24HourView (true); 50 timepicker. setCurrentHour (cal. get (Calendar. HOUR_OF_DAY); 51 timepicker. setCurrentMinute (cal. get (Calendar. MINUTE); 52 // judge the event object 53 if (v. getId () = R. id. startEditText) {54 final int inType = startEdit. getInputType (); 55 startEdit. setInputType (InputType. TYPE_NULL); 56 startEdit. onTouchEvent (event); 57 startEdit. setInputType (inType); 58 // set the dialog box property 59 builder. setTitle (R. string. starttitle); 60 builder. setPositiveButton ("OK", new DialogInterface. onClickListener () 61 {62 63 @ Override 64 public void onClick (DialogInterface dialog, int which) {65 // TODO Auto-generated method stub 66 StringBuffer sb = new StringBuffer (); 67 sb. append (String. format ("% d-% 02d-% 02d", 68 datepicker. getYear (), 69 datepicker. getMonth () + 1, 70 datepicker. getDayOfMonth (); 71 sb. append (""); 72 sb. append (timepicker. getCurrentHour () 73. append (":") 74. append (timepicker. getCurrentMinute (); 75 startEdit. setText (sb); 76 dialog. cancel (); 77} 78} 79); 80} 81 if (v. getId () = R. id. endEditText) {82 final int inType = endEdit. getInputType (); 83 endEdit. setInputType (InputType. TYPE_NULL); 84 endEdit. onTouchEvent (event); 85 endEdit. setInputType (inType); 86 // set the dialog box property 87 builder. setTitle (R. string. endtitle); 88 builder. setPositiveButton ("OK", new DialogInterface. onClickListener () 89 {90 91 @ Override 92 public void onClick (DialogInterface diich, int which) {93 // TODO Auto-generated method stub 94 StringBuffer sb = new StringBuffer (); 95 sb. append (String. format ("% d-% 02d-% 02d", 96 datepicker. getYear (), 97 datepicker. getMonth () + 1, 98 datepicker. getDayOfMonth (); 99 sb. append (""); 100 sb. append (timepicker. getCurrentHour () 101. append (":"). append (timepicker. getCurrentMinute (); 102 endEdit. setText (sb); 103 dialog. cancel (); 104} 105} 106); 107} 108 // create a dialog box with 109 AlertDialog dialog = builder displayed. create (); 110 dialog. show (); 111} 112 return true; 113} 114 115} 116 @ Override117 public boolean onCreateOptionsMenu (Menu menu) {118 // Inflate the menu; this adds items to the action bar if it is present.119 getMenuInflater (). inflate (R. menu. main, menu); 120 return true; 121} 122 123}

Next, run the program: the interface is ugly.

I can't even see the time. How can I choose. The calendar above is also big. Since the appearance is involved, you may find some shadows in the XML file. I tried to find it in the XML file, but after reading the numerous attributes, I was wondering when to find it. Think of the attributes that android usually shows in XML, there will be similar set and get methods. Then, read the SDK documentation and find the functions starting with set. It was very soon located on setCalendarViewShown. After reading the introduction, I feel that experiment is the standard for testing truth. Therefore, add a line of code to the program.

1 // obtain the Calendar instance to initialize datepicker and set the initial value of timepicker. 2. Calendar cal = Calendar. getInstance (); 3 cal. setTimeInMillis (System. currentTimeMillis (); 4 datepicker. setCalendarViewShown (false); 5 datepicker. init (cal. get (Calendar. YEAR), cal. get (Calendar. MONTH), 6 cal. get (Calendar. DAY_OF_MONTH), null );

Run the program. The interface is instantly different.

Then we tried to find that the program works as normally as we thought. But is it all done here? In turn, let's think about whether there is a set method to set this attribute. We once again come to the XML file, and this time we have a goal. The attribute may contain the words "CalendarViewShown". Soon we found that this attribute exists. Immediately, set it to false and delete the previous code. The program is still running normally. Therefore, this attribute is correct. It seems that we should go to bed here, but the person who is careful has found that there is something strange in the code above. We can see that this getMonth () is added with 1 after the return, then we will remove this plus 1 and run the program again to find that the displayed month is smaller than the selected month. If we deal with the program every day, we will immediately respond to it: "is the month counted from 0? ", It's still an old routine. If you encounter a strange problem, you can ask the SDK. However, we find that the getmonth function has only one sentence to explain and returns the selected month. So let's look at it, the constant field of the Calendar Ar is suddenly found. It was found that it started from 0:

Public static final int JANUARY

Added in API level 1
Value of the MONTH field indicating the first month of the year.

Constant Value: 0 (0x00000000 ). In this case, we also set the month in turn. When we use the function, the corresponding parameter is 8, which is actually 9. So pay attention to the processing of parameters in the program. Let's write it here today. It's time to go to bed.

　　

1 sb.append(String.format("%d-%02d-%02d",2                                     datepicker.getYear(),3                                     datepicker.getMonth()+1,4                                     datepicker.getDayOfMonth()));