從0開始Xamarin：控件（一）

概述

      Xamarin和UWP的控件比較類似，以XML文檔的形式表現，基本結構如下

<RadioButton android:id="@+id/radio_red"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Red" />

      在一組XML元素中標註上控件的類型，屬性，Id，但是與UWP不同，Xamarin並不能在UI設計器中直接綁定後臺響應，而是在MainActivity.cs中的OnCreate()方法中添加代碼來綁定事件，與QT的槽機制頗有類似。其代碼結構如下

RadioButton radio_red = FindViewById<RadioButton>(Resource.Id.radio_red);

radio_red.Click += RadioButtonClick;

第一行代碼將UI界面的控件通過Id好賦值給一個控件對象，然後以C#常用的+=來生成新事件（可以映射到同一事件上）。

具體控件

  RadioButton

      與RadioGroup組合使用來實現互斥單選

       實例處理事件（切換toast文本的顏色）

private void RadioButtonClick (object sender, EventArgs e)
{
    RadioButton rb = (RadioButton)sender; //強制類型轉換
    Toast.MakeText (this, rb.Text, ToastLength.Short).Show ();
}

  ToggleButton/Switch

    切換按鈕（左側爲按鍵，右側爲開關）

      控件的綁定

ToggleButton togglebutton = FindViewById<ToggleButton>(Resource.Id.togglebutton);

togglebutton.Click += (o, e) => {
    if (togglebutton.Checked)
        Toast.MakeText(this, "Checked", ToastLength.Short).Show ();
    else
        Toast.MakeText(this, "Not checked", ToastLength.Short).Show ();
};   //使用lamb表達式的簡易響應事件

  CheckBox

      複選框，處理方法示例如下

CheckBox checkbox = FindViewById<CheckBox>(Resource.Id.checkbox);

checkbox.Click += (o, e) => {
    if (checkbox.Checked)
        Toast.MakeText (this, "Selected", ToastLength.Short).Show ();
    else
        Toast.MakeText (this, "Not selected", ToastLength.Short).Show ();
};

CardView

      

        需要Xamarin.Android.Support.v7.CardView包的支持

結構如下

<LinearLayout 
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal"
        cardview:cardElevation="4dp"
        cardview:cardCornerRadius="5dp">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="240dp"
            android:orientation="vertical"
            android:padding="8dp">

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="190dp"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Photo Title"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="5dp" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

      其嵌套結構爲：LinearLayout（佈局）

                                   CardView

                                        LinearLayout（佈局）

                                            Item

EditText

      富文本控件

綁定事件如下（實時捕獲輸入信息）

EditText edittext = FindViewById<EditText>(Resource.Id.edittext);

edittext.KeyPress += (object sender, View.KeyEventArgs e) => {
    e.Handled = false;
    if (e.Event.Action == KeyEventActions.Down && e.KeyCode == Keycode.Enter)
    {
        Toast.MakeText(this, edittext.Text, ToastLength.Short).Show();
        e.Handled = true;
    }
};

效果如圖：（由toast顯示已輸入的文字）

導航欄設置

      位於ndroid.View.View中，有三種屬性：SystemUiFlagVisible – 使導航欄可見、SystemUiFlagLowProfile – 導航欄中的控件、SystemUiFlagHideNavigation – 隱藏導航欄

DatePicker（日期選擇）

      分爲DatePicker小組件和DatePickerDialog

      DatePicker

        首先實現IOnDateSetListener接口：

public class DatePickerFragment : DialogFragment, DatePickerDialog.IOnDateSetListener
{
    public static readonly string TAG = "X:" + typeof (DatePickerFragment).Name.ToUpper();
    
    Action<DateTime> _dateSelectedHandler = delegate { };
    
    public static DatePickerFragment NewInstance(Action<DateTime> onDateSelected)
    {
        DatePickerFragment frag = new DatePickerFragment();
        frag._dateSelectedHandler = onDateSelected;
        return frag;
    }
    
    public override Dialog OnCreateDialog(Bundle savedInstanceState)
    {
        DateTime currently = DateTime.Now;
        DatePickerDialog dialog = new DatePickerDialog(Activity, 
                                                       this, 
                                                       currently.Year, 
                                                       currently.Month - 1,
                                                       currently.Day);
        return dialog;
    }
    
    public void OnDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)
    {
        DateTime selectedDate = new DateTime(year, monthOfYear + 1, dayOfMonth);
        Log.Debug(TAG, selectedDate.ToLongDateString());
        _dateSelectedHandler(selectedDate);
    }
}

        綁定控件

_dateDisplay = FindViewById<TextView>(Resource.Id.date_display);
_dateSelectButton = FindViewById<Button>(Resource.Id.date_select_button);
_dateSelectButton.Click += DateSelect_OnClick;

      編寫響應事件

void DateSelect_OnClick(object sender, EventArgs eventArgs)
{
    DatePickerFragment frag = DatePickerFragment.NewInstance(delegate(DateTime time)
    {
        _dateDisplay.Text = time.ToLongDateString();
    });
        frag.Show(FragmentManager, DatePickerFragment.TAG);
}

      TimerPicker

        綁定同DatePicker，DialogFragment的實現如下

public class TimePickerFragment : DialogFragment, TimePickerDialog.IOnTimeSetListener
{
    public static readonly string TAG = "MyTimePickerFragment";
    Action<DateTime> timeSelectedHandler = delegate { };

    public static TimePickerFragment NewInstance(Action<DateTime> onTimeSelected)
    {
        TimePickerFragment frag = new TimePickerFragment();
        frag.timeSelectedHandler = onTimeSelected;
        return frag;
    }

    public override Dialog OnCreateDialog (Bundle savedInstanceState)
    {
        DateTime currentTime = DateTime.Now;
        bool is24HourFormat = DateFormat.Is24HourFormat(Activity);
        TimePickerDialog dialog = new TimePickerDialog
            (Activity, this, currentTime.Hour, currentTime.Minute, is24HourFormat);
        return dialog;
    }

    public void OnTimeSet(TimePicker view, int hourOfDay, int minute)
    {
        DateTime currentTime = DateTime.Now;
        DateTime selectedTime = new DateTime(currentTime.Year, currentTime.Month, currentTime.Day, hourOfDay, minute, 0);
        Log.Debug(TAG, selectedTime.ToLongTimeString());
        timeSelectedHandler (selectedTime);
    }
}