Pesquisar este blog

segunda-feira, 26 de outubro de 2015

Criação de Uma App Android no Android Studio

Antes de iniciar o desenvolvimento de aplicativos baseados em Android, o primeiro passo é a criação de um ambiente de desenvolvimento adequado. Este consiste no Java Development Kit (JDK), SDKs Android e Android Studio IDE. Caso ainda não tenha criado este ambiente veja com criá-lo nas postagens anteriores.



Antes de passar para temas mais avançados, agora é um bom momento para validar que todos os pacotes de desenvolvimento necessários estão instalados e funcionando corretamente. A melhor maneira para atingir esse objetivo é criar um aplicativo Android compilar e executá-lo. 
Esta postagem vai cobrir a criação de um projeto simples de aplicativo Android usando o Android Studio. Uma vez que o projeto foi criado, em uma outra postagem, será explorado o uso do emulador Android para executar um teste de funcionamento do aplicativo.

Criando um novo projeto Android

O primeiro passo no processo de desenvolvimento de uma aplicação é a criação de um novo projecto dentro do Android Studio. Inicia-se, portanto, com a abertura do Android Studio para que a tela "Bem-vindo ao Android Studio" seja mostrada como ilustrado na Figura:



Uma vez que esta janela aparece o Android estúdio está pronto para criar um novo projeto. Basta clicar no Start a New Android Studio Project para exibir a primeira tela do assistente como mostrado na Figura:




A definição do projeto e Configurações SDK

Na janela New Project, defina o campo Nome do aplicativo para Android Sample. O nome do aplicativo é o nome pelo qual o aplicação será referenciada e identificada dentro do Estúdio Android e é também o nome que vai ser usado quando concluída e colocada à venda na loja Google Play. O nome do pacote é usado para identificar exclusivamente a aplicação dentro do ecossistema de aplicativos Android. Deve ser baseado na URL invertida de seu nome de domínio, seguido do nome do aplicativo. Por exemplo, se o seu domínio é www.minhaempresa.com, e a aplicação foi nomeada AndroidExemplo, em seguida, o nome do pacote pode ser especificado como segue: com.minhaempresa.androidExemplo A definição de local do projeto será o padrão para um lugar na pasta chamada AndroidStudioProjects localizados em seu diretório home e pode ser alterado clicando no botão à direita do campo de texto que contém a definição do caminho atual. Clique em Avançar para continuar. Na tela de fatores de forma, habilitar a opção de telefone e tablet e definir a configuração API do SDK mínimo 8: Android 2.2 (Froyo). A razão para a selecção de uma versão mais antiga SDK é que este assegura que a aplicação final será capaz de ser executada no maior número possível de dispositivos Android. Quanto maior for a selecção SDK mínimo, mais a aplicação será restrita a dispositivos Android mais recentes. Um gráfico útil pode ser visualizado clicando no link de Ajuda-me a escolher. este descreve as várias versões do SDK e os níveis de API disponíveis para uso e o percentual de dispositivos Android no mercado em qual o aplicativo será executado se que SDK é usado como o nível mínimo. Em geral, só deve ser necessário seleccionar uma SDK mais recente quando essa versão contém uma característica específica que é necessária para a sua aplicação. Para ajudar no processo de decisão, Selecionando um nível de API do gráfico mostrará os recursos que são suportados nesse nível.



 Desde que o projeto não se destine a Google TV ou dispositivos portáteis, deixar as opções restantes desativadas antes clicar em Avançar.

Criando uma Atividade 


O próximo passo é definir o tipo de atividade inicial que será criado para o aplicativo. A gama de diferentes tipos de atividades é disponível quando desenvolvimento de aplicações Android. A opção Fluxo Master / Detail será abordado posteriormente. Para o fins deste exemplo, no entanto, basta selecionar a opção para criar uma atividade em branco.




  Com a opção de Atividade em branco selecionada, clique em Avançar. Na tela final o nome da atividade e título AndroidSampleActivity. A atividade será composta de um layout de tela de interface de usuário única, que, para os fins deste exemplo, deve ser nomeado activity_android_sample como mostrado com um menu_android_sample recurso menu nomeados:


