Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Como Codificar uma Tela de Configurações em um App Android

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by Luis Drum (you can also view the original English article)

Final product image
What You'll Be Creating

A equipe de material design da Google dá uma definição clara do que as configurações devem fazer em seu app Android :

As configurações do aplicativo permitem que os usuários indiquem as preferências de como um aplicativo deve se comportar.

No Google também afirmam que os usuários devem navegar até as configurações do app através da navegação lateral ou do menu da barra de ferramentas — com um item etiquetado Configurações.

Incluir as configurações em seu aplicativo dá aos usuários o poder de controlar algumas das funcionalidades do seu aplicativo. Isto faz seus usuários felizes em vez de zangados — porque eles agora estão no controle de como o aplicativo se comporta.

É altamente recomendado dar acesso às configurações do app. Isto proporcionará uma melhor experiência de usuário para os seus usuários, que leva a uma melhor análise na Google Play store, que então eventualmente gera um maior número de downloads do app (que aumentará as receitas).

Eu suponho que você deve ter interagido com configurações de um aplicativo em seu dispositivo, por exemplo, selecionando um ringtone padrão, ou controlando sua privacidade no app. Quase todos os apps mais populares que você baixou ou irá fazer o download na loja do jogo Google incluem um tela de configurações para controlar o comportamento do aplicativo.

Um exemplo de um aplicativo popular que tem uma tela de configurações é o app Android Chrome do Google. Na tela de configurações deste app, os usuários podem escolher o mecanismo de busca padrão, alterar o comportamento de notificações, controlar a privacidade do usuário, etc. Você mesmo pode ver isso baixando o Chrome app da loja  Google Play (se já não o tiver no seu dispositivo). A seguinte captura de tela é o aplicativo Chrome, exibindo a tela de configurações do aplicativo.

Screenshot of Chrome app settings screen

Neste post, você vai aprender como criar uma tela de configurações de aplicativo a partir do zero e também como ler os valores que o usuário tiver selecionado nas configurações do app. Para um bônus adicional, você também vai aprender como usar o recurso de modelos do Android Studio para iniciar rapidamente seu projeto com uma tela de configurações.

Um projeto de exemplo (em Kotlin) para este tutorial pode ser encontrado em nosso repositório GitHub, assim você pode acompanhar facilmente.

Pré-requisitos

Para ser capaz de seguir este tutorial, você vai precisar:

1. Criar um Projeto Android Studio

Inicie o Android Studio e crie um novo projeto (você pode nomeá-lo SettingsScreenDemo) com uma atividade vazia chamada SettingsActivity. Certifique-se também de marcar a caixa de seleção Include Kotlin support.

Android Studio create project screen

2. Criar um PreferenceFragment

Para suportar a API de nível 11 (Honeycomb) e acima, devemos usar o PreferenceFragment. Essa classe é simplesmente um Fragment que mostra uma hierarquia de objetos de Preference como listas.

No código acima, criamos uma classe aninhada SettingsFragment dentro de SettingsActivity (porque a classe SetttingsFragment é tão pequena). Observe que nossa classe SettingsFragment estende a superclasse PreferenceFragment e tem um método addPrerenceFromResource dentro de onCreate(). Neste método, demos-lhe um recurso ID R.xml.preference de preferência XML para iniciar — quando o Fragment é carregado. Finalmente, nós hospedamos o Fragmento na atividade simplesmente usando o FragmentTransaction para adicioná-lo à UI — dentro de onCreate() de SettingsActivity.

3. Criando Nossas Preferências

Crie um arquivo XML e denomine-o preferences.xml. Salve este arquivo dentro do diretório res/xml em seu projeto de app. Observe que você pode dar qualquer nome para esse arquivo, mas é altamente recomendado ficar com o nome convencional "preferences". Além disso, você normalmente deve ter apenas um desses arquivos em um projeto de aplicativo.

O nó de raiz para nosso arquivo preferences.xml deve ser um elemento <PreferenceScreen>. Dentro do elemento raiz, agora temos nossa Preference individual. Aqui estão os atributos comuns associados com uma Preference:

  • android:key: Este atributo é usado para obter o valor no objeto SharedPreferences.
  • android:title: define o título para Preference. Este é o texto em negrito.
  • android:summary: define o sumário para a Preference (isso não é obrigatório). Este é o texto desbotado abaixo do título.
  • android:defaultValue: define o valor padrão para a Preference.

Nós vamos passar por cada Preference que definimos acima brevemente. Note que você também pode adicionar ou personalizar uma Preference através do editor de preferências do Android Studio— semelhante ao editor de recursos de layout com o qual você já está familiarizado. Você pode optar por adicionar/editar seu arquivo XML de preferências diretamente no modo de "Texto" ou usar a interface de usuário arrastar e soltar no modo "Design".

Android Studio preference editor

