(GO). NET programmer moved to Android third---login module static login

This article I will be divided into 2 parts record login interface, the first part is static login,

This part will be how to from the interface layout, control use, file relations, data validation, landing implementation, such as 5 small pieces of records.

The second part is the dynamic login, this block will be based on the above 4 small pieces, in the data validation is not static data,

But through the Webservice to obtain network data, and then parse the network data, verify the successful file association, and then the page jump, and finally realize automatic landing;

Demand analysis

See, for a programmer, whether you are doing android\.net\ios, if you want to do the effect,

Everyone will understand where to start.

1: Interface layout (divided into 3 blocks, top title bar, form submission block, bottom action block).

2: Control use (this looks at the project needs, this interface mainly uses 4 kinds of controls, button, check box (checkbox), text box (EditText), text (TextView)).

3: Functional Requirements (a static login page, we need it to achieve these functions, input authentication, data validation, remember password, automatic login).

Well, when the specific layout of the page to the implementation of the function is clear, then let's do it.

PS: Because design this interface need to add some pictures, so must note a few things: Picture name can not have capital letters, picture copy to the following path:

Interface layout

If you are not clear about the Android layout of friends, you can spend 10 minutes to read this article. http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

I personally prefer linearlayout (linear layout), open the design page, and switch to the code module. The item will be found for us to initialize the use of relative layout (relativelayout).

But we do not need it, instead as follows:

1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2     android:layout_width= "Match_ Parent "3     android:layout_height=" match_parent "4     android:orientation=" vertical "5     android:background= "#FFFFFF" >    6     <!--code decomposition: android:orientation= "vertical" setting this container is single-column mode--7 8 </LinearLayout>

After the mend. My page is a blank white paper, I started from the top of the design, in order to make the entire page look layered.

I want the hierarchy to have a parent layer outside, nested 3 layers, each representing (title layer, form layer, bottom layer)

 1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2 android:layout_width= "match_parent     "3 android:layout_height=" match_parent "4 android:orientation=" vertical "5 android:background=" #FFFFFF "> 6 <!--code decomposition: android:orientation= "vertical" set this container to single-column mode--7 8 <!--title block start--9 <linear Layout Ten android:layout_width= "fill_parent" one android:layout_height= "Wrap_content" android:background= "@dr     Awable/bg_titlebar ">13 <!--code decomposition: android:background=" @drawable/bg_titlebar "set the background picture for this container--14 15 &LT;TEXTVIEW16 android:layout_gravity= "center" android:gravity= "Center_horizontal" android:textcolor= "#f Fffff "android:textsize=" 20sp "android:layout_width=" fill_parent "android:layout_height=" Wrap_content " android:text= "@string/app_login"/>23 <!--code decomposition: android:layout_gravity= "center" sub-container vertically centered in parent container-->24 &L t;! --Code decomposition: android:gravity= "Center_horizontal "TextView inside the content center display-->25 <!--code decomposition: android:textcolor=" #ffffff "TextView control the color of the content-->26 </ Linearlayout>27 <!--title block ends--</LinearLayout>

Run it and see how it works.

It feels good to continue designing the form submission block.