Modificando o Exemplo de Aplicação


Neste ponto o Android Estúdio criou um projeto de aplicação e abriu a janela principal.



O projeto recém-criado e as referências aos arquivos associados estão listados na janela Tool Project localizado no lado esquerdo da janela principal do projeto. A janela tool project tem um número de modos em que as informações podem ser exibidas. Por padrão, este painel será no modo Android. Essa configuração é controlada pelo menu drop-down no topo do painel como destaque na Figura abaixo. Se o painel não está em modo de Android, clique nesse menu e alternar para o modo Android.


O projeto exemplo criado quando selecionada a opção de criar uma atividade consiste em uma interface de usuário que contém um etiqueta que diz " Olá Mundo" quando o aplicativo é executado.

O próximo passo é modificar a interface do usuário do nosso aplicativo para que ele tenha uma maior exibição de texto com um objeto mensagem diferente do que o fornecido para nós pelo Android Studio. O design da interface do usuário para a nossa actividade é armazenado em um arquivo chamado activity_android_sample.xml que , por sua vez , encontra-se sob app -> res - > Layout na hierarquia de arquivo de projeto. Usando a janela da ferramenta Project, localize o arquivo como ilustrado na Figura:


Uma vez localizado, clique duas vezes no arquivo para carregá-lo na ferramenta User Interface Designer, que aparecerá no painel central do Android Estúdio na janela principal.



Na barra de ferramentas na parte superior da janela Designer é um menu definido como Nexus 4, que se reflete na representação visual do dispositivo dentro do painel de Designer. Uma vasta gama de outras opções do dispositivo estão disponíveis para seleção clicando neste menu. Para alterar a orientação da representação dispositivo entre paisagem e retrato simplesmente usar o menu drop-down imediatamente à direita do menu de seleção de dispositivo que mostra o ícone.

Como pode ser visto no ecrã do dispositivo, a disposição já inclui um rótulo que exibe uma mensagem "Hello Word". Correndo pelo lado esquerdo do painel é uma paleta contendo diferentes categorias de componentes de interface de utilizador que pode ser usado para construir uma interface de usuário, como botões, etiquetas e campos de texto. Deve notar-se, no entanto, que nem todos componentes da interface de utilizador são visíveis para o utilizador. Uma dessas categorias consiste em layouts.

O Android suporta uma variedade de diferentes layouts que proporcionam diferentes níveis de controle sobre como os componentes da interface do usuário visuais são posicionados e gerenciados na tela. O projeto foi criado usando um RelativeLayout. Isso pode ser confirmado pela revisão das informações no painel da árvore de componentes que, por padrão, está localizado no canto superior direito do painel de Designer e é mostrado na Figura:



Como podemos ver a partir da hierarquia da árvore de componentes, a interface do usuário consiste em um pai RelativeLayout com um único filho sob a forma de um objeto TextView. O primeiro passo para a alteração dos pedidos é para excluir o componente TextView do design. Comece clicando no TextView objeto dentro da interface de utilizador para que ele apareça com uma borda azul em torno dele. Uma vez selecionado, pressione delete Excluir no teclado para remover o objeto do layout. No painel Paleta, localize a categoria de Widgets. Clique e arraste o grande objeto de texto e solte-o no centro do usuário design de interface quando as linhas do marcador se mostrarem verdes para indicar o centro da tela:


A ferramenta Designer Android Studio também fornece uma alternativa para arrastar e soltar componentes da paleta para a disposição do projeto. Os componentes também podem ser adicionados, selecionando o objeto desejado a partir da paleta e, em seguida, basta clicar sobre a disposição no local onde o componente deve ser colocado. O próximo passo é mudar o texto que é exibido atualmente pelo componente TextView. Clique duas vezes no objeto no a disposição de projeto para exibir o painel de edição de texto e ID como ilustrado na Figura . Dentro do painel, altere a propriedade de texto a partir de "large text" para "Bem Vindo ao Android Studio".


Neste ponto é importante para explicar a lâmpada ao lado do objeto TextView no layout. Isso indica um possível problema e fornece algumas soluções recomendadas. Ao clicar no ícone, neste caso, informa-nos que o problema é o seguinte:
[I18N] Hardcoded string “Welcome to Android Studio”, should use @string resource
Esta mensagem de I18N está nos informando que existe um problema potencial com relação ao futuro internacionalização do projecto ("I18N" vem do fato de que a palavra "internacionalização" começa com um "eu", termina com um "N" e tem 18 letras entre eles). O alerta está nos lembrando que quando desenvolvimento de aplicações Android, atributos e valores como cadeias de texto deve ser armazenado sob a forma de recursos na medida do possível. Fazer isso permite alterações na aparência do aplicativo para ser feita pela modificação dos arquivos de recursos em vez de alterar o código fonte da aplicação. Isso pode ser especialmente valioso quando traduzindo uma interface de usuário para uma língua falada diferente. Se todo o texto em uma interface de usuário está contida em um único recurso arquivo, por exemplo, esse arquivo pode ser dado a um tradutor que, então, realizar o trabalho de tradução e retornar o arquivo traduzido para inclusão na aplicação. Isso permite que vários idiomas sejam alvo, sem a necessidade de qualquer alteração de código fonte para ser feito. Neste exemplo, vamos criar um novo recurso chamado welcomestring e atribuir a ele a string "Bem-vindo para Android Studio ". Clique na seta à direita da mensagem de aviso para exibir o menu de soluções possíveis:


A partir do menu, selecione a opção recurso de cadeia Extrair para exibir o diálogo Extract Resource. Neste diálogo, insira welcomestring para o nome de recurso: campo antes de clicar em OK. A seqüência de caracteres agora é armazenado como um recurso no aplicativo -> res -> valores -> arquivo strings.xml.

Revisar os Arquivos de Layout e de Recursos


Antes de passar para o próxima fase, vamos olhar para alguns dos aspectos internos de design de interface de usuário e recursos de manuseio. Na seção anterior, fizemos algumas mudanças na interface do usuário, modificando o arquivo activity_android_sample.xml usando a ferramenta UI Designer. Na verdade, tudo o que o Designer estava fazendo era fornecer uma maneira fácil de usar para editar o conteúdo subjacente do arquivo XML. Na prática, não há nenhuma razão para que você não possa modificar o XML diretamente, a fim de fazer alterações com a interface do usuário e, em alguns casos, pode na verdade ser mais rápido do que usando a ferramenta Designer. Na parte inferior do painel de Designer duas guias rotulados projeto e o texto respectivamente. Para alternar para o modo de exibição XML simplesmente selecione a guia do texto conforme mostrado na Figura:


Como pode ser visto a partir da estrutura do ficheiro XML, a interface do utilizador consiste no componente RelativeLayout, que por sua vez, é o pai do objeto TextView. Nós também podemos ver que a propriedade texto do TextView está definido para o nosso recurso welcomestring.Embora variando em complexidade e conteúdo, todos os layouts de interface do usuário são estruturados dessa forma hierárquica, baseado em XML. Um dos recursos mais poderosos do Android Studio pode ser encontrado para o lado direito do painel de edição XML. Isto é o Painel de visualização e mostra o estado visual atual do layout. As alterações são feitas ao layout XML, estas serão refletidas no painel de visualização. Para ver isso em ação, será modificado o layout XML para mudar a cor do fundo a uma RelativeLayout tom de vermelho como se segue:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
xmlns: Ferramentas = "http://schemas.android.com/tools"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: paddingLeft = "@ dimen / activity_horizontal_margin"
android: paddingRight = "@ dimen / activity_horizontal_margin"
android: paddingTop = "@ dimen / activity_vertical_margin"
android: paddingBottom = "@ dimen / activity_vertical_margin"
ferramentas: context = ". AndroidSampleActivity"
android: Fundo = "# ff2438">
<TextView
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: textAppearance = "android: attr / textAppearanceLarge"
android: text = "@ corda / welcomestring"
android: id = "@ + id / textView"
android: layout_centerVertical = "true"
android: layout_centerHorizontal = "true" />
</ RelativeLayout>