Como você pode ver, neste editor, você pode arrastar e soltar qualquer Preference na seção de paleta (no lado esquerdo). Uma vez solto, você deve selecioná-lo e modificar seus atributos no painel de atributos (do lado direito) do editor. Observe que, por padrão, recebemos alguns atributos para modificar. Para ver ou modificar todos os atributos associados a uma Preference selecionada, certifique-se de que clicar no link View all attributes na parte inferior do painel de atributos. Isto é muito semelhante ao editor de layout que você já conhece.

Agora, vamos rever cada uma das entidades de Preference que temos.

Preferência de CheckBox

Um CheckBoxPreference é simplesmente um controle CheckBox que está incluído na tela de preferência. Esta Preference retorna o valor "true" se marcado ou "falso" caso contrário. Em outras palavras, ele retorna um boolean dependendo do estado do controle.

CheckBoxPreferense

Outros atributos que você pode adicionar a um CheckBoxPreference são:

  • android:summaryOff: define o resumo para a Preference em uma tela de preferências quando está desmarcada.
  • android:summaryOn: define o resumo para a Preference em uma tela de preferências quando estiver marcado.
  • android:disableDependentsState: O estado (true for on ou false for off) que faz com que os dependentes sejam desabilitados. Pode ser um valor booleano, como "true" ou "false".

Alternar Preferência

SwitchPreference executa uma funcionalidade semelhante  a CheckBoxPreference. Ele fornece uma opção alternável  de dois estados ("ligada" ou "desligada"). Isto usa um controle de Switch que permite que o usuário deslize para a esquerda ("desligado") e para a direita ("ligado"). Esta Preference também inclui os atributos descritos para o CheckBoxPreference acima. Além disso, tem os seguintes atributos:

  • android:switchTextOff: define o texto usado no próprio switch quando no estado "desligado".
  • android:switchTextOn: define o texto usado no próprio switch quando no estado "ligado" .
SwitchPreference

Preferência EditText 

Esta Preference, quando clicada, mostra uma caixa de diálogo para o usuário inserir um texto. Ele usa o widget EditText — incluindo todos os atributos desse widget com os quais você já está familiarizado.

Observe que o valor armazenado em SharedPreferences é uma sequência de caracteres.

EditTextPreference

Lista de Preferências

Esse tipo de preferência exibirá uma lista de entradas em uma caixa de diálogo quando tocada. Aqui, você pode especificar um par de recursos de matriz de string em seu XML preference. Este recurso de matriz de string simplesmente contém uma coleção de sequências de caracteres. Este recurso está localizado em res/values/arrays.xml.

Aqui está nossa amostra ListPreference usando este recurso.

Podemos definir as entradas e os valores de entrada usando os atributos de android:entries e android:entryValues, respectivamente.

  • android:entries: a matriz legível para ser apresentada como uma lista.
  • android:entryValues: a matriz para encontrar o valor a ser salvo em uma preferência quando uma entrada das entradas é selecionada.
ListPreference dialog when clicked

Por exemplo, se usarmos o número de minutos em cada duração como valores de entrada, quando o usuário escolher uma duração de tempo (por exemplo, 30 minutos), o valor inteiro correspondente será armazenado em SharedPreferences (por exemplo, 30).

Lista de Preferências MultiSelect

Este é semelhante ao ListPreference, mas em vez de botões de rádio, temos caixas de seleção. Em outras palavras, o usuário pode selecionar vários itens na caixa de diálogo. Observe que o resultado é armazenado em um "string set" em SharedPreferences. Ele pode ser recuperado usando getStringSet().

Preferência de Ringtone

Quando um RingtonePreference é tocado, uma caixa de diálogo é mostrada contendo a lista de ringtones disponíveis no dispositivo ou emulador.

  • android:showDefault: se a opção de Default ringtone será mostrada.
  • android:showSilent: se uma opção Silent aparece na lista. O usuário pode selecionar esta opção, se não quer tocar qualquer ringtone.
RingtonePreference

Observe que o valor armazenado em SharedPreferences para esta preferência é uma sequência de caracteres especial. Essa sequência de caracteres especial é um URI que aponta para um ContentProvider.

4. Criando Grupos de Configurações

Torna-se um problema quando você tem uma longa lista de preferências ou configurações, porque os usuários podem ter alguns problemas para percorrer ou compreendê-los. Para resolver este problema, podemos agrupar as nossas preferências. Olhe para a captura de tela do app Chrome que mostrei no começo novamente — perceba as preferências agrupadas as  em duas categorias: Basics e Advanced. Isto torna mais fácil para o usuário compreender as preferências e não faz a lista parecer demasiado esmagadora.

Vamos agora ver como é simples executar essa tarefa.

Nós simplesmente cercamos as preferências que desejamos agrupar em uma <PreferenceCategory> tag e damos a cada grupo um título usando o atributo android:title.

Preferences grouped with PreferenceCategory

5. Iniciar uma Intent

Note que é possível abrir uma atividade apenas clicando em um item de preferência a partir da tela de configurações. Isto pode vir a calhar quando você quer abrir uma página da web. Aqui está o código para fazer isso:

