Xamarin - 構建應用程式 GUI

上一頁
下一頁

TextView

TextView 是 Android 小部件中非常重要的元件。它主要用於在 Android 螢幕上顯示文字。

要建立 TextView，只需開啟main.axml並在線性佈局標籤之間新增以下程式碼。

<TextView 
   android:text = "Hello I am a text View" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/textview1" />

Button

按鈕是一個控制元件，用於在點選時觸發事件。在您的Main.axml檔案中，鍵入以下程式碼以建立按鈕。

<Button 
   android:id = "@+id/MyButton" 
   android:layout_width = "fill_parent" 
   android:layout_height = "wrap_content" 
   android:text = "@string/Hello" />

開啟Resources\Values\Strings.xml並在<resources>標籤之間鍵入以下程式碼行。

<string name="Hello">Click Me!</string>

以上程式碼提供了我們建立的按鈕的值。接下來，我們開啟MainActivity.cs並建立在點選按鈕時要執行的操作。在base.OnCreate(bundle)方法下鍵入以下程式碼。

Button button = FindViewById<Button>(Resource.Id.MyButton); 
button.Click += delegate { button.Text = "You clicked me"; };
Button App

以上程式碼在使用者點選按鈕時顯示“您點選了我”。

FindViewById<< --> 此方法查詢已識別的檢視的 ID。它在 .axml 佈局檔案中搜索 ID。

FindViewById

Checkbox

當想要從一組選項中選擇多個選項時使用複選框。在本例中，我們將建立一個複選框，選中時顯示已選中訊息，否則顯示未選中。

首先，我們開啟專案中的Main.axml檔案，並鍵入以下程式碼行以建立複選框。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <CheckBox 
      android:text = "CheckBox" 
      android:padding = "25dp" 
      android:layout_width = "300dp" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/checkBox1" 
      android:textColor = "@android:color/black" 
      android:background = "@android:color/holo_blue_dark" /> 
</LinearLayout>

接下來，轉到MainActivity.cs新增功能程式碼。

CheckBox checkMe = FindViewById<CheckBox>(Resource.Id.checkBox1); 
checkMe.CheckedChange += (object sender, CompoundButton.CheckedChangeEventArgs e) => { 
   CheckBox check = (CheckBox)sender; 
   if(check.Checked) { 
      check.Text = "Checkbox has been checked"; 
   } else { 
      check.Text = "Checkbox has not been checked"; 
   } 
};

從以上程式碼中，我們首先使用findViewById查詢複選框。接下來，我們為複選框建立一個處理程式方法，在處理程式中，我們建立一個 if else 語句，根據所選結果顯示訊息。

CompoundButton.CheckedChangeEventArgs → 此方法在複選框狀態更改時觸發事件。

Checkbox has been checked

ProgressBar

進度條是一個用於顯示操作進度的控制元件。要新增進度條，請在Main.axml檔案中新增以下程式碼行。

<ProgressBar 
   style="?android:attr/progressBarStyleHorizontal" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/progressBar1" />

接下來，轉到MainActivity.cs並設定進度條的值。

ProgressBar pb = FindViewById<ProgressBar>(Resource.Id.progressBar1); 
pb.Progress = 35;

在上面的程式碼中，我們建立了一個值為 35 的進度條。

Radio Buttons

這是一個 Android 小部件，允許使用者從一組選項中選擇一個。在本節中，我們將建立一個包含汽車列表的單選組，該列表將檢索選中的單選按鈕。

首先，我們新增一個單選組和一個TextView，如下面的程式碼所示 -

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "@android:color/darker_gray" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "What is your favourite Car" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:textColor = "@android:color/black" /> 
   <RadioGroup 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioGroup1" 
      android:backgroundTint = "#a52a2aff" 
      android:background = "@android:color/holo_green_dark"> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Ferrari" 
      android:id = "@+id/radioFerrari" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Mercedes" 
      android:id = "@+id/radioMercedes" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Lamborghini" 
      android:id = "@+id/radioLamborghini" />
   <RadioButton 
      android:text = "Audi" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioAudi" /> 
   </RadioGroup> 
</LinearLayout>

要執行操作，當點選單選按鈕時，我們新增一個活動。轉到MainActivity.cs並建立一個新的事件處理程式，如下所示。

private void onClickRadioButton(object sender, EventArgs e) { 
   RadioButton cars = (RadioButton)sender; 
   Toast.MakeText(this, cars.Text, ToastLength.Short).Show 
   (); 
}

