Xamarin-building-the-app-gui

提供：Dev Guides
移動先:案内、検索

Xamarin-アプリGUIの構築

TextView

TextViewは、Androidウィジェットの非常に重要なコンポーネントです。 主に、Android画面にテキストを表示するために使用されます。

テキストビューを作成するには、単に 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"/>

ボタン

ボタンは、クリックされたときにイベントをトリガーするために使用されるコントロールです。 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 （バンドル）メソッドの下に次のコードを入力します。 

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

ボタンアプリ

上記のコードでは、ユーザーがボタンをクリックすると「You Clicked Me」と表示されます。 

*FindViewById <<->* このメソッドは、識別されたビューのIDを検索します。 .axmlレイアウトファイルでIDを検索します。

FindViewById

チェックボックス

チェックボックスは、オプションのグループから複数のオプションを選択する場合に使用されます。 この例では、チェックボックスを作成します。チェックボックスを選択すると、チェックされたことを示すメッセージが表示されます。

まず、プロジェクトで 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* →このメソッドは、チェックボックスの状態が変化したときにイベントを発生させます。

チェックボックスがオンになっています

プログレスバー

進行状況バーは、操作の進行状況を示すために使用されるコントロールです。 プログレスバーを追加するには、 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のプログレスバーを作成しました。

ラジオボタン

これは、ユーザーが一連のオプションから1つを選択できる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（）→これは、メッセージ/出力を小さなポップアップで表示するために使用されるビューメソッドです。 * SetContentView（）*の直後の OnCreate（）*メソッドの下部に、次のコードを追加します。 これにより、各ラジオボタンがキャプチャされ、作成したイベントハンドラーに追加されます。
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;

次に、アプリケーションを実行します。 出力として次の画面を表示する必要があります-

表示される出力

トグルボタン

トグルボタンは、2つの状態を切り替えるために使用されます。たとえば、オンとオフを切り替えることができます。 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();
};

さて、アプリを実行すると、次の出力が表示されるはずです-

トーチのオンとオフ

評価バー

評価バーは星で構成されたフォーム要素であり、アプリのユーザーはこれを使用して、提供したものを評価できます。 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

オートコンプリートテキストビュー

これは、ユーザーが入力している間に完全な候補を表示するテキストビューです。 ユーザーの名前のリストと、クリックすると選択した名前が表示されるボタンを含むオートコンプリートテキストビューを作成します。 

*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

「https://www.finddevguides.com/index.php?title=Xamarin-building-the-app-gui&oldid=25760」から取得
Powered by MediaWiki