[Android] Chapter 5 (2) Buttons and text boxes

Category: C#, Android, VS2015; Creation date: 2016-02-07 1. Introduction 1. Button is a regular button. 2. TextView text view, its function is similar to WPF's TextBlock control. The three components provided in [Toolbox] are actually the same TextView control with different attributes to distinguish them. These three different attributes are in [Toolbox] 】corresponds to

Category: C#, Android, VS2015;

Creation date: 2016-02-07

1. Introduction

1. Button

Regular button.

2. TextView

Text view, its function is similar to WPF's TextBlock control. The three components provided in [Toolbox] are actually the same TextView control with different attributes to distinguish them. These three different attributes are in [Toolbox] 】The corresponding names are as follows:

• Text(Large): TextView with large font
• Text(Medium): TextView with medium font
• Text(small): TextView with small font

3. EditText

Text box, its function is similar to that of WinForm's TextBox. The only difference is that WinForm's TextBox has only one in the [Toolbox], and then it is set by properties whether it is normal text or password input; Android's EditText is actually set by properties. Differentiate between ordinary text and password input, but they are provided in the form of components in the toolbox. The corresponding names of these two different attributes in the [Toolbox] are as follows:

• PlainText: Regular EditText
• PassWord: EditText for password input

2. Example 1—Demo1EditText

This example demonstrates how to function:

• As you enter information in a text box, immediately display the characters you type in another text box.
• Basic usage of Toast.
• Basic usage of regular text box and password input text box.

1. Running screenshots

2. Main design steps

(1) Add demo01_EditTextaxml file

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" encoding="utf-8"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #800000;">LinearLayout </span><span style="color: #ff0000;">xmlns:android</span><span style="color: #0000ff;">="http://schemas.android.com/apk/res/android"</span><span style="color: #ff0000;">
    android:orientation</span><span style="color: #0000ff;">="vertical"</span><span style="color: #ff0000;">
    android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
    android:layout_height</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">TextView
      </span><span style="color: #ff0000;">android:text</span><span style="color: #0000ff;">="文本框基本用法"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/textView1"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">EditText
      </span><span style="color: #ff0000;">android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/editText1"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">EditText
      </span><span style="color: #ff0000;">android:inputType</span><span style="color: #0000ff;">="textPassword"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/editText2"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">TextView
      </span><span style="color: #ff0000;">android:text</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/txtResult"</span><span style="color: #ff0000;">
      android:gravity</span><span style="color: #0000ff;">="center_horizontal"</span><span style="color: #ff0000;">
      android:layout_marginTop</span><span style="color: #0000ff;">="20dp"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">LinearLayout</span><span style="color: #0000ff;">></span></span></span></span></span></span>

(2) Add the Demo01EditText.cs file

First add a SrcActivity folder in the project root directory, and then add .cs files under the folder. The selected templates for these files are [Activity].

