原創(chuàng)|使用教程|編輯:龔雪|2021-03-29 10:20:08.067|閱讀 308 次
概述:Telerik UI for Xamarin能幫助開發(fā)人員快速構建跨平臺移動應用的原生UI,本文主要為大家介紹如何使移動應用支持暗黑主題。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Telerik UI for Xamarin能幫助開發(fā)人員快速構建跨平臺移動應用的原生UI。Telerik UI for Xamarin使用Xamarin.Forms技術,它可以讓開發(fā)人員從一個單一的共享C#代碼庫中創(chuàng)建原生的iOS、Android和Windows Phone應用程序。不僅如此,UI for Xamarin建立在iOS和Android的原生控件之上的,為Xamarin用戶的應用程序提供真正的原生UI。
對用戶的眼睛更加友好、節(jié)省電量或僅是偏好,無論是什么原因,身為移動開發(fā)人員,您可能已經考慮過為應用提供黑暗模式。
Telerik技術團隊旨在提高工作效率,因此在本年度的第一個發(fā)行版(R1 2021)中,為Telerik Xamarin控件引入對暗黑模式的支持。簡而言之,這意味著現在我們的控件將響應iOS和Android設備上的明暗模式更改,而無需分別設置樣式。
iOS和Android的暗黑模式功能基本上是標準系統(tǒng)外觀的一種附加模式,在該系統(tǒng)中,操作系統(tǒng)的所有元素均以專業(yè)設計的深色調色板設置樣式。 移動平臺供應商已設計了深色主題,因此可以完美地勾勒出前臺內容的輪廓,并且還支持所有輔助功能。 使用深色主題的好處是:
事實證明,移動用戶對使用深色主題有很大的興趣,我們認為支持該主題的控件將是對該套件的寶貴補充。 從R1 2021版本開始,切換設備模式時,Telerik UI for Xamarin控件將自動使用較暗的主題調色板。
在iOS和Android上更詳細地檢查暗黑模式功能。
對于iOS,此功能是在v 13中引入的。移動設備的“設置”中有一個選項,因此用戶可以選擇深色主題 - 這將為系統(tǒng)以及所有正在運行的應用程序設置深色調色板,通常用戶希望所有應用程序都尊重其系統(tǒng)偏好。
自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主題更改進行更新。
這是使用常規(guī)系統(tǒng)外觀(不切換為暗模式)在Android和iOS上得到的結果:
如果應用程序用戶更喜歡深色模式的外觀,則相同的預訂表單將切換為深色調色板,而無需您付出任何額外的努力:
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都網