Telerik UI for Xamarin能幫助開發人員快速構建跨平臺移動應用的原生UI。Telerik UI for Xamarin使用Xamarin.Forms技術,它可以讓開發人員從一個單一的共享C#代碼庫中創建原生的iOS、Android和Windows Phone應用程序。不僅如此,UI for Xamarin建立在iOS和Android的原生控件之上的,爲Xamarin用戶的應用程序提供真正的原生UI。
對用戶的眼睛更加友好、節省電量或僅是偏好,無論是什麼原因,身爲移動開發人員,您可能已經考慮過爲應用提供黑暗模式。
Telerik技術團隊旨在提高工作效率,因此在本年度的第一個發行版(R1 2021)中,爲Telerik Xamarin控件引入對暗黑模式的支持。簡而言之,這意味着現在我們的控件將響應iOS和Android設備上的明暗模式更改,而無需分別設置樣式。
iOS和Android的暗黑模式功能基本上是標準系統外觀的一種附加模式,在該系統中,操作系統的所有元素均以專業設計的深色調色板設置樣式。 移動平臺供應商已設計了深色主題,因此可以完美地勾勒出前臺內容的輪廓,並且還支持所有輔助功能。 使用深色主題的好處是:
- 降低功耗
- 爲視力障礙用戶提供更好的體驗
- 在低配置環境下爲所有用戶提供更好的可視化
事實證明,移動用戶對使用深色主題有很大的興趣,我們認爲支持該主題的控件將是對該套件的寶貴補充。 從R1 2021版本開始,切換設備模式時,Telerik UI for Xamarin控件將自動使用較暗的主題調色板。
在iOS和Android上更詳細地檢查暗黑模式功能。
iOS上的暗黑模式支持
對於iOS,此功能是在v 13中引入的。移動設備的“設置”中有一個選項,因此用戶可以選擇深色主題 - 這將爲系統以及所有正在運行的應用程序設置深色調色板,通常用戶希望所有應用程序都尊重其系統偏好。
Android上的暗黑主題支持
自Android 10(API級別29)起,在Android上可以使用將深色主題應用於整個設備的功能。 較舊的Android版本無法選擇在亮/暗模式之間切換,但是您可以在應用級別上添加此類切換。 與iOS相反,當您在Android中設置暗模式時,將重新加載當前正在運行的應用程序以應用新外觀。
爲了在Android上的應用程序中支持Dark主題,您需要採取另外的步驟。 您必須將應用程序的主題設置爲繼承自DayNight主題,然後轉到位於Android項目中的Resources / values / styles.xml文件,然後將應用程序的主題設置如下:
<style name="MainTheme" parent="Theme.AppCompat.DayNight">
爲了更好地說明Telerik Xamarin控件響應淺色/深色主題更改的能力,我將使用下面的快速示例。 簡而言之,這是一個簡單的預訂表格,其中使用了我們的一些組件,即DatePicker、NumericInput、AutoCompleteView和Button:
<Grid BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"> <StackLayout Margin="16, 40, 16, 0"> <Label Text="Welcome back, Joe" TextColor="#B73562" FontSize="20" Margin="0,0,0,24" /> <Label Text="Schedule a Trip:" TextColor="{AppThemeBinding Light=Black, Dark=Default}" FontSize="15" FontAttributes="Bold" Margin="0, 0, 0, 21" /> <Label Text="When do you want your vacation to start?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" /> <telerikInput:RadDatePicker x:Name="FromDate" MinimumDate="{Binding MinDate}" MaximumDate="{Binding MaxDate}" Date="{Binding StartDate}" Placeholder="Select a date" Margin="0,10"/> <Label Text="How long do you plan your vacation to be?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" /> <StackLayout Orientation="Horizontal" HeightRequest="25" Margin="0,10"> <telerikInput:RadNumericInput x:Name="daysNumber" WidthRequest="200" /> <Label Text="days" TextColor="{AppThemeBinding Light=Black, Dark=Default}" /> </StackLayout> <Label Text="Where would you like to travel?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" /> <telerikInput:RadAutoCompleteView Watermark="Choose a destination" ItemsSource="{Binding Destinations}" Margin="0,10" /> <telerikInput:RadButton Text="Search" CornerRadius="20" Padding="10,5,10,5" BorderColor="#B73562" BorderWidth="1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="200" HeightRequest="40" TextColor="#B73562" FontSize="15" BackgroundColor="Transparent" /> </StackLayout> </Grid>
在示例中,爲Xamarin使用了AppThemeBinding。Forms標籤爲TextColor和Grid BackgroundColor,因此它們將根據Dark / Light主題更改進行更新。
這是使用常規系統外觀(不切換爲暗模式)在Android和iOS上得到的結果:
如果應用程序用戶更喜歡深色模式的外觀,則相同的預訂表單將切換爲深色調色板,而無需您付出任何額外的努力: