suporte a tablets e smartphones no android _ klebermota.eti

23/12/2014 SuporteaTabletseSmartphonesnoAndroid|klebermota.eti.br

http://www.klebermota.eti.br/2012/08/08/suporteatabletsesmartphonesnoandroid/ 1/12

Suporte a Tablets e Smartphones noAndroid

A plataforma Android pode ser executada em uma grande variedade detamanhos de telas e o sistema redimensiona graciosamente a interface daaplicao para caber em cada um desses tamanhos. Tipicamente, tudo o que vocprecisa fazer projetar a sua interface de forma que ela seja flexvel e otimizaralguns elementos para tamanhos diferentes pelo fornecimento de recursosalternativos (como layouts alternativos que reposicionam alguns views ouvalores de dimensionamento alternativos para os views). Porm, algumas vezesvoc pode querer dar um passo adiante e otimizar toda a experincia do usurioem diferentes tamanhos de tela.

Por exemplo, tablets oferecem mais espao no qual sua aplicao podeapresentar mltiplos conjuntos de informaes de uma vez, enquanto umdispositivo de mo (como um smartphone) normalmente necessita que vocdivida esses conjuntos e exiba-os separadamente. Assim, mesmo uma interfaceprojetada para dispositivos manuais que seja redimensionada de formaadequada em um tablet, no se beneficia do potencial da tela maior do tabletpara melhorar a experincia do usurio.

Com o Android3.0 (API level 11), o Android introduziu um novo framework quepermite que voc projete de forma mais eficiente Activities que tirem vantagemde telas maiores: a API Fragment. Fragmentos permitem que voc separecomponentes de comportamento distintos de sua interface em partes separadas,que voc pode combinar para criar layouts multi-painel quando a aplicao

O F E R T A R E L M P A G O D E L L Inspiron 14 Srie 3000 com HD500, Frete Grtis e Intel Core. Veja!



estiver sendo executada em um tablet ou coloca-las em Activities separadasquando executada em um dispositivo de mo. O Android 3.0 tambm introduziuo ActionBar, que fornece uma interface dedicada no topo da tela para identificara aplicao e fornecer aes e meios de navegao ao usurio.

Esse artigo um guia que pode ajudar voc a criar uma aplicao que ofereceuma experincia ao usurio otimizada e nica tanto em dispositivos de moquanto em tablets, usando fragmentos e a barra de aes (Action Bar). Antes decontinuar a ler esse guia, importante ler primeiro o artigo Suporte a mltiplastelas no Android. Esse artigo descreve os principios fundamentais paradesenvolver uma interface que suporte diferentes tamanhos e densidades de telacom layouts flexveis e bitmaps alternativos, respectivamente.

Diretrizes bsicas

Abaixo seguem algumas diretrizes que ajudaro voc a criar uma aplicao quefornea uma experincia ao usurio otimizada e nica tanto em dispositivos demo quanto em tablets:

Construa sua Actibity baseada em fragmentos que voc pode reutilizar emcombinaes diferentes em layouts multiu-painel em tablets ou de um nicopainel em dispositivos de mo. Um Fragmento representa um comportamentoou pedao da interface com o usurio em um Activity. Voc pode imaginar umfragmente como uma seo modular de uma Activity, que possui seu prpriociclo de vida e que voc pode adicionar ou remover enquanto a Activityestiver sendo executada.

Use a barra de aes, mas siga as boas prticas para garantir que seu projetoseja flexvel o suficiente para que o sistema ajuste o layout da barra de aesde acordo como o tamanho da tela. O ActionBar um componente da interfacepara que as Activities que substitui a tradicional barra de titulo do topo datela. Por padro, a barra de aes inclui o logotipo da aplicao do ladoesquerdo, seguido pelo titulo dela, e acesso ao menu de opes do ladodireito.Voc pode fazer com que item do menu opes apaream diretamentena barra de aes. Voc pode tambm adicionar recursos de navegao abarra de aes, como abas ou uma lista drop-down, e usa o cone da aplicaopara complementar o comportamento do boto Back com opes paranavegar para a tela inicial da aplicao ou subir um nvel na hierarquia dela.Implemente layouts flexveis, como discutidas no artigo Best Practices para



suportar mltiplas telas e no post do blog Thinking Like a Web Designer.Umlayout flexvel permite que sua aplicao se adapte a vrios tamanhos de tela.Nem todos os tablets ou dispositivos de mo tem o mesmo tamanho. Enquantovoc pode fornecer diferentes combinaes de fragmentos para tablets ouhandsets, ainda necessrio que cada projeto seja flexvel pararedimensionar a interface para cada variao de tamanho e aspect ratio.

Criando um painel nico e um layout multi-painel

Permanecendo compatvel com verses antigas

Se voc quiser usar fragmentos em sua aplicao e permanecer compatvel comverses do Android anteriores a 3.0, voc pode fazer isso pelo uso da SupportLibrary( que pode ser baixada pelo SDK Manager).

Essa biblioteca de suporte inclui APIs para fragments, loaders, e outras APIsadicionadas em verses mais novas do Android. Simplesmente adicionando essabiblioteca ao seu projeto Android, voc pode usar verses compatveis dessasAPIs em sua aplicao e permanecer compatvel com o Android 1.6 (o valorde android:minSdkVersion pode ser to baixo quanto 4). Para obter informaessobre como obter a biblioteca e comear a usa-la, veja o documento SupportLibrary.

A biblioteca de suporte no fornece APIs para a barra de aes, mas voc podeusar o cdigo da aplicao exemplo, Action Bar Compatibility, para criar umabarra de aes que suporte todos os dispositivos.

A maneira mais efetiva de criar uma experincia com o usurio distinta paratablets e dispositivos de mo criar layouts com diferentes combinaes defragmentos, como layouts multi-painel para tablets e com um nico painel paradispositivos de mo. Por exemplo, uma aplicao de notcias em um tabletpoderia exibir uma lista de artigos do lado esquerdo e o artigo completo no ladodireito selecionando um artigo a esquerda o artigo seria exibido na direita. Emum smartphone, porm, esses dois componentes seriam exibidos em telasseparadas selecionado um artigo em uma lista toda a tela mudada para exibiro artigo. Existem duas tcnicas para por em prtica esse design com fragmentos:

Mltiplos fragmentos, uma Activity: Use uma Actiity no importando o



klebermota.eti.brBlogsobrecincia,computaoeprojetosrelacionados

tamanho do dispositivo, mas decida durante a execuo se deve combinar osfragmentos no layout (para criar um design multi-painel) ou alternarfragmentos (para criar um design de nico painel). OuMltiplos fragmentos, mltiplas Activities: Em um tablet, coloque mltiplosfragmentos em uma Activity; j em um smartphone, use Activities separadaspara hospedar cada fragmento. Por exemplo, quando o design do tablet usadois fragmentos em uma Activity, use a mesma Activity para smartphones,mas fornea um layout alternativo que inclua o primeiro fragmento. Quandoa aplicao estiver sendo executada em um smartphone e voc precisaalternar entre fragmentos (como ao selecionar um item), inicie uma outraActivity que hospedar p segundo fragmento.

A abordagem que voc deve escolher depende de seu design e prefernciaspessoas. A primeira opo (uma Activity, fragmentos alternados) requer quevoc determine o tamanho da tela durante a execuo e dinamicamente adicionecada fragmento como for apropriado ao invs de declarar os fragmentos nolayout XML da Activity porque voc no pode remover um fragmento de umaActivity se ele foi declarado no layout XML. Quando usar a primeira tcnica, vocpode precisar tambm atualizar a barra de aes a cada vez que os fragmentosforem alterados, dependendo de quais aes ou modo de navegao estiveremdisponveis para cada fragmento. Em alguns casos, esses fatores podem noafetar o seu design, de forma que usar uma Activity e alternar fragmentos podefuncionar bem (especialmente se o seu design para tablets necessite que vocadicione fragmentos dinamicamente de qualquer forma). Outras vezes, porm,alternar dinamicamente fragmentos em seu design para dispositivos de mopode fazer o seu cdigo mais complicado, porque voc vai precisar gerenciartodas as combinaes de fragmentos no cdigo da Activity (ao invs de usarlayouts alternativos para definir as combinaes de fragmentos) e gerenciar ovai-e-vem de fragmentos por si (ao invs de permitir que a pilha de Activitymanipule a navegao entre fragmentos).

Esse artigo foca na segunda opo, em que voc exibe cada fragmento em umaActivity separada quando esta em uma tela pequena. Usar essa tcnica significaque voc pode usar arquivos de layout alternativos que definem diferentescombinaes de fragmentos para diferentes tamanhos de tela, mantendo ocdigo do fragmento modular, simplificando o gerenciamento da barra de aes,e deixando o sistema manipular a navegao entre fragmentos em um tablet.

A figura 1 ilustra como uma aplicao com dois fragmentos pode ser arranjadatanto em dispositivos de mo quanto em tablets quando se usa Activitiesseparada para o design da interface:



Na aplicao mostrada na figura 1, a Activity A a activity principal e usalayouts diferentes para exibir um ou dois fragmentos ao mesmo tempo,dependendo do tamanho da tela:

Em uma tela de tablet, o layout da Activity A contm tanto o fragmento Aquanto o fragmento B.Em uma tela de um dispositivo de mo, o layout da Activity A contm apenas ofragmento A (a ListView). Para que sejam exibidos os detalhes no fragmento B,a Activity B deve ser aberta.

Nota: A Activity B nunca usada em um tablet. Ela simplesmente um continer para apresentar o fragmento B, de forma que usada apena emdispositivos de mo quando os dois fragmentos precisam ser exibidosseparadamente.

Dependendo do tamanho da tela, o sistema aplicar um arquivo delayout main.xml diferente:

public class MainActivity extends Activity implements TitlesFragment.OnItemSelectedListener { ...

/** This is a callback that the list fragment (Fragment A) calls when a list item is selected */ public void onItemSelected(int position) { DisplayFragment displayFrag = (DisplayFragment) getFragmentManager() .findFragmentById(R.id.display_frag); if (displayFrag == null) {



// DisplayFragment (Fragment B) is not in the layout (handset layout), // so start DisplayActivity (Activity B) // and pass it the info about the selected item Intent intent = new Intent(this, DisplayActivity.class); intent.putExtra("position", position); startActivity(intent); } else { // DisplayFragment (Fragment B) is in the layout (tablet layout), // so tell the fragment to update displayFrag.updateContent(position); } }}

Suporte a vrios tamanhos baseado na largura da tela

O Android 3.2 (API Level 13) adiciona novas APIs que fornecem um controle maispreciso sobre quais tamanhos de tela sua aplicao ir suportar e quais recursosela usar, atravs da declarao de tamanhos de tela baseados na larguramnima que o layout necessita. Por exemplo, tanto um dispositivo de 5 quantoum de 7 qualificam-se como tela grande, assim seus recursos de layoutgrande so usados nos dois dispositivos. Com o API Level 13, voc podedistinguir entre esses dois tamanhos com base na largura da tela, medida empixels independente de densidade.

Nota: Apesar do exemplo acima de layout para tablets ser baseado numqualificador de configurao de tela grande, voc deve tambm usar o novoqualificador de tamanho minimum width de maneira a controlar com precisoo tamanho de tela no qual o sistema ir aplicar seu layout.

Como a aplicao responde quando um usurio seleciona um item da listadepende da disponibilidade do fragmento B no layout:

Se o Fragmento B estiver no layout, a Activity A notifica o Fragmento B para seauto atualizar.Se o Fragmento B no estiver no layout, a Activity A inicia a Activity B (quehospeda o Fragmento B).

Para implementar esse padro em sua aplicao, importante que vocdesenvolva seus fragmentos de forma que sejam o mais compartimentalizadopossvel. Especificamente, voc deve seguir duas diretrizes:



No manipule um fragmente diretamente a partir de outro.Mantenha todo o cdigo de interesse do contedo de um fragmento dentrodesse fragmento, ao invs de coloca-lo no cdigo da Activity hospedeira.

Para evitar a chamada de um fragmente diretamente a partir de outro, definauma interface de callback em cada classe de fragmento, que pode ser usadapara entregar eventos para a Activity hospedeira, que implementa a interface decallback. Quando a Activity recebe uma chamada devido a um evento (como aseleo de um item da lista pelo usurio), a Activity responde baseada naconfigurao atual do fragmento.

Por exemplo, a Activity A do exemplo acima pode manipular a seleo de itensdependendo do uso de um tablet ou dispositivo de mo dessa forma:

public class MainActivity extends Activity implements TitlesFragment.OnItemSelectedListener { ...

/** This is a callback that the list fragment (Fragment A) calls when a list item is selected */ public void onItemSelected(int position) { DisplayFragment displayFrag = (DisplayFragment) getFragmentManager() .findFragmentById(R.id.display_frag); if (displayFrag == null) { // DisplayFragment (Fragment B) is not in the layout (handset layout), // so start DisplayActivity (Activity B) // and pass it the info about the selected item Intent intent = new Intent(this, DisplayActivity.class); intent.putExtra("position", position); startActivity(intent); } else { // DisplayFragment (Fragment B) is in the layout (tablet layout), // so tell the fragment to update displayFrag.updateContent(position); } }}

Quando DisplayActivity (Activity B) iniciado, ele l os dados entreguespelo Intent e passa-os ao DisplayFragment (Fragmento B).

Se o Fragmento B precisar entregar um resultado de volta para o Fragmento A(pois a Activity B que foi iniciada com startActivityForResult()), o processo



funciona de forma similar a uma interface de callback entre o Fragmento B e aActivity B. Isso , a Activity B implementa uma interface de callback diferentedefinida pelo Fragmento B. Quando a Activity B recebe a chamada com oresultado do fragmento, configura o resultado para a Activity (com setResult()) eencerra-o. A Activity A ento recebe o resultado e entrega-o ao Fragmento A.

Para um demonstrao dessa tcnica para criao de diferentes combinaes defragmentos para tablets e dispositivos de mo, veja a verso atualizada doexemplo Honeycomb Gallery.

Usando a Barra de Aes (Action Bar)

A Action Bar um componente importante para aplicaes Android tanto emtablets quanto em dispositivos de mo. Para garantir que ela se comporte deforma apropriada em todas as telas, importante que voc use as APIsda ActionBar sem adicionar customizaes complexas. Usando a API padroActionBar para criar a sua barra de aes, o sistema Android faz todo o trabalhode adaptao da barra em diferentes tamanhos de tela. Abaixo segue algumasdicas a serem seguidas quando criar sua barra de aes:

Quando configurar um item de menu para ser um item de ao, evite o valor"always". No seu menu resource, use "ifRoom" para oatributo android:showAsAction se voc quiser que o item do menu aparea nabarra de ao. Porm, voc deve precisar do "always" quando um view deao no fornecer uma ao padro para o menu (isso , precisa aparecercomo um view de ao). Porm, voc no deve usar "always" mais do que umou duas vezes. Em quase todos os casos, use "ifRoom" como o valorde "android:showAsAction" quando voc quiser que o item aparea como umitem de ao. Forar com muitos itens na barra de aes pode fazer com que ainterface fique amontoada e os itens podem sobrepor outros elementos dabarra de ao como o titulo ou itens de navegao.Quando adicionar itens a barra de ao com um texto de ttulo, tambmfornea um cone, quando for apropriado, edeclara showAsAction="ifRoom|withText". Dessa forma, se no houver espaosuficiente para o titulo, mas houver espao suficiente para o cone, entoapenas esse ltimo sera usado.Sempre fornea um titulo para os seus itens da barra de aes, mesmo sevoc no ativar o atributo "withText", porque os usurios podem visualizar o



titulo como uma dica executando um clique longo sobre o item o tituloaparece momentaneamente em uma mensagem. Fornecendo um titulotambm importante para a acessibilidade, pois leitores de tela podem ler emvoz alta o titulo do item mesmo que no esteja visvel.Evite usar modos de navegao personalizados quando possvel. Use asabas embutidas e os modos de navegao drop-down quando possvelelesso projetoados de forma que o sistema pode se adaptar a diferentestamanhos de tela. Por exemplo, quando a largura for muito estreita tanto paraas abas quando outros itens da barra (como em um dispositivo de mo naorientao retrato), as abas aparecem abaixo da barra de ao (modoconhecido como barra de ao empilhada). Se voc precisa criar um modo denavegao personalizado ou outros views na barra de aes, proceda testesdeles em telas pequenas e faa qualquer ajuste necessrio para suportar umabarra de aes estreita.

Por exemplo, as telas abaixo demonstram como o sistema pode adaptar a barrade aes baseando-se no tamanho disponvel de tela. No dispositivo de mo,apenas dois itens cabem na tela, de forma que os demais itens aparecem em ummenu (pois android:showAsAction foi configurado para "ifRoom") e as abasaparecem em uma linha separada. No tablet, mais itens podem ser encaixadosassim como as abas.

Usando uma barra de aes dividida

Quando sua aplicao estiver sendo executada no Android 4.0 (API level 14) ousuperior, haver um modo extra disponvel para a barra de aes chamada



barra de aes divida. Quando voc ativa esse modo, uma barra separadaaparece na parte inferior da tela para exibir todos os itens quando a Activityestiver sendo executada em uma tela estreita. Dividir a barra de aes garanteque uma quantidade razovel de espao seja disponibilizado para exibir itensem uma tela estreita e tambm deixe espao para elementos de navegao etitulo na parte superior.

Para ativar o modo barra de aes divida, simplesmenteadicione uiOptions="splitActionBarWhenNarrow" ao seu elemento ou no arquivo de manifesto.

Se voc quiser esconder a barra de ao principal na parte superior, por estarusando as abas de navegao junto com a barra de aes divida,chame setDisplayShowHomeEnabled(false) para desativar o cone da aplicao nabarra de aes. Nesse caso, nada ser deixado na barra de aes principal, deforma que ela desaparece e tudo que permanece a vista so as abas denavegao e os itens de ao na parte inferior., como mostra a imagem acima.

Nota: Apesar do atributo uiOptions ter sido adicionado no Android 4.0 (API level14), voc pode incluir ela com segurana em sua aplicao mesmo que o valorde minSdkVersion esteja configurado para um valor menor do que "14" paramanter a compatibilidade com verses antigas do Android. Quando a aplicaoestiver sendo executada em verses antigas, o sistema simplesmente ignora oatributo que ele no entende. A nica condio para adicionar essa opo ao seumanifesto que voc precisa compilar sua aplicao para um verso deplataforma que suporte a API level 14 ou superior. Somente certifique-se de quevoc no esteja usando abertamente APIs no cdigo de sua aplicao que no sosuportadas pela verso declarada pelo atributo minSdkVersion.

Outras dicas de projeto



Quando estiver trabalhando com uma ListView, considere como voc devefornecer mais ou menos informaes em cada item da lista baseado no espaodisponvel.Isso , voc pode criar lauouts alternativos para serem usadospelos itens de sua lista assim como em telas grandes pode-se exibir maisdetalhes de cada item.Crie arquivos de recurso alternativo para valores como inteiros, dimenses emesmo boleanos. Usando qualificadores de tamanho para esse recursos, vocpode facilmente aplicar diferentes tamanhos de layout, de fonte, ouativar/desativar comportamentos baseados no tamanho da tela.

Tweet 1 Compartilhar 0

Related posts:

1. Suporte a mltiplas telas no Android O Android pode rodar em uma grande variedadede dispositivos que podem ter diferentes tamanhos e densidades de tela. Para...

2. Como criar Servios em aplicaes Android No ambiente Android, temos umaferramenta interessante para executar aplicaes ou processos em segundo plano, que so os Servios.

Neste...

3. Primeiros passos com Android: Criando um Hello World Comodesenvolverdor, voc sabe que a primeira impresso sobre um determinado ambiente de

desenvolvimento to fcil quanto escrever Hello...

4. Como armazenar e recuperar preferncias em uma aplicao Android Osubsistema de Preferncias do Android um mecanismo leve para armazenar e recuperar pares de

valores e chaves de...

5. Criando uma aplicao bsica para o Android a partir do zero Neste artigo,que a primeira parte de uma srie de quatro, iremos ver como criar uma aplicao rudimentar que...

8deagostode2012 KleberMota Android Android,handset,screen,smartphone,suporte,tablet,tamanho,tela

0Like



Comogravarudiodealtaqualidadeparafilmes2comentrios8monthsago

KleberMotaRonaldo,vocpodeconectaromicrofonediretamenteaogravadorzoomsemproblema,tomandoocuidadodefazermarcaesnagravaoparaocasodeserpreciso

TutorialdeCanvasParte3Usandoimagens2comentrios8monthsago

GuestOlkleber,excelentepost,tenhoumadvida:consigogerarodata:URL,copioeatravsdeumgerenciadordemysqlgravoemumcampoblobeconsigorecuperaraimagem,no

UsandoacmeranoAndroid(Traduodadocumentaooficial)1comentrio8monthsago

WellingtonLopesOlKleber,estoutentandoimplementaremminhaaplicao,acamerasemvisualizaodaimagem,ouseja,aopressionarumboto,sertiradoafotosemqueousurio

ComousarumGravadorDigitalPorttilemumagravaodevdeo1comentrio8monthsago

ChristianBaptistellaBoatarde,amigo!Gostariadesaberse,aoplugarummicexterno,osmicsdogravadorporttilsodesativados,ousehalgumaformadegravarcomo"3"mics(2

TAMBMEMBLOGKLEBERMOTA

0Comentrios BlogKleberMota Entrar

OrdenarporMaisrecente Compartilhar

Comeceadiscusso...

Sejaoprimeiroacomentar.

OQUEISSO?

Assinarfeed AdicioneoDisqusnoseusited Privacidade

Favorito

Orgulhosamente desenvolvido com WordPress

suporte a tablets e smartphones no android _ klebermota.eti

Documents