移動應用界面開發利器——這個第三方控件支持暗黑主題

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上得到的結果:

移動應用界面開發利器——Telerik UI for Xamarin支持暗黑主題

如果應用程序用戶更喜歡深色模式的外觀,則相同的預訂表單將切換爲深色調色板,而無需您付出任何額外的努力:

移動應用界面開發利器——Telerik UI for Xamarin支持暗黑主題

瞭解最新Kendo UI最新資訊,請關注Telerik中文網!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章