Transcript
Principais dicas para UIs do Android Adquirindo a mágica nos tablets
MOTOROLA e o logotipo estilizado M são marcas comerciais ou marcas registradas da Motorola Trademark Holdings, LLC. Todas as outras marcas comerciais são propriedade dos seus respectivos proprietários. © 2011 Motorola Mobility, Inc. Todos os direitos reservados.
Suzanne AlexandraEvangelista da Tecnologia AndroidMotorola Mobility
Título da apresentação Versão 1.0 24.02.09
Brasil - #appsum11brArgentina - #appsum11ar
México - #appsum11mdeveloper.motorola.com
Nós estamos em um lugar totalmentenovo.
Leve as coisas certas a bordo.
Adquira a mágica
01 PENSE NA ERGONOMIA
02 ENVOLVA OS SENTIDOS
03 USE APARÊNCIAS INCRÍVEIS
04 TORNE-O ÓBVIO
Adquira a mágica
01 PENSE NA ERGONOMIALayouts com orientação paisagemNotificações elaboradasTamanhos de textos
02 ENVOLVA OS SENTIDOSImagensSensibilidade ao toque
03 USE APARÊNCIAS INCRÍVEISTemas, temas, temas
04 TORNE-O ÓBVIOBarras de açõesFragmentosClique e arraste
Suponha que seus usuários estejamusando orientação paisagem.
Layouts com orientação paisagemMuitas vezes, a orientação paisagem precisa de layouts especializados, em qualquer dispositivo
Layouts com orientação paisagemVeja o que acontece no tablet
Layouts com orientação paisagemO que deu errado?
alignParentLeft alignParentRight
Imagempequena
Nada no centro
Layouts com orientação paisagemDesign para tamanho e orientação da tela
Layouts com orientação paisagemO layout vencedor
centerHorizontal="true"
layout_alignLeft<RelativeLayout>layout_alignRight
Layouts com orientação paisagemOtimize a experiência do usuário de wide screens
Layouts com orientação paisagemEvite o efeito de grande oceano
Tamanhos de textosTextos pequenos (como imagens) provavelmente não funcionarão
Tamanhos de textosMelhores práticas
Escale com sp18 sp e superior Certifique-se de que o texto élegível para os usuários reais
Notificações elaboradasUm importante benefício do Android em relação a outrasplataformas móveis
Notificação da sua app
Notificações elaboradasExemplos de quando usar notificações elaboradas
Ao chegar novo conteúdo
Quando uma mídia está sendo reproduzida
Notificações elaboradasDuas notificações são exibidas no Honeycomb
Bandeja(Tray)
Pop-up
Notificações elaboradasUse a classe Notification.Builder
Notification.Builder builder = new Notification.Builder( this );
Como AlertDialog.Builder
Notificações elaboradasCrie a notificação que você quiser
builder.setSmallIcon(R.drawable.icon).setContentTitle(title).setContentText(text).setContentIntent(pintent) // Um “pending intent”.setLargeIcon(myBitmap)
;
Notificações elaboradasCodificação visual
setSmallIcon()setLargeIcon()
setContentText()setContentTitle()
Notificações elaboradasAdquira um pouco de mágica: crie um botão clicável
RemoteViews layout = new RemoteViewsgetPackageName(), R.layout.notification);
layout.setTextViewText(R.id.notification_title, getString(R.string.app_name));
layout.setOnClickPendingIntent(R.id.notification_button,getDialogPendingIntent("Tapped") );
builder.setContent(layout);
Notificações elaboradasEstratégia para compatibilidade com versões anteriores(“backward compatibility”)
private static boolean isHoneycomb =android.os.Build.VERSION.SDK_INT > 10;
if (!isHoneycomb)// iniciar um intent de Activity
else// iniciar outro
Adquira a mágica
01 PENSE NA ERGONOMIA
02 ENVOLVA OS SENTIDOSImagensSensibilidade ao toque
03 USE APARÊNCIAS INCRÍVEIS
04 TORNE-O ÓBVIO
A visão supera todos osoutros sentidos.
Regras do cérebroDr. John Medina
ImagensExpresse-se visualmente, para encantar
ImagensTelas para diferentes dispositivos precisam de tamanhos diferentes de imagem
ImagensEscolha uma estratégia de imagem
Um conjunto de imagens e deixe o Android dimensionarautomaticamente?
Conjuntos de recursos personalizados para tamanhos e densidades diferentes?
Determinar a densidade mais comumente usada?Recuperar imagens dinamicamente em tempo de execução e
escalar para o dispositivo?
ImagensMemória vs tamanho do arquivo: um exemplo
Dimensionamento automático
Conjuntos de imagens
32 MB de memória
23 MB de memória
324 KB de tamanho
728 KB de tamanho
O dimensionamento automático usamemória.
Conjuntos de imagem personalizadosaumentam o tamanho do arquivo.
ImagensApresente amostras de imagens grandes em tempo de execução para economizar memória
BitmapFactory.Options options = newBitmapFactory.Options();
options.inJustDecodeBounds = false;options.inSampleSize = 4;options.inScaled = true;options.inTargetDensity = screenDensity;
Bitmap bitmap = BitmapFactory.decodeResource(
getResources(),R.drawable.clover, options);
ImagensOnde colocar imagens e ícones
Pré-dimensionado paradensidadeCombine estilo 3.0
Ícones de altaresolução
Padrão, dimensionadoautomaticamente
Sensibilidade ao toqueTablets são desenvolvidos para o toque
Sensibilidade ao toqueCertifique-se de que todos os alvos possam ser tocados
Sensibilidade ao toqueCertifique-se de que todos os alvos possam ser tocados
public View getView( int position, View convertView, ViewGroup parent) {
ImageView i = new ImageView(mContext);i.setImageResource(mImageIds[position]);
i.setLayoutParams(new Gallery.LayoutParams(300, 200));
i.setScaleType(ImageView.ScaleType.FIT_XY);i.setBackgroundResource(
mGalleryItemBackground);
return i;}
Sensibilidade ao toqueVeja como as imagens são transferidas entre dispositivos
160 dpi – médiaProporção 16:9
Adquira a mágica
01 PENSE NA ERGONOMIA
02 ENVOLVA OS SENTIDOS
03 USE APARÊNCIAS INCRÍVEISTemas, temas, temas
04 TORNE-O ÓBVIO
TemasCoerente com o dispositivo, ou destacado
Theme.Holo
Theme.Holo.Light
TemasO Honeycomb apresenta dois novos temas holográficos
TemasMas eles exigem aceleração de hardware (“hardware acceleration”)
<application android:icon="@drawable/icon"
android:label="@string/app_name"
android:hardwareAccelerated="true" >
Disponível somente no Honeycomb
TemasPorém, você pode querer que sua aplicação funcione em váriasversões do Android
<uses-sdk android:minSdkVersion="8"android:targetSdkVersion="11" />
TemasCrie diversos temas para versões do Android
<style … parent="@android:style/Theme.Holo">
<style … parent="@android:style/Theme">
Certifique-se de que todas as chamadas de API que você usa funcionam para todas as
versões de API que você suporta.
Adquira a mágica
01 PENSE NA ERGONOMIA
02 ENVOLVA OS SENTIDOS
03 USE APARÊNCIAS INCRÍVEIS
04 TORNE-O ÓBVIOBarras de açõesFragmentosClique e arraste
Barras de açõesTorne os recursos de seus aplicativos prontamente disponíveis
Itens de ações
Ícone daapp
Visualizaçãode ações
Diálogo dropdown
Barras de açõesCodificação visual
onCreateOptionsMenu()
<item android:showAsAction="true" … >
onOptionsItemSelected()android:actionLayoutandroid:actionViewClass
Barras de açõesEtapa 1: foco no nível 11 de API
<uses-sdk android:minSdkVersion="8"android:targetSdkVersion="11" />
Barras de açõesEtapa 2: coloque itens do menu na barra de ações
<item android:id="@+id/favorite"android:title="@string/favorite" android:icon="@drawable/ic_menu_star" android:showAsAction="ifRoom" />
Barras de açõesEtapa 3: manipule a seleção de opções como de costume
@Overridepublic boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {case R.id.favorite:
// faça algoreturn true;
…}
Barras de açõesNo XOOM e em um smartphone
Barras de açõesUse um pouco de mágica, estilize
<style name="MyTheme"parent="android:style/Theme.Holo" >
<item name="android:actionBarStyle">@style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">@drawable/my_background</item>
</style>
Barras de açõesUse um pouco de mágica, adicione um diálogo
Use AlertDialog.BuilderCrie um diálogo personalizado em XMLUse um DialogFragment
Barras de açõesMas faça coisas do Honeycomb somente no Honeycomb
private static boolean isHoneycomb =android.os.Build.VERSION.SDK_INT > 10;
se (isHoneycomb) {// criar o diálogo personalizado aqui
}
Fragments (Fragmentos)Use para mostrar mais conteúdo e recursos, de forma mais fluida
Fragments (Fragmentos)É possível usar muitos padrões
Mais comum
Fragments (Fragmentos)O layout inicial do fragment é o mesmo em todas as orientações
Fragments (Fragmentos)Porém, é possível mostrar ou ocultar exibições (“views”)
Fragments (Fragmentos)Encontre seus fragments, em sua Activity principal
Fragment gridFrag =getFragmentManager().findFragmentById(R.id.photogrid);
Fragment photoFrag = getFragmentManager().findFragmentById(R.id.the_frag);
Fragments (Fragmentos)Verifique a orientação e ajuste as exibições (“views”)
private boolean photoInline = false;
photoInline = (photoFrag != null && getResources().getConfiguration().orientation== Configuration.ORIENTATION_LANDSCAPE);
if (photoInline) {// faça algo
} else if ( photoFrag != null ) {getView().setVisibility(View.GONE);
}
Fragments (Fragmentos)Ainda melhor
Transição animada
Fragments (Fragmentos)Use um pouco de mágica: anime a exibição do fragmento –passo 1
<set><objectAnimator
xmlns:android=http://schemas.android.com/apk/res/android
android:propertyName="x" android:valueType="floatType"android:valueFrom="-1280"android:valueTo="0" android:duration="500" />
</set>
Fragments (Fragmentos)Use um pouco de mágica: anime a exibição do fragmento –passo 2
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.setCustomAnimations( R.anim.slide_in_left, R.anim.slide_out_right );
DetailsFragment newFrag =DetailsFragment.newInstance();
ft.replace(R.id.details_fragment_container, newFrag, "detailFragment");
ft.commit();
Clique e arraste (“Drag and drop”)Cria envolvimento físico, direto e imediato
Clique e arraste (“Drag and drop”)Tem diversos estados de evento
ACTION_DRAG_STARTED
ACTION_DRAG_ENTERED
Clique e arraste (“Drag and drop”)Tem diversos estados de evento
ACTION_DROPACTION_DRAG_ENDED
Clique e arraste (“Drag and drop”)Veja como isso funciona nos fragmentos
Escolha um gesto que inicia um arrasto: long click?Crie um listener: OnLongClickListener()Crie objetos ClipData e DragShadowBuilderInicie um arrasto
Clique e arraste (“Drag and drop”)Para iniciar, chame startDrag()
public boolean onLongClick(View v) {ClipData data = ClipData.newPlainText("foo","bar");DragShadowBuilder shadowBuilder = new DragShadowBuilder();v.startDrag(data, shadowBuilder, v, 0);return true;
}
Criar um ouvinte de arrasto (implementar OnDragListener)Substituir onDrag e manipular eventos
Clique e arraste (“Drag and drop”)Em seguida, continue com um listener e onDrag()
class BoxDragListener implements OnDragListener {
public boolean onDrag(View self, DragEvent event) {if (event.getAction() ==
DragEvent.ACTION_DRAG_STARTED) {// fazer algo
} // manipular outros eventos
}
Perguntas?@suzalex@motodev
@motodevbr
Brasil - #appsum11brArgentina - #appsum11arMéxico - #appsum11mx
community.developer.motorola.com
obrigada
LEGAL
INFORMAÇÕES SOBRE LICENÇA
Exceto onde indicado, o exemplo de código fonte escrito pela Motorola Mobility Inc. e fornecido a você é licenciado conforme descrito abaixo.Copyright © 2010-2011, Motorola, Inc. Todos os direitos reservados exceto quando expressamente indicado.A redistribuição e utilização em formulários fonte e binários, com ou sem modificação, são permitidas de acordo com as seguintes condições:As redistribuições de código fonte devem manter o aviso de direitos autorais acima, esta lista de condições e a seguinte isenção de responsabilidade.As redistribuições em formulários binários devem reproduzir o aviso de copyright acima, esta lista de condições e a seguinte isenção de responsabilidade na
documentação e/ou outros materiais fornecidos com a distribuição.
O nome da Motorola, Inc. e os nomes de seus colaboradores não podem ser usados para endossar ou promover produtos derivados desse software sem permissãoprévia por escrito.
ESTE SOFTWARE É FORNECIDO PELOS DETENTORES E COLABORADORES DOS DIREITOS AUTORAIS "NA CONDIÇÃO QUE SE ENCONTRA" E QUALQUER GARANTIA EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO LIMITADA A GARANTIAS DE COMERCIALIZAÇÃO E ADEQUAÇÃO PARA UMA FINALIDADE ESPECÍFICA NÃO IMPLICAM RESPONSABILIDADE. EM NENHUM CASO O DETENTOR OU COLABORADOR DOS DIREITOS AUTORAIS DEVE SER RESPONSÁVEL POR QUAISQUER DANOS DIRETOS, INDIRETOS, INCIDENTAIS, ESPECIAIS, EXEMPLARES OU CONSEQUENTES (INCLUINDO, MAS NÃO LIMITADOS À AQUISIÇÃO DE BENS OU SERVIÇOS SUBSTITUTOS, PERDA DE USO, DADOS OU LUCROS; OU INTERRUPÇÃO DE NEGÓCIOS) CAUSADOS E SOBRE QUALQUER TEORIA DE RESPONSABILIDADE, SEJA EM CONTRATO, RESPONSABILIDADE OBJETIVA OU AGRAVO (INCLUINDO NEGLIGÊNCIA OU NÃO) DECORRENTE DE QUALQUER MANEIRA DO USO DESSE SOFTWARE, MESMO QUE INFORMADOS DA POSSIBILIDADE DE TAIS DANOS.
Outro código fonte exibido nesta apresentação pode ser oferecido sob outras licenças. Apache 2.0Copyright © 2010, Android Open Source Project. Todos os direitos reservados, salvo disposição em contrário expressamente indicada.
Licenciado sob a Licença Apache, Versão 2.0 (a "Licença"), você não pode usar esse arquivo exceto em conformidade com a Licença. Você pode obter uma cópiada Licença em http://www.apache.org/licenses/LICENSE-2.0.
A menos que exigido pela lei aplicável ou acordado por escrito, o software distribuído sob a Licença é distribuído "NA CONDIÇÃO QUE SE ENCONTRA", SEM GARANTIAS OU CONDIÇÕES DE QUALQUER TIPO, sejam expressas ou implícitas. Consulte a Licença para a linguagem específica que governa as permissões e limitações sob a Licença.
Licença Creative Commons Atribuição 3.0. Partes desta apresentação são reproduzidas a partir do trabalho criado e compartilhado pelo Google (http://code.google.com/policies.html) e usadas de acordo com
os termos da Licença Creative Commons Atribuição 3.0. (http://creativecommons.org/licenses/by/3.0/).
LEGAL
LICENSE NOTICES
Except where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below.Copyright © 2010-2011, Motorola, Inc. All rights reserved except as otherwise explicitly indicated.Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other
materials provided with the distribution.
Neither the name of the Motorola, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Other source code displayed in this presentation may be offered under other licenses.Apache 2.0Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Creative Commons 3.0 Attribution LicensePortions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in
the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).
top related