Mobile

25 fev, 2019

O X do Xamarin Forms – 5 dicas para Xamarin.iOS

Publicidade

Fala, galera! Beleza?

Há um tempo eu publiquei um artigo chamado “5 Dicas para Xamarin.Android“, ajudando a fazer algumas customizações interessantes no Android – inclusive se você utiliza Xamarin.Forms.

Hoje trago cinco dicas para Xamarin.iOS, muito úteis em algumas situações ou para turbinar o projeto.

Sem mais delongas, vamos à elas!

1. Disclosure

Não, isso não é um prato francês. Disclosure é aquela “setinha” (indicador) que demonstra em um Listview que se o item for tocado, uma navegação é feita:

Como é uma particularidade do iOS, não existe no Xamarin.Forms. Porém, graças a um custom renderer, é extremamente simples de implementar. Primeiro criaremos o custom renderer StandardViewCellRenderer:

using Xamarin.Forms;
using Expo.iOS;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ViewCell), typeof(StandardViewCellRenderer))]
namespace Expo.iOS
{
    public class StandardViewCellRenderer : ViewCellRenderer
    {

        public override UIKit.UITableViewCell GetCell (Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
        {
            var cell = base.GetCell (item, reusableCell, tv);
            switch (item.StyleId) {
            case "none":
                cell.Accessory = UIKit.UITableViewCellAccessory.None;
                break;
            case "checkmark":
                cell.Accessory = UIKit.UITableViewCellAccessory.Checkmark;
                break;
            case "detail-button":
                cell.Accessory = UIKit.UITableViewCellAccessory.DetailButton;
                break;
            case "detail-disclosure-button":
                cell.Accessory = UIKit.UITableViewCellAccessory.DetailDisclosureButton;
                break;
            case "disclosure":
            default:
                cell.Accessory = UIKit.UITableViewCellAccessory.DisclosureIndicator;
                break;
            }
            return cell;
        }

    }
}

Certo, em seguida, em nossa ViewCell adicionaremos o StyleId: <ViewCell StyleId=”disclosure”>:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:DicasXamariniOS" 
             x:Class="DicasXamariniOS.MainPage" Padding="0,40,0,0">
   <StackLayout>
        <ListView x:Name="lvwUsers" 
            SeparatorVisibility="Default" 
            ItemsSource="{Binding Users}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell StyleId="disclosure">
                            <StackLayout Orientation="Vertical" Padding="20,0,20,0">
                                <Label Text="{Binding Name}" FontSize="17" ></Label>
                            </StackLayout>
                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Pronto! Vejam só:

Com esse mesmo renderer temos outros StyleIds como, por exemplo, checkmark.

Muito útil, não?

2. ViewCell SelectionStyle

Mudar a cor selecionada de um ListView não é novidade para ninguém. Porém, você já quis deixar transparente (ou sem cor, no caso)? Existe um custom renderer que é uma mão na roda para isso:

[assembly: ExportRenderer(typeof(ViewCell), typeof(ViewCellTransparent))]
namespace DicasXamariniOS.iOS
{
    public class ViewCellTransparent : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);
            if (cell != null)
            {
                // Disable native cell selection color style - set as *Transparent*
                cell.SelectionStyle = UITableViewCellSelectionStyle.None;
            }
            return cell;
        }
    }
}

Pronto, se você executar vai ver que não existe mais cor quando o usuário toca na celula.

Warning: Se quiser utilizar esse custom renderer com o anterior, recomendo que junte os dois, pois um acaba sobrepondo o outro.

3 . Alterar a Status Bar

É possível customizar a status bar do seu app para que ela pareça fazer parte do mesmo, muitas vezes para combinar com o tema, fundo e etc. Por padrão ela possui um texto preto, mas podemos deixá-la mais bonita.

Para isso, basta ir no AppDelegate e inserir as linhas:

UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);
UIApplication.SharedApplication.SetStatusBarHidden(false, false);

E no Info.Plist, as chaves:

Então temos:

O UIStatusBarStyle possui diversas opções. Basta escolher a que melhor atende ao tema do seu app:

4. Alterando as cores dos ícones selecionados da TabBar:

Por padrão, os ícones selecionados na TabBar são azuis. Porém, é possível alterá-los com uma linha simples no APPDelegate.cs:

UITabBar.Appearance.TintColor = UIColor.FromRGB(224, 111, 35);

Easy:

5. Removendo linhas extras do seu ListView

Por fim, um “hack”, caso você queira remover aquelas linhas extras do seu ListView quando o Forms roda no iOS. Basta definir o valor do Footer como vazio:

Então:

São dicas simples, mas que podem quebrar um galho.

Claro que para algumas dessas dicas existem outras formas de se fazer – apenas estou mostrando uma maneira simples.

Caso queira baixar o código utilizado no exemplo, clique aqui.

Quer ver outros artigos sobre Xamarin? Acesse este link.

Espero ter ajudado. Aquele abraço!