<span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.App;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.OS;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.Widget;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.Graphics;
</span><span style="color: #0000ff;">namespace</span><span style="color: #000000;"> ch05demos.SrcActivity
{
    [Activity(Label </span>= <span style="color: #800000;">"</span><span style="color: #800000;">TextBoxDemo</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span><span style="color: #000000;"> Demo01EditText : Activity
    {
        </span><span style="color: #0000ff;">PRotected</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> OnCreate(Bundle savedInstanceState)
        {
            </span><span style="color: #0000ff;">base</span><span style="color: #000000;">.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.demo01_EditText);

            </span><span style="color: #0000ff;">var</span> txtResult = FindViewById<textview><span style="color: #000000;">(Resource.Id.txtResult);
            txtResult.SetTextColor(Color.Red);
            txtResult.Enabled </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;

            </span><span style="color: #0000ff;">var</span> txt1 = FindViewById<edittext><span style="color: #000000;">(Resource.Id.editText1);
            txt1.TextChanged </span>+= (s, e) =><span style="color: #000000;">
            {
                txtResult.Text </span>= <span style="color: #800000;">"</span><span style="color: #800000;">输入的内容为：</span><span style="color: #800000;">"</span> +<span style="color: #000000;"> txt1.Text;
            };

            </span><span style="color: #0000ff;">var</span> txt2 = FindViewById<edittext><span style="color: #000000;">(Resource.Id.editText2);
            txt2.TextChanged </span>+= (s, e) =><span style="color: #000000;">
            {
                txtResult.Text </span>= <span style="color: #800000;">"</span><span style="color: #800000;">输入的内容为：</span><span style="color: #800000;">"</span> +<span style="color: #000000;"> txt2.Text;
            };
        }
    }
}</span></edittext></edittext></textview>

Run it and you will get the result shown in the screenshot.

If you want to immediately determine which character is typed during text input, you can use the following event to achieve this (when testing with the simulator, it only works when the hardware keyboard is turned on):

EditText edittext = FindViewById<edittext><span style="color: #000000;">(Resource.Id.edittext);
edittext.KeyPress </span>+= (s, e) =><span style="color: #000000;">
{
    e.Handled </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
    </span><span style="color: #0000ff;">if</span> (e.Event.Action == KeyEventActions.Down && e.KeyCode ==<span style="color: #000000;"> Keycode.Enter) {
        Toast.MakeText (</span><span style="color: #0000ff;">this</span><span style="color: #000000;">, edittext.Text, ToastLength.Short).Show ();
        e.Handled </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
    }
};</span></edittext>

3. Example 2--Demo02Login

In an application, login is the most basic interface. This example demonstrates how to develop a simple login window using basic controls such as Button, TextView, and EditText.

Running screenshot:

Main design steps:

(1) Add the demo02_Login.axml file under the layout folder. In the Design view of the file, drag and drop the following controls from the Toolbox:

Text(Medium): Generate medium TextView

PlainText: Generate EditText for plain text input

Password: Generate EditText for password input

Button: Generate Button

(2) Set the properties corresponding to each control in the [Properties] window. The final generated code is as follows:

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" encoding="utf-8"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #800000;">LinearLayout </span><span style="color: #ff0000;">xmlns:android</span><span style="color: #0000ff;">="http://schemas.android.com/apk/res/android"</span><span style="color: #ff0000;">
    android:orientation</span><span style="color: #0000ff;">="vertical"</span><span style="color: #ff0000;">
    android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
    android:layout_height</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">TextView
      </span><span style="color: #ff0000;">android:text</span><span style="color: #0000ff;">="用户名"</span><span style="color: #ff0000;">
      android:textAppearance</span><span style="color: #0000ff;">="?android:attr/textAppearanceMedium"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/textView1"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">EditText
      </span><span style="color: #ff0000;">android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/editTextUserName"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">TextView
      </span><span style="color: #ff0000;">android:text</span><span style="color: #0000ff;">="密码"</span><span style="color: #ff0000;">
      android:textAppearance</span><span style="color: #0000ff;">="?android:attr/textAppearanceMedium"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/textView2"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">EditText
      </span><span style="color: #ff0000;">android:inputType</span><span style="color: #0000ff;">="textPassword"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="match_parent"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/editTextPwd"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">Button
      </span><span style="color: #ff0000;">android:text</span><span style="color: #0000ff;">="登录"</span><span style="color: #ff0000;">
      android:layout_width</span><span style="color: #0000ff;">="100dp"</span><span style="color: #ff0000;">
      android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;">
      android:id</span><span style="color: #0000ff;">="@+id/buttonLogin"</span><span style="color: #ff0000;">
      android:layout_gravity</span><span style="color: #0000ff;">="center_horizontal"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">LinearLayout</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

(3) Save all open files so that you can see smart prompts when typing code in .cs. Note: If you still cannot see the smart prompt for the ID in the .cs file, click the [Refresh] button above the [Solution Explorer].

(4) Add the Demo02Login.cs file under the SrcActivity folder and change the code to the following content:

<span style="color: #0000ff;">using</span><span style="color: #000000;"> System;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.App;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.OS;
</span><span style="color: #0000ff;">using</span><span style="color: #000000;"> Android.Widget;
</span><span style="color: #0000ff;">namespace</span><span style="color: #000000;"> ch05demos.SrcActivity
{
    [Activity(Label </span>= <span style="color: #800000;">"</span><span style="color: #800000;">LoginDemo</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span><span style="color: #000000;"> Demo02Login : Activity
    {
        </span><span style="color: #0000ff;">protected</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> OnCreate(Bundle savedInstanceState)
        {
            </span><span style="color: #0000ff;">base</span><span style="color: #000000;">.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.demo02_Login);
            Button btn </span>= FindViewById<button><span style="color: #000000;">(Resource.Id.buttonLogin);
            btn.Click </span>+= Btn_Click;  <span style="color: #008000;">//</span><span style="color: #008000;">技巧：按+=后，连续按两次<tab>键</tab></span>
<span style="color: #000000;">        }

        </span><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> Btn_Click(<span style="color: #0000ff;">object</span><span style="color: #000000;"> sender, EventArgs e)
        {
            </span><span style="color: #0000ff;">var</span> userName = FindViewById<edittext><span style="color: #000000;">(Resource.Id.editTextUserName);
            </span><span style="color: #0000ff;">var</span> pwd = FindViewById<edittext><span style="color: #000000;">(Resource.Id.editTextPwd);
            Toast.MakeText(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">,
                </span><span style="color: #0000ff;">string</span>.Format(<span style="color: #800000;">"</span><span style="color: #800000;">用户名：{0}, 密码：{1}</span><span style="color: #800000;">"</span><span style="color: #000000;">, userName.Text, pwd.Text),
                </span><span style="color: #008000;">//</span><span style="color: #008000;">技巧：按空格</span>
<span style="color: #000000;">                ToastLength.Long).Show();
        }
    }
}</span></edittext></edittext></button>

Run it and you will get the effect shown in the screenshot.