1. 程式人生 > >xamarin forms中的Button文字預設大寫

xamarin forms中的Button文字預設大寫

問題來源

使用xamarin forms建立的android專案中,Button、Toolbar的右側選單按鈕上的如果是字母的話,在android5.0以上,預設的文字都是大寫,這種情況iOS專案不存在,是正常的顯示。google公司把android的按鈕文字預設大寫,這個肯定和英語國家閱讀習慣有關,但是iOS卻是正常顯示,有點難以解釋google為什麼將android的按鈕文字預設成大寫。問題如圖:

分析

其實這個問題的產生的原因還是因為 在5.0中在Button使用的Theme是這個,預設已經textAllCaps改為true了。

<style name="TextAppearance.Material.Button">
      <item name="textSize">@dimen/text_size_button_material</item>
      <item name="fontFamily">@string/font_family_button_material</item>
      <item name="textAllCaps">true</item>
      <item name="textColor">?attr/textColorPrimary</item>
</style>

在android中我們只需要將按鈕的屬性textAllCaps都改為false就可以了,最好還是全域性設定這個屬性,直接在Activity的Theme中去設定就行了。
那在xamarin forms中如何解決呢?

解決方法

Button 和Toolbar的按鈕文字都是預設的大寫,問題的解決方式有兩種,第一種是直接android專案中的MainActivity的Theme中去全域性新增樣式,
第二種方式在xamarin forms中使用Render這些UI,不管哪種方式都能解決,個人推薦既然要改變這種預設樣式,還是直接在全域性Theme中去設定樣式吧。

1.android MainActivity的Theme修改樣式textAllCaps

這個新建的xamarin forms專案中的android專案的預設的Theme,新增樣式最後一行,這樣可以修改Button和Toolbar的按鈕文字預設大寫,但是.......有個小問題,TabLayout的標題文字還是會預設大寫,如下:

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    <item name="textAllCaps">false</item>
  </style>
2.使用Render Button 設定屬性textAllCaps

Render的目的就是自定義各平臺的UI展現,相關的介紹如下:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers
render button的步驟如下:
step1:在forms的.net standard 專案中新增MyButton.cs ,繼承xamarin forms 的Button。

using Xamarin.Forms;

namespace DefaultUpperSample
{
    public class MyButton:Button
    {
    }
}

step2 在android專案新建MyButtonRender.cs,修改預設屬性。
繼承ViewRenderer時一定要重寫OnElementChanged方法,這個方法的作用是建立UI元素,會在UI初始化時呼叫。注意名稱空間上的特性定義,iOS平臺上不需要處理,就不用去處理。
[assembly: ExportRenderer(typeof(DefaultUpperSample.MyButton), typeof(DefaultUpperSample.Droid.MyButtonRender))]

[assembly: ExportRenderer(typeof(ButtonTextDefaultUpperSample.MyButton), typeof(ButtonTextDefaultUpperSample.Droid.MyButtonRender))]

namespace DefaultUpperSample.Droid
{
    public class MyButtonRender:ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                SetNativeControl(new Android.Widget.Button(Context));
            }
            else
            {
                Control.SetAllCaps(false);
            }
        }
    }
}

step3 在forms中使用如下:

                <defaultuppersample:MyButton Margin="0,10,0,0" Text="Learn more"
                        Command="{Binding OpenWebCommand}"
                        BackgroundColor="{StaticResource Primary}"
                        TextColor="White" />

效果圖如下:

程式碼下載地址:

總結

其實第一種方法直接在android裡面寫style更為靠譜,不用一個一個render ui,但是第一種方法會有一個問題,就是toolbar、button的文字修改樣式textAllCaps可以解決預設大寫的問題,但是TabLayout的標題文字卻不能通過這個屬性來解決,解決方式是一樣的,這種文體在android中非常容易,一百度全都出來了,但是在xamarin forms中有時候總要走很多彎路。