Clever Geek Handbook

Temas de aplicativos para Xamarin.Forms

Todos os principais sistemas operacionais agora oferecem suporte a temas de aplicativos claros e escuros, e o Xamarin.Forms 4.7 foi lançado para facilitar a adição desse recurso aos seus aplicativos. Na verdade, se vocĂȘ nĂŁo fizer nada, seus aplicativos Xamarin.Forms corresponderĂŁo Ă s preferĂȘncias do sistema operacional do usuĂĄrio. Por que parar aĂ­? VocĂȘ tambĂ©m pode personalizar as cores claras e escuras usadas na IU do seu aplicativo e atĂ© mesmo permitir que o usuĂĄrio controle o tema do aplicativo. Vamos começar no inĂ­cio.







Cores de plataforma padrĂŁo



Quando vocĂȘ nĂŁo define estilos ou cores, sua interface de usuĂĄrio assumirĂĄ como padrĂŁo o tema nativo da plataforma em que o aplicativo estĂĄ sendo executado. Por exemplo, esta Ă© a aparĂȘncia deste novo modelo de aplicativo em branco no iOS: 



<StackLayout>
            <Frame BackgroundColor="#2196F3" Padding="36,48,36,36" CornerRadius="0">
                <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36" />
            </Frame>
            <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
            <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0" />
            <Label FontSize="16" Padding="30,24,30,0">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Learn more at " />
                            <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>






Ao alternar o simulador iOS entre os modos claro e escuro (CMD + SHFT + A), vocĂȘ pode ver o fundo da pĂĄgina de conteĂșdo mudar de branco para preto e o texto de preto para branco. Estas sĂŁo as cores padrĂŁo da plataforma. Compare isso com o tĂ­tulo, que permanece azul, e o texto do tĂ­tulo, que permanece branco. Estas sĂŁo as cores explĂ­citas definidas no cĂłdigo.



Assumindo o controle do preto



Para controlar agora as cores do tĂ­tulo e do texto claro e escuro, vocĂȘ pode substituir as cores estĂĄticas pelo AppThemeBinding, que reagirĂĄ em tempo de execução Ă s configuraçÔes do tema do sistema operacional. Primeiro, habilite esse recurso adicionando um sinalizador ao seu App.xaml.cs: 



public App()
{
    Device.SetFlags(new string[]{ "AppTheme_Experimental" });

    InitializeComponent();
}


Atualização apenas do cabeçalho, fica assim: 



<Frame BackgroundColor="{AppThemeBinding Dark=#2196F3, Light=#2196F3}" Padding="36,48,36,36" CornerRadius="0">
                <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="{AppThemeBinding Dark=DarkBlue, Light=White}" FontSize="36" />
            </Frame>






Claro, vocĂȘ pode alterar os estilos aqui: 



<ContentPage.Resources>
    <Style x:Key="HeaderBg" TargetType="Frame">
        <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark=#1d1d1d, Light=#2196F3}"/>
        <Setter Property="Padding" Value="36,48,36,36"/>
        <Setter Property="CornerRadius" Value="0"/>
    </Style>

    <Style x:Key="HeaderTitle" TargetType="Label">
        <Setter Property="TextColor" Value="{AppThemeBinding Dark=#F1F1F1, Light=White}"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="36"/>
    </Style>
</ContentPage.Resources>

<Frame Style="{StaticResource HeaderBg}">
    <Label
        Style="{StaticResource HeaderTitle}"
        Text="Welcome to Xamarin.Forms!" />
</Frame>


E se vocĂȘ quiser usar estilos de cores predefinidos, pode ser assim: 



<Color x:Key="Background_Dark">#1d1d1d</Color>
<Color x:Key="Background_Light">#1d1d1d</Color>
<Style x:Key="HeaderBg" TargetType="Frame">
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Background_Dark}, Light={StaticResource Background_Light}}"/>


Dar ao usuĂĄrio uma escolha



Às vezes, vocĂȘ pode querer dar ao usuĂĄrio controle sobre o tema em vez de confiar no tema do sistema operacional. Para fazer isso, vocĂȘ sĂł precisa fornecer uma maneira de instalar App.Current.UserAppTheme como esta: 



App.Current.UserAppTheme = OSAppTheme.Dark;






Em seguida, para redefinir o aplicativo para que ele responda automaticamente Ă s alteraçÔes do tema do sistema operacional, vocĂȘ pode defini-lo como "NĂŁo especificado": 



App.Current.UserAppTheme = OSAppTheme.Unspecified;


Agora crie a experiĂȘncia descrita acima e adicione trĂȘs caixas de seleção Ă  sua interface: "padrĂŁo", "escuro" e "claro". 



<StackLayout Orientation="Horizontal" Spacing="10">
    <CheckBox IsChecked="{Binding UseDeviceThemeSettings}" VerticalOptions="Center" />
    <Label Text="Use device settings"
            VerticalOptions="Center"/>
</StackLayout>

<StackLayout
    IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
    Orientation="Horizontal"
    Spacing="10">
    <CheckBox IsChecked="{Binding UseDarkMode}" VerticalOptions="Center"/>
    <Label Text="Dark Theme"
            VerticalOptions="Center"/>
</StackLayout>

<StackLayout
    IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
    Orientation="Horizontal"
    Spacing="10">
    <CheckBox IsChecked="{Binding UseLightMode}" VerticalOptions="Center"/>
    <Label Text="Light Theme"
            VerticalOptions="Center"/>
</StackLayout>


Em seguida, adicione propriedades pĂșblicas ao BindingContext para a pĂĄgina, caso em que a pĂĄgina lida com seu prĂłprio estado. 



public MainPage()
{
    BindingContext = this;
    InitializeComponent();
}

private bool _useDarkMode;
public bool UseDarkMode {
    get {
        return _useDarkMode;
    }
    set {
        _useDarkMode = value;
        if(_useDarkMode)
        {
            UseLightMode = UseDeviceThemeSettings = false;
            App.Current.UserAppTheme = OSAppTheme.Dark;
        }

    }
}

private bool _useLightMode;
public bool UseLightMode
{
    get
    {
        return _useLightMode;
    }
    set
    {
        _useLightMode = value;
        if (_useLightMode)
        {
            UseDarkMode = UseDeviceThemeSettings = false;
            App.Current.UserAppTheme = OSAppTheme.Light;
        }
    }
}

private bool _useDeviceThemeSettings = true;
public bool UseDeviceThemeSettings
{
    get
    {
        return _useDeviceThemeSettings;
    }
    set
    {
        _useDeviceThemeSettings = value;
        if(_useDeviceThemeSettings)
        {
            App.Current.UserAppTheme = OSAppTheme.Unspecified;
        }
    }

}


O cĂłdigo acima alterna entre escuro e claro de acordo com a preferĂȘncia do usuĂĄrio no aplicativo e, em seguida, alterna entre a preferĂȘncia do usuĂĄrio e a preferĂȘncia do tema do sistema operacional.



Embrulho!



Este novo auxiliar de modo claro e escuro AppThemeBinding, junto com UserAppTheme, torna mais fåcil trabalhar com modos escuros em seus aplicativos Xamarin.Forms. Isso funciona não apenas para cores, mas também para imagens e outros recursos. Conforme mostrado anteriormente, ele funciona até mesmo com os novos formulårios e caminhos adicionados no Xamarin.Forms 4.7!







Para obter mais informaçÔes sobre temas de aplicativos, verifique a documentação sobre mudanças de temas do sistema. Se vocĂȘ quiser ir ainda mais longe do que os temas escuros e claros, tente usar recursos dinĂąmicos e atĂ© mesmo carregar temas em tempo de execução para criar temas em seus aplicativos.


More articles:


All Articles