Note que a cor das mudanças de visualização em tempo real para corresponder à nova configuração no arquivo XML. Note também que um pequeno quadrado vermelho aparece na margem esquerda (também referida como a calha) do editor de XML ao lado da linha que contém a cor da configuração. Esta é uma indicação visual para o facto de a cor vermelha foi definida em uma propriedade. Altere o valor cor para # a0ff28 e note que tanto a pequena marca na margem e a mudança de visualização para verde.

Finalmente, use a exibição Projeto para localizar o aplicativo -> res -> valores -> arquivo strings.xml e clique duas vezes sobre ele para carregá-lo no editor.

Atualmente, o XML deve ter o seguinte texto:

<? xml version = "1.0" encoding = "utf-8"?>
<recursos>
<string
<string
<string
<string
name = "app_name"> AndroidSample </ string>
name = "hello_world"> Olá, mundo! </ string>
name = "action_settings"> Configurações </ string>
name = "welcomestring"> Bem-vindo ao Android Estúdio </ string>
</ recursos>

Como uma demonstração de recursos em ação, altere o valor de seqüência atualmente atribuído ao recurso e, em seguida voltar ao Designer  welcomestring, selecionando a guia para o arquivo de layout no painel do editor. Note que o esquema tenha pego o novo valor do recurso para a seqüência de boas-vindas.

Visualização de Layout 


Até agora, neste capítulo, a disposição só foi visualizada em uma representação do dispositivo Nexus 4. Como discutido anteriormente, a disposição pode ser testada para outros dispositivos, fazendo seleções de menu a partir do dispositivo na barra de ferramentas na parte superior da borda Painel Designer. Outra opção útil é fornecida por este menu é visualizar todos os tamanhos de tela que, quando selecionado, mostra o layout em todas as configurações de dispositivos atualmente configurados como demonstrado na Figura :


Para reverter para um layout de visualização única, selecione o menu do dispositivo, uma vez mais, desta vez escolhendo a opção Remover Previews.

Conclusão

Embora não seja excessivamente complexa, uma série de etapas estão envolvidas na criação de um ambiente de desenvolvimento Android. Tendo executado essas etapas, vale a pena trabalhar através de um exemplo simples para garantir que o ambiente está instalado corretamente e configurado. Nesta postagem, nós criamos uma aplicação simples e, em seguida, usamos o Designer Android Estúdio UI para modificar o layout da interface do usuário. Ao fazê-lo, exploramos a importância do uso de recursos, sempre que possível, em particular no caso de valores de cadeia, e brevemente sobre o tema de layouts. Finalmente, olhamos para o XML subjacente que é usado para armazenar o usuário design de interfaces de aplicações Android. Embora seja útil para ser capaz de visualizar um layout a partir da ferramenta Designer Android Studio, não há substituto para o teste uma aplicação através da compilação e executá-lo. Em uma postagem posterior intitulada Criando um Dispositivo Virtual Android (AVD) em Android Studio, as medidas necessárias para configurar um emulador para fins de teste serão abordados em detalhes. Antes de executar o aplicativo, no entanto, a próxima postagem vai tomar um pequeno desvio para proporcionar uma visita guiada a interface do usuário Android Studio.


















Nenhum comentário:

Postar um comentário