Toast.MakeText() → 這是一個檢視方法，用於在一個小的彈出視窗中顯示訊息/輸出。在OnCreate()方法的底部，就在SetContentView()之後，新增以下程式碼段。這將捕獲每個單選按鈕並將它們新增到我們建立的事件處理程式中。

RadioButton radio_Ferrari = FindViewById<RadioButton> 
   (Resource.Id.radioFerrari); 
   RadioButton radio_Mercedes = FindViewById<RadioButton> 
   (Resource.Id.radioMercedes); 
   RadioButton radio_Lambo = FindViewById<RadioButton> 
   (Resource.Id.radioLamborghini); 
   RadioButton radio_Audi = FindViewById<RadioButton> 
   (Resource.Id.radioAudi); 
   radio_Ferrari.Click += onClickRadioButton; 
   radio_Mercedes.Click += onClickRadioButton; 
   radio_Lambo.Click += onClickRadioButton; 
   radio_Audi.Click += onClickRadioButton;

現在，執行您的應用程式。它應該顯示以下螢幕作為輸出 -

Output Displayed

Toggle Buttons

切換按鈕用於在兩種狀態之間切換，例如，它可以在開啟和關閉之間切換。開啟Resources\layout\Main.axml並新增以下程式碼行以建立切換按鈕。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <ToggleButton 
      android:id = "@+id/togglebutton" 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:textOn = "Torch ON" 
      android:textOff = "Torch OFF" 
      android:textColor = "@android:color/black" /> 
</LinearLayout>

當點選切換欄時，我們可以向其新增操作。開啟MainActivity.cs並在OnCreate()方法類之後新增以下程式碼行。

ToggleButton togglebutton = FindViewById<ToggleButton> (Resource.Id.togglebutton); 
togglebutton.Click += (o, e) => { 
   if (togglebutton.Checked) 
      Toast.MakeText(this, "Torch is ON", ToastLength.Short).Show (); 
   else 
      Toast.MakeText(this, "Torch is OFF", 
      ToastLength.Short).Show(); 
};

現在，當您執行應用程式時，它應該顯示以下輸出 -

Torch ON and OFF

Ratings Bar

評分欄是一種表單元素，由星形組成，應用程式使用者可以使用它來評價您為他們提供的服務。在您的Main.axml檔案中，建立一個包含 5 顆星的新評分欄。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <RatingBar 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/ratingBar1" 
      android:numStars = "5" 
      android:stepSize = "1.0" /> 
</LinearLayout>

執行應用程式後，它應該顯示以下輸出 -

RatingBarApp

Autocomplete TextView

這是一個文字檢視，在使用者鍵入時顯示完整建議。我們將建立一個包含人員姓名列表的自動完成文字檢視，以及一個按鈕，單擊該按鈕將顯示我們從文字檢視中輸入的選定名稱。

開啟Main.axml並編寫以下程式碼。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:background = "#d3d3d3" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "Enter Name" 
      android:textAppearance = "?android:attr/textAppearanceMedium" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:padding = "5dp" 
      android:textColor = "@android:color/black" /> 
   <AutoCompleteTextView 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/autoComplete1" 
      android:textColor = "@android:color/black" /> 
   <Button 
      android:text = "Submit" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btn_Submit" 
      android:background="@android:color/holo_green_dark" /> 
</LinearLayout>

以上程式碼生成一個用於鍵入的 TextView、一個用於顯示建議的AutoCompleteTextView和一個用於顯示從 TextView 中輸入的名稱的按鈕。轉到MainActivity.cs新增功能。

建立一個新的事件處理程式方法，如下所示。

protected void ClickedBtnSubmit(object sender, System.EventArgs e){ 
   if (autoComplete1.Text != ""){ 
      Toast.MakeText(this, "The Name Entered =" 
         + autoComplete1.Text, ToastLength.Short).Show(); 
   } else { 
      Toast.MakeText(this, "Enter a Name!", ToastLength.Short).Show(); 
   } 
}

建立的處理程式檢查自動完成文字檢視是否為空。如果它不為空，則顯示選定的自動完成文字。在OnCreate()類中鍵入以下程式碼。

autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1); 
btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);  
var names = new string[] { "John", "Peter", "Jane", "Britney" }; 
ArrayAdapter adapter = new ArrayAdapter<string>(this,           
   Android.Resource.Layout.SimpleSpinnerItem, names); 
autoComplete1.Adapter = adapter; 
btn_Submit.Click += ClickedBtnSubmit;

ArrayAdapter - 這是一個集合處理程式，它從列表集合中讀取資料項並將其作為檢視返回或在螢幕上顯示它們。

現在，當您執行應用程式時，它應該顯示以下輸出。

AutoComplete TextView
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.