Aqui, nós adicionamos um elemento <intent> dentro do elemento  <Preference>.

  • android:action: define a ação para a Intent (isto é semelhante a chamar setAction() em um objeto de Intent).
  • android:targetClass: define a parte da classe do nome do componente (o mesmo que chamar setComponent() em um objeto Intent).
  • android:targetPackage: define a parte do pacote do nome do componente.
  • android:data: define os dados para atribuir (o mesmo que chamar setData() em um objeto Intent).

Para abrir uma página da web, por exemplo, você poderia usar o seguinte:

6. Ligar o Sumário de Preferências ao Valor Selecionado

Vejamos agora como atualizar Resumo de Preferências com o valor selecionado pelo usuário.

Nesta classe, criamos um método auxiliar chamado bindPreferenceSummaryToValue(), que fica dentro de nosso objeto companheiro, para atualizar o texto do sumário de preferências com o valor selecionado pelo usuário. Nós passamos um objeto Preference como um argumento. O findPreference() retornará uma Preference usando a chave de Preference.

Temos uma variável sBindPreferenceSummaryToValueListener que é uma instância de Preference.OnPreferenceChangeListener. Isto é simplesmente um ouvinte de alterações de preferências que nos ajudará a atualizar o sumário de preferências para o valor selecionado pelo usuário. Verificamos para casos especiais, como quando a preferência selecionada é um RingtonePreference ou um ListPreference. Para esses tipos de preferência, fazemos algum tratamento especial para obter a sequência de caracteres do resumo. Se a preferência não é nenhum dos dois (como um EditTextPreference), nós apenas definimos o sumário para o  valor da sequência de caracteres da preferência.

Dentro do bindPreferenceSummaryToValue(), definimos o ouvinte de alterações de preferência chamando onPreferenceChangeListener (em Java, é setOnPreferenceChangeListener em vez disso) no objeto Preference.

Agora execute o projeto novamente para ver como tudo funciona!

Settings screen showing changed summary in response to selection

7. Recuperando Valores de Preferências

Para iniciar a obtenção de valores de preferência para a tela de configurações, chamamos getDefaultSharedPreference() que está dentro da classe PreferenceManager — passando um objeto Context das preferências cujos valores são desejados. Note que  obtemos os valores de SharedPreferences padrão para nossa aplicação.

Você chama o método getter correspondente para o tipo do qual queremos recuperar o valor em SharedPreferences. Você passa a chave como o primeiro argumento e o valor padrão é o segundo argumento.

8. Bônus: Usando Modelos do Android Studio

Agora que você aprendeu sobre APIs envolvidas para criar uma tela de configurações do zero no Android, eu vou te mostrar um atalho que irá tornar isso mais rápido da próxima vez. Você pode optar por usar um modelo em vez de codificar uma tela de configurações a partir do princípio.

Android Studio fornece modelos de código que seguem as  práticas recomendadas de design e desenvolvimento Android. Esses modelos de código existente (disponíveis em Java e Kotlin) podem ajudá-lo a começar seu projeto rapidamente. Um  modelo destes pode ser usado para criar uma tela de configurações.

Para usar este recurso útil para um novo projeto, primeiro inicie o Android Studio.

Android Studios Create Android Project dialog

Digite o nome do aplicativo e clique no botão Next. Você pode deixar os padrões que estão na caixa de diálogo Target Android Devices.

Clique no botão Next novamente.

Android studios Add an Activity to Mobile dialog

Na caixa de diálogo Add an Activity to Mobile, role para baixo e selecione Settings Activity. Clique no botão Next depois disso.

Android Studios Configure Activity dialog

No último diálogo, você pode renomear a Activity, nome de layout ou título se quiser. Finalmente, clique no botão Finish para aceitar todas as configurações.

 Android Studio agora nos ajudou a criar um projeto com uma atividade de configurações. Muito legal! É altamente aconselhável explorar o código gerado.

Você também pode usar modelos para um projeto Android Studio já existente. Basta ir ao File > New > Activity > Settings Activity.

Navigation flow to creating a new settings activity in Android Studio

Observe que os modelos que vem incluídos com o Android Studio são bons para layouts simples e fazer apps básicas, mas se você quiser realmente começar seu app, você pode considerar alguns dos modelos de apps disponíveis do mercado Envato Market.

Eles são uma enorme economia de tempo para os desenvolvedores experientes, ajudando-os a cortar a parte mais fatigante de criar um app do zero e a concentrar seus talentos nas partes exclusivas e personalizadas da criação de um novo aplicativo.

Conclusão

Neste tutorial, você aprendeu como criar configurações de app no Android a partir do zero. Nós também exploramos como rapidamente e facilmente usar os modelos do Android Studio  para criar configurações do app.

Eu recomendo verificar as diretrizes oficiais de design material para configurações para aprender mais sobre como usar configurações no Android e projetar corretamente. Além disso, confira o guia de API oficial para saber mais sobre outras APIs para criação de uma atividade de configurações.

Para saber mais sobre a codificação para Android, confira alguns de nossos outros cursos e tutoriais aqui na Envato Tuts+!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.