Xamarin - tworzenie interfejsu GUI aplikacji

Widok tekstu

TextView jest bardzo ważnym elementem widżetów Androida. Służy głównie do wyświetlania tekstów na ekranie Androida.

Aby utworzyć widok tekstu, po prostu otwórz main.axml i dodaj następujący kod między znacznikami układu liniowego.

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

Przycisk

Przycisk to element sterujący używany do wyzwalania zdarzenia po jego kliknięciu. Pod twoimMain.axml file, wpisz następujący kod, aby utworzyć przycisk.

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

otwarty Resources\Values\Strings.xml i wpisz następujący wiersz kodu między tagiem <resources>.

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

Powyższy kod podaje wartość utworzonego przez nas przycisku. Następnie otwieramyMainActivity.csi utwórz akcję, która ma być wykonana po kliknięciu przycisku. Wpisz następujący kod podbase.OnCreate (pakiet).

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

Powyższy kod wyświetla komunikat „You Clicked Me”, gdy użytkownik kliknie przycisk.

FindViewById<< -->Ta metoda znajduje identyfikator widoku, który został zidentyfikowany. Wyszukuje identyfikator w pliku układu .axml.

Pole wyboru

Pole wyboru jest używane, gdy chce się wybrać więcej niż jedną opcję z grupy opcji. W tym przykładzie utworzymy pole wyboru, które po zaznaczeniu wyświetla komunikat, że zostało zaznaczone, w przeciwnym razie wyświetla się jako niezaznaczone.

Na początek otwieramy Main.axml plik w naszym projekcie i wpisz następujący wiersz kodu, aby utworzyć pole wyboru.

<?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>

Następnie przejdź do MainActivity.cs aby dodać kod funkcjonalności.

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"; 
   } 
};

Z powyższego kodu najpierw znajdujemy pole wyboru za pomocą findViewById. Następnie tworzymy metodę obsługi dla naszego pola wyboru, aw naszym module obsługi tworzymy instrukcję if else, która wyświetla komunikat w zależności od wybranego wyniku.

CompoundButton.CheckedChangeEventArgs → Ta metoda uruchamia zdarzenie, gdy zmienia się stan pola wyboru.

Pasek postępu

Pasek postępu to element sterujący służący do wyświetlania postępu operacji. Aby dodać pasek postępu, dodaj następujący wiersz kodu wMain.axml plik.

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

Następnie przejdź do MainActivity.cs i ustaw wartość paska postępu.

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

W powyższym kodzie utworzyliśmy pasek postępu o wartości 35.

Przyciski radiowe

Jest to widżet systemu Android, który pozwala osobie wybrać jeden z zestawu opcji. W tej sekcji utworzymy grupę radiową zawierającą listę samochodów, które będą pobierać zaznaczony przycisk opcji.

Najpierw dodajemy grupę radiową i plik textview jak pokazano w poniższym kodzie -

<?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>

Aby wykonać akcję, po kliknięciu przycisku opcji dodajemy działanie. Iść doMainActivity.cs i utwórz nową procedurę obsługi zdarzeń, jak pokazano poniżej.

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

Toast.MakeText() →Jest to metoda widoku używana do wyświetlania komunikatu / wyniku w małym wyskakującym okienku. Na doleOnCreate() metoda zaraz po SetContentView()dodaj następujący fragment kodu. Spowoduje to przechwycenie każdego z przycisków opcji i dodanie ich do utworzonego przez nas programu obsługi zdarzeń.

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;

Teraz uruchom aplikację. Powinien wyświetlić następujący ekran jako wyjście -

Przełącz przyciski

Przycisk przełącznika służy do przełączania między dwoma stanami, np. Może przełączać między włączeniem i wyłączeniem. otwartyResources\layout\Main.axml i dodaj następujące wiersze kodu, aby utworzyć przycisk przełącznika.

<?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>

Możemy dodawać akcje do paska przełączania po jego kliknięciu. otwartyMainActivity.cs i dodaj następujące wiersze kodu po OnCreate() klasa metody.

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(); 
};

Teraz, po uruchomieniu aplikacji, powinna wyświetlić następujące dane wyjściowe -

Pasek ocen

Pasek ocen to element formularza, który składa się z gwiazdek, których użytkownicy aplikacji mogą używać do oceniania dostarczonych im rzeczy. W TwoimMain.axml plik, utwórz nowy pasek oceny z 5 gwiazdkami.

<?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>

Po uruchomieniu aplikacji powinna wyświetlić następujące dane wyjściowe -

Autouzupełnianie widoku tekstu

To jest widok tekstu, który pokazuje pełne sugestie, gdy użytkownik pisze. Zamierzamy stworzyć autouzupełniający widok tekstowy zawierający listę nazwisk osób oraz przycisk, który po kliknięciu pokaże nam wybraną nazwę.

otwarty Main.axml i napisz następujący kod.

<?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>

Powyższy kod generuje TextView do wpisywania, AutoCompleteTextViewdo pokazywania sugestii oraz przycisk do wyświetlania nazw wprowadzonych z TextView. Iść doMainActivity.cs aby dodać funkcjonalność.

Utwórz nową metodę obsługi zdarzeń, jak pokazano poniżej.

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(); 
   } 
}

Utworzony program obsługi sprawdza, czy autouzupełniany widok tekstu jest pusty. Jeśli nie jest pusty, wyświetla wybrany tekst autouzupełniania. Wpisz następujący kod wOnCreate() klasa.

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 - Jest to program obsługi kolekcji, który odczytuje elementy danych z kolekcji listy i zwraca je jako widok lub wyświetla je na ekranie.

Teraz, gdy uruchomisz aplikację, powinna wyświetlić następujące dane wyjściowe.