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中有時候總要走很多彎路。