Xamarin.Forms 教學系列文（十五.參）互動元件 -- Entry & Editor

學習目標

• Entry - 單行文字
• Editor - 多行文字

Xamarin.Forms 定義了 Entry、Editor 和 SearchBar 三種可輸入文字 的元件，按下時會彈出鍵盤。

Entry 和 Editor 繼承自 InputView，而 SearchBar 繼承自 View，所以 SearchBar 的屬性會有較大的差異。

程式面來說，輸入元件 接收到了  Focus 的情況，才會將鍵盤顯彈出

和 Focus 有關係的五個方法、屬性和事件：

• Focus (方法) - 設置 focus，並在成功時回傳 true。
• Unfocus (方法) - 取消 focus。
• IsFocused (屬性) - 有 focus 時回傳 true。
• Focused (事件) - 已經 focus 時觸發。
• Unfocused (事件) - 失去 focus 時觸發。

選擇預設鍵盤

Entry 和 Editor 定義了 keyboard 這屬性 ( SearchBar 沒有)，允許程式選擇鍵盤的樣式。

舉例來說，輸入電話 和 輸入網址 的鍵盤顯示的內容不一樣。

keyboard 的種類有以下七種：

• Default
• Text
• Chat
• Url
• Email
• Telephone
• Numeric

簡單的 Entry 範例：
*Oplatform 寫法已更改，請參考此篇文章

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="EntryKeyboards.EntryKeyboardsPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                            iOS="10, 20, 10, 0"
                            Android="10, 0"
                            WinPhone="10, 0" />
    </ContentPage.Padding>
    <ScrollView>
        <StackLayout>
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style TargetType="Entry">
                        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>

            <Entry Placeholder="Default"
                           Keyboard="Default" />
            <Entry Placeholder="Text"
                           Keyboard="Text" />
            <Entry Placeholder="Chat"
                           Keyboard="Chat" />
            <Entry Placeholder="Url"
                           Keyboard="Url" />
            <Entry Placeholder="Email"
                       
                           Keyboard="Email" />
            <Entry Placeholder="Telephone"
                           Keyboard="Telephone" />
            <Entry Placeholder="Numeric"
                           Keyboard="Numeric" />
        </StackLayout>
    </ScrollView>
</ContentPage>

執行結果：

在Android，如果你點選螢幕下半部分的 Entry，它會在鍵盤出現時自動將頁面往上調整，如此一來就能同時看到輸入的文字，但在 iOS 需要額外包一層 ScrollView 來支援此功能。

但如果要點選上面的欄位，又同時能捲動到底下的欄位出現，又是另一個故事了... 

Entry

Entry 定義了四個屬性：

• Text - Entry 的值
• TextColor - 顏色
• IsPassword - 是否遮蔽輸入的資料，Boolean
• Placeholder - 灰色字串，當使用者輸入資料時會消失

兩個事件：

• TextChanged - 當 Text 變更時觸發
• Completed - 當點選鍵盤上特定按鈕會觸發
• iOS : return
• Android : 綠色勾勾

Editor

Editor 只有定義一個 Text 屬性。

和兩個事件：

• TextChanged
• Completed

需要注意的是 Editor 和 Entry 的 Completed 事件有些微不同：

• iOS：點選 Done 後觸發 Completed 和取消鍵盤。
• Android：手機左下角的 返回鍵 來觸發 Completed 和取消鍵盤。但在 Entry上只會取消鍵盤並不會觸發 Completed 事件

來看 JustNote 這支範例 --  

比較特別的是當 App 關閉時，我們會將 Editor 內的文字存到 Application Properties 內，而當 App 重新啟動時會將儲存的值還給 Editor：

App.xaml.cs：

    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new JustNotesPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
            // 執行 JustNote 頁面上的 OnSleep 事件
            ((JustNotesPage)(((NavigationPage)MainPage).CurrentPage)).OnSleep();
        }
        protected override void OnResume()
        {
            // Handle when your app resumes 
        } 
    }

XAML：
由於 Editor 已經內建 Scroll 功能，外面不需再包一層 ScrollView，所以用 AbsoluteLayout 的比例來做 Editor 大小的控制。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="JustNotes.JustNotesPage" Title="Just Notes">
    
    <StackLayout>
        <AbsoluteLayout VerticalOptions="FillAndExpand">
            <Editor x:Name="editor" 
                    Keyboard="Text"
                    AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
                    AbsoluteLayout.LayoutFlags="All" 
                    Focused="OnEditorFocused"
                    Unfocused="OnEditorUnfocused" />
        </AbsoluteLayout>
    </StackLayout>
    
</ContentPage>

.cs：
由於 iOS 鍵盤按下時元件不會往上縮，所以當 Focus 時更改 AbsoluteLayout 的高度為一半。

    public partial class JustNotesPage : ContentPage
    {
        public JustNotesPage()
        {
            InitializeComponent();

            // 取出儲存的值
            IDictionary properties = Application.Current.Properties;

            if (properties.ContainsKey("text"))
            {
                editor.Text = (string)properties["text"];
            }
        }

        void OnEditorFocused(object sender, FocusEventArgs args)
        {
            if (Device.OS == TargetPlatform.iOS)
            {
                AbsoluteLayout.SetLayoutBounds(editor, new Rectangle(0, 0, 1, 0.5));
            }
        }

        void OnEditorUnfocused(object sender, FocusEventArgs args)
        {
            if (Device.OS == TargetPlatform.iOS)
            {
                AbsoluteLayout.SetLayoutBounds(editor, new Rectangle(0, 0, 1, 1));
            }
        }
        public void OnSleep()
        {
            // 儲存 Editor 的值
            Application.Current.Properties["text"] = editor.Text;
        }
    }

執行結果：