To make the entire page feel layered, I will continue to wrap it with a layer and continue to use linear.

 1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2 android:layout_width= "match_parent     "3 android:layout_height=" match_parent "4 android:orientation=" vertical "5 android:background=" #FFFFFF "> 6 <!--code decomposition: android:orientation= "vertical" set this container to single-column mode--7 8 <!--title block start--9 <linear Layout Ten android:layout_width= "fill_parent" one android:layout_height= "Wrap_content" android:background= "@dr     Awable/bg_titlebar ">13 <!--code decomposition: android:background=" @drawable/bg_titlebar "set the background picture for this container--14 15 &LT;TEXTVIEW16 android:layout_gravity= "center" android:gravity= "Center_horizontal" android:textcolor= "#f Fffff "android:textsize=" 20sp "android:layout_width=" fill_parent "android:layout_height=" Wrap_content " android:text= "@string/app_login"/>23 <!--code decomposition: android:layout_gravity= "center" sub-container vertically centered in parent container-->24 &L t;! --Code decomposition: android:gravity= "Center_horizontal "TextView inside the content center display-->25 <!--code decomposition: android:textcolor=" #ffffff "TextView control the color of the content-->26 </ Linearlayout>27 <!--title block ends--<!--form block starts-->30 <linearlayout Android:orienta tion= "Vertical", android:padding= "20sp" android:layout_width= "fill_parent, android:layout_height=" Wra P_content ">35 <!--code decomposition: android:padding=" 10SP "in order not to let the layer and layer less compact, let it inside the child elements are distance it 20sp-->36 <!--code decomposition: Android:o rientation= "Vertical" This single-column mode is complete, the container nested inside it is a control to occupy the entire line-->37 <edittext39 android:id= "@+id/edit_usern      Ame "android:hint=" @string/edit_username "android:layout_width=" Fill_parent "android:singleline=" true "43 android:layout_height= "Wrap_content" >44 </edittext>45 <!--code decomposition: android:id= "@+id/edit_username" to the control Set an ID, because we need to find it based on the ID and get its value-->46 <!--code decomposition: android:hint= "@string/edit_username" lets the control display the data by default, but when the mouse clicks on the control, The default data is emptied-->47 <!--code decomposition: AndroId:singleline= "true" to make the control not automatically wrap-<edittext50 android:id= "@+id/edit_userpassword" android:in Puttype= "Textpassword" android:layout_width= "fill_parent" android:layout_margintop= "10SP" android:layout _height= "Wrap_content" android:singleline= "true" android:hint= "@string/edit_password" >57 </edittext >58 <!--code decomposition: android:inputtype= "Textpassword" because it is a password box, here I use this for the password box, there are more to refer to official documents---------------The code decomposition: Android : layout_margintop= "10SP" for the sake of beauty, distance from my last element 10sp---<!--text box is defined, a check box and button is not available, but my form module has a single-column mode. I don't want a tick. The box occupies a row, and the button takes up a line of 63, so we have to set a container to load 2 controls inside. -<linearlayout android:orientation= "Horizontal" android:padding= "20SP" Andro Id:layout_width= "Fill_parent" android:layout_height= "Wrap_content" >70 <!--code decomposition: android:orientation= "Hori Zontal "Just now we explained the single-column pattern, which is that the individual controls occupy the width of the entire row. 71 This is the multi-column pattern, where the child elements in it can display multiple controls on one line-->72 73    <checkbox74 android:id= "@+id/checkbox_state" android:layout_width= "Fill_parent" Android : layout_height= "Wrap_content" android:layout_weight= "1" >78 </checkbox>79 <!--code decomposition: Android:la yout_weight= "1" Set the weight, the container inside if the 2 controls, each set to 1,80 that is 50 of the width of each---eight <button83 android:id= "@+i D/button_ok "android:layout_width=" fill_parent "android:layout_height=" Wrap_content "Android : layout_weight= "1" android:background= "@drawable/btn_android_login" android:textsize= "18SP" >89 & Lt;/button>90 </linearlayout>91 </linearlayout>92 <!--form Block End-->93 94 </lin Earlayout>

Look at the preview effect.

Let's stop here and look back at the controls I just mentioned, the biggest hurdle for. NET programmers is not programming languages.

C # and Java too much similar, basically Java code also understand, if you do Android, we need to understand the first step is to control the use.

The best way to remember controls is to compare your previous design interface controls with Android controls.

For example: TextView, we regard him as the lable of HTML. The main use is to display text.

EditText, like the HTML textbox, is used to provide input.

button, which is the same as the HTML button.

PS: For the above controls, you have time to take a look at the other properties of them.

As for the bottom I will not record. You can play according to your own needs freely.

File relationships

After the interface design is complete, we are going to implement the login function and look at this class:

Why? What does he have to do with Activity_main.xml? Is it that creating a activity_main.xml system automatically creates a corresponding. java file?

If not, after that we add an XML page, how do I let it associate a. java file?

Even if you want to associate? So where are we going to associate? How does it relate?

These doubts are not resolved. That's for us. is a very big disturbance;

Preview Large Image

Very good, already know how to prepare the start page of the project;

But think or not, even if the activity is configured, what does it have to do with my interface?

Because we start the program presented to us is the interface, not a bunch of class, text, code;

With this question, open the Mainactivity.java file and see what it does.

Preview Large Image

Hurriedly tidy up the overall idea, in fact, Android development, first we face should be in the Androidmanifest.xml configuration, and then in the activity class, and finally the XML design page.

Now that the relationship between the XML design page and the activity class is clear, implement the login function.

The implementation idea is as follows:

Get the value of the text box--Validate data--to determine if the tick box is checked--tips

function implementation

 1 package com.example.my_login; 2 3 Import Android.os.Bundle; 4 Import android.app.Activity; 5 Import Android.content.Context; 6 Import android.content.SharedPreferences; 7 Import Android.content.SharedPreferences.Editor; 8 Import Android.view.Menu; 9 Import android.view.view;10 Import android.widget.button;11 import android.widget.checkbox;12 Import ANDROID.WIDGET.EDITTEXT;13 Import android.widget.toast;14 public class Mainactivity extends Activity {private Editt Ext UserName, password;//defines 2 edittext objects. Private checkbox rem_pw;//Defining a CheckBox Object-private Button button_ok;//definition B                                         Utton Object Sharedpreferences Sp;/*sharedpreferences is a lightweight data storage method, which is essentially based on XML file storage Key-value key value pair data, 19 Usually used to store some simple configuration information we use it to remember the account and password */20 @Override22 protected void onCreate (Bundle savedi         Nstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); 25 SP = this.getsharedpreferences ("UseRinfo ", mode_private);//The first parameter is customized, the second one is open, and the PRIVATE method is generally chosen. REM_PW = (CheckBox) Findviewbyid (r.id.checkbox_state);         /based on the previous set ID, get the CheckBox object on the page, point to my current class definition of CheckBox27 UserName = (EditText) Findviewbyid (r.id.edit_username);//Ibid. 28 Password = (EditText) Findviewbyid (R.id.edit_userpassword);//Ibid. BUTTON_OK = (button) Findviewbyid (R.id.butto             N_OK);//Ibid. 30 31//Login button Event Button_ok.setonclicklistener (new View.onclicklistener () {33                 public void OnClick (View v) 34 {35//Click the login button, we first want to determine whether to enter a value, do not prompt the user, or sign in. 36 Username.gettext () so that you can get the value of the text box, append. toString () to make it appear as a string. Trim () Remove the blank if (Username.gettext (). Tostri Ng (). Trim (). Equals ("") &&password.gettext (). toString (). Trim (). Equals ("")) {showtoast ("Please enter account and secret Code: "); }else{40 if (Username.gettext (). toString (). Trim (). Equals ("sa") &&password.get Text (). toString ().Trim (). Equals ("123")) {41//Determine if the Remember password is checked (rem_pw.ischecked ()) {43                               Remember user name, password, and editor editor = Sp.edit (); 45 Editor.putstring () 2 parameters are key-value pairs, the first one is the corresponding key, followed by the value, editor.putstring ("user_name", Username.gett Ext (). ToString (). Trim ()), editor.putstring ("PASSWORD", Password.gettext (). ToString (). Trim ()                               ); Editor.commit (); 49//Detect if the password remembers success 50 Showtoast ("Login Successful:                              Your account is: "+sp.getstring (" user_name "," ") +", Password is: "+sp.getstring (" PASSWORD "," ""), and}else{52                             Showtoast ("Login successful, you do not choose to remember Password"); 53}54 55 }else{57 Showtoast ("you entered the account or password error, please re-enter:"); 58}59                }60} 61}) 62}63 64//hint class private void Showtoast (Charsequence msg {Toast.maketext (this, MSG, Toast.length_short). Show ();}68 @Override70         Createoptionsmenu (Menu menu) {Inflate the menu; This adds items to the action bar if it is present.72 Getmenuinflater (). Inflate (R.menu.main, menu); return true;74}75}

Final execution:

Code sample Download

Click here to download

Postscript

OK, this article will be Android from the login interface design to the Midway derivative configuration, Activity (. java), XML, and other files of the association, and finally to the implementation of the function.

The record is still a delicate note, but by the ability to express words, has not been able to easily understand the record. will try to improve in the future.

Next I will continue to record "login page", but is no longer static, but the dynamic " login page ";

If it is not right, we can say that we can learn from each other. If you want to discuss in real time, add the QQ group I created: