Interface de Usuários - Tabs, Navegação Drop-Down e Styling

Adicionando Tabs

A Action Bar pode mostrar tabs que permitem ao usuário navegar entre diferentes fragmentos em uma atividade. Cada tab pode incluir um título e/ou ícone.

Para começar, seu layout deve incluir uma view em que cada fragmento associado com a tab é mostrado. Esteja certo de que a View tenha um ID para ser referenciada no seu código.

Mas o que é fragmento?


De maneira rápida, já que isso será assunto para outro post, o fragmento é um pedaco de uma interface de usuário ou comportamento que pode ser colocado em uma atividade. Ou seja, se antes sua tela era composta apenas por um único XML com todas as informações, agora pode ser quebrada em vários pedaços e juntado, dando maior flexibilidade e reuso das informações.

Para adicionar Tabs na Action Bar:

1. Crie uma implementação de ActionBar.TabListener para lidar com os interações nas tabs da Action Bar. Você deve implementar todos os métodos: onTabSelected(), onTabUnselected() e onTabReselected().

Cada método de callback passa o ActionBar.Tab que recebeu o evento para um FragmentTransaction para que você possa executar a transação do fragmento (adicionar ou remover um fragmento)

private class MyTabListener implements ActionBar.TabListener {
    private TabContentFragment mFragment;
    // Called to create an instance of the listener when adding a new tab
    public TabListener(TabContentFragment fragment) {
        mFragment = fragment;
    }
    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        ft.add(R.id.fragment_content, mFragment, null);
    }
    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        ft.remove(mFragment);
    }
    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // do nothing
    }
}

Essa implementação da ActionBar.TabListener adiciona um construtor que salva o fragmento associado com a tab para que cada callback possa adicionar ou remover o fragmento.

2. Capture a Action Bar de sua atividade chamando o método getActionBar() durante o onCreate (mas tenha a certeza de fazê-lo apenas depois que você fez a chamada em setContentView()).

3. Chame setNavigationMode(NAVIGATION_MODE_TABS) para dispobilizar o modo de tab para a ActionBar.

4. Crie cada tab para a Action Bar.

1. Crie uma nova ActionBar.Tab chamando newTab() na ActionBar()
2. Adicione um título e/ou ícone para a tab chamando setText() e/ou setIcon().
   Dica: Esses métodos retornam a mesma instância de ActionBar.Tab para que você possa fazer as chamadas em conjunto.
3. Declare a ActionBar.TabListener a ser usada na tab passando uma instância de sua implementação de setTabListener().

5. Adicione cada ActionBar.Tab para a Action Bar chamando addTab() em ActionBar e passando a ActionBar.Tab.

Por exemplo, o código seguinte combina os passos 2-5 para criar duas tabs e adicioná-las à Action Bar:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); 

    // configura a Action Bar para as tabs
    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

    // Remove o título da atividade para dar espaço para as tabs
    actionBar.setDisplayShowTitleEnabled(false); 

    // Instancia o fragmento na tab
    Fragment artistsFragment = new ArtistsFragment(); 

    // Adiciona uma nova tab e configura seu título e tab listener
    actionBar.addTab(actionBar.newTab().setText(R.string.tab_artists)
            .setTabListener(new TabListener(artistsFragment)));
    Fragment albumsFragment = new AlbumsFragment();
    actionBar.addTab(actionBar.newTab().setText(R.string.tab_albums)
            .setTabListener(new TabListener(albumsFragment)));
}

Todos esses comportamentos que ocorrem quando uma tab é selecionada devem ser definidos por seu método ActionBar.TabListener. Quando uma tab é selecionada, ela recebe a chamada para onTabSelected() e é onde você deverá adicionar o fragmento apropriado para a view designada em seu layout, usando add() com o FragmentTransaction provido. Da mesma maneira, quando uma tab deixa de estar selecionada (quando uma outra tab se torna selecionada), você deve remover o fragmento do layout, usando remove().

Cuidado: Você NÃO deve chamar commit() para essas transações - o sistema faz as chamadas por você e dará uma exceção se você fizer a chamada. Você NÃO pode adicionar essas transações de fragmentos à pilha de processos.

Se sua atividade está parada, você deve guardar a tab seleciona com o estado salvo para que quando o usuário retorne à sua aplicação, você possa abrir a tab. Quando é hora de salvar um estado, você pode conseguir o índice da tab selecionada com getSelectedNavigationIndex(). Esse método retorna o índice de posição da tab selecionada.

Cuidado: É importante que você salve o estado de cada fragmento quando necessário, para que quando o usuário volte para uma determinada tab, ele seja mostrado da maneira como foi deixada. Como fazer essa salva de estado será um tópido dentro do post sobre Fragmentos.

Adicionando Navegação Drop-Down

Como um outro meio de navegação dentro da sua atividade, você pode prover uma lista drop-down em sua Action Bar. Por exemplo, a lista drop-down pode prover modos alternativos para listar o conteúdo da atividade.

Aqui está uma rápida lista de passos para disponibilizar a navegação drop-down:

1. Crie um SpinnerAdapter que provê a lista de itens selecionáveis para o drop-down e o layout para usar quando desenhar cada item da lista.
2. Implemente o método ActionBar.OnNavigationListener para definir o comportamento quando o usuário seleciona um item da lista.
3. Faça com que o modo de navegação esteja disponível para a Action Bar com o método setNavigationMode(). Lembre-se de fazer essa chamada durante o método onCreate. Por exemplo:
   
   ActionBar actionBar = getActionBar();
   actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
   
4. Configure o callback do drop-down com setListNavigationCallbacks(). Por exemplo:
   
   actionBar.setListNavigationCallbacks(mSpinnerAdapter, mNavigationCallback);

Essa é a configuração básica. Contudo, implementar o SpinnerAdapter e ActionBar.OnNavigationListener faz com que quase todo o trabalho esteja pronto. 

Estilizando a Action Bar

A Action Bar é o cabeçalho de sua aplicação e o ponto de interação primário para os usuários, então você pode querer modificar alguns itens do design para que ele fique mais integrado ao design da sua aplicação. Existem diversas maneiras com as quais você pode fazer isso.

Para modificações simples da sua Action Bar, você pode usar os métodos abaixo:

setBackgroundDrawable()

Configura uma imagem (drawable) para ser usada como a imagem de fundo da Action Bar. A imagem deverá ser do tipo Nine-Patch, do tipo shape e ter uma cor sólida, para que possa ser redimensionada baseado no tamanho da Action Bar. Não use uma imagem bitmap de tamanho fixo.

setDisplayUseLogoEnabled()
Permite o uso de uma imagem alternativa (a logomarca da App) na Action Bar, ao invés do ícone padrão. Uma logomarca é normalmente mais larga, com mais detalhes representando a aplicação. Quando essa opção está disponibilizada, o sistema usa a imagem de logomarca definida na aplicação dentro do arquivo de manifesto, na propriedade android:logo. A logomarca será redimensionada se necessário para se adequar à altura da Action Bar.

A Action Bar tem dois temas padrão: dark e light. O tema dark é aplicado com o tema padrão holográfico, como especificado em Theme.Holo. Se você quer um fundo branco com letras negras, você pode usar Theme.Holo.Light dentro do arquivo de manifesto. 

<activity android:name=".ExampleActivity"

          android:theme="@android:style/Theme.Holo.Light" />

Para mais controle, você pode fazer um override no Theme.Holo ou Theme.Holo.Light e aplicar seus estilos customizados para certos aspectos da Action Bar. Algumas das propriedades da Action Bar que você pode customizar incluem:

android:actionBarTabStyle

Estilo para as tabs na Action Bar

android:actionBarTabBarStyle

Estilo para a barra que aparece abaixo das tabs na Action Bar

android:actionBarTabTextStyle

Estilo para o texto nas tabs

android:actionDropDownStyle

Estilo para o drop-down usado no meu flutuante e navegação drop-down.

android:actionButtonStyle

Estilo para a imagem de fundo usada para botões na Action Bar.

android:windowActionBar

Configure a propriedade para false para remover a Action Bar

android:windowNoTitle

Configure a propriedade para true para também remover a barra de título tradicional