2017/5/17

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

執行結果:





沒有留言:

張貼留言