introdução a fragmentos

Anna SchallerPeter van der Linden

Evangelistas da tecnologia AndroidPlataformas e serviços para desenvolvedores

Brasil - #appsum11br

Motorola Mobility

Introdução a fragmentos

2Page

© 2011 Motorola Mobility, Inc.

MOTODEV App Summit 2011

Fragments (fragmentos)

• Permitem que um aplicativo seja dividido em subcomponentes que podem ser gerenciados individualmente e combinados de diferentesmaneiras, como criando uma UI com vários painéis.

3Page



Por que fragmentos?

• Do ponto de vista do desenvolvedor, a maior transição entre os smartphones e os tablets é o tamanho da tela.

• Os fragmentos criam uma ponte para os aplicativos que precisam ser otimizadas para smartphones e tablets

4Page



Chegando lá

• Duas maneiras de se chegar lá

– Android 3.0 SDK

– Pacote Android Compatibility• Número de layouts

– Suporte para dois ou mais painéis em todos os lugares

– Suporte para painel único em todos os lugares• Ainda precisa de algum tipo de Activity(s)• Criar um par de fragmentos• Para cada fragmento visível adicionar uma UI• Adicionar os fragmentos a uma Activity

5Page



• Tamanho da tela

– pequeno, normal, grande, extra grande

• Para cada tamanho de tela há duas orientações

– Paisagem

– Retrato

• Plano para diferentes configurações

– /res/layout-small-land e /res/layout-small-port

– /res/layout-normal-land e /res/layout-normal-port

– /res/layout-large-land e /res/layout-large-port

– /res/layout-xlarge-land e /res/layout-xlarge-land

Planeje seus layouts

6Page



Dois painéis (paisagem e retrato)

7Page



Fragmentos: dois painéis

Fragmentode Lista Fragmento

Atividade

findFragmentById(R.id.DetailFragment)

setContentView(R.layout.main)

8Page



Trabalhando com fragmentos no Android 3.01. Crie uma nova classe para cada um de seus fragmentos

• importe android.app.Fragment;

– estenda Fragment ou ListFragment (em vez de Activity)

– adicione chamadas de ciclo de vida2. Crie um novo arquivo resource.xml para cada fragmento

<ViewGroup> <UI elements> </ViewGroup>

3. Atualize main.xml com uma nova tag de fragmento para cada fragmento<fragmentclass="my.new.fragment.class"

android:id="@+id/fragmentIdX">4. Em MainApp.java (estende Activity)

• importe android.app.Fragment;

• carregue o layout do aplicativo com setContentView(R.layout.main)

• os itens da lista fragment1 se unem ao fragment2 com findFragmentById(R.id.fragmentIdX).

9Page



Anatomia de um projeto: somente dois painéis(Android 3.0)

myFragmentProject|-- AndroidManifest.xml|-- /src|------- /main.java // estender Activity|------- /fragment1.java // estender Fragment, ListFragment, DialogFragment, etc|------- /fragment2.java // estender Fragment, ListFragment, DialogFragment, etc|--- /res|------- /layout-land // layout paisagem|----------- /main.xml // tags do w/fragment do arquivo de recursos do

aplicativo em orientação paisagem|----------- /fragment1.xml // layout da UI do fragmento 1 |----------- /fragment2.xml // layout paisagem da UI do fragmento 2|------- /layout-port // layout retrato|----------- /main.xml // tags do w/fragment do arquivo de recursos do

aplicativo em orientação retrato|----------- /fragment2.xml // layout retrato da UI do fragment 2|------- /values-xlarge| . . .

10Page



Código 3.0: main.java

• A atividade principal aplica um layout da forma habitual duranteonCreate()

• setContentView (R.layout.main) carrega o arquivo de recurso que contém o layout com as tags <fragment>. Os fragmentos são instanciados assim que a atividade carrega o layout.

11Page



Código 3.0: Layout principal

fragment1 (lista)

fragment2 (detalhe)

Paisagemlado a lado

12Page



Código 3.0: Layout principal

Retratoparte superior atéa parte inferior

largura e altura da listaprecisam ser invertidosquando muda aorientação

13Page



Código 3.0: Lista de fragmentos

Configuraçãodo adaptador de lista

criar retornode chamada do item de lista

encontrar fragmentode detalhe e atualizar imagem

nova chamadade ciclo de vidapara a Activity criada

14Page



Código 3.0: Detalhe do fragmento

Inflar exibiçãode detalhe ecarregar a primeiraimagem

substituirimagemcom base naposição da lista

15Page



Código 3.0:UI de fragmentos

(fragmento 1)Item de lista

(fragmento 2)Framelayoutcom ImageView

16Page



• Definindo os recursos da UI

– Use as mesmas views e viewgroups como uma

Activity

Fragmentos com uma UI

listfragment.xml<TextView>

fragment.xml<FrameLayout>

<ImageView><LinearLayout><GridView>[. . .]dialogfragment

17Page



Fragmentos sem uma UI

• Como os fragmentos podem ser compartilhados entre as Atividades, épossível executar uma thread em um fragmento “worker” (sem UI) e compartilhá-la entre as Activities

• Ainda assim é preciso definir o fragmento em uma classe separada(subclasse Fragment)

– /src/WorkerFragment.java• Não precisa de arquivo de recurso, já que não há UI

– res/layout/WorkerFragment.xml• A tag <fragment> não é necessária no arquivo de layout da atividade,

porém não há mais um ID para localização do fragmento• Sem um @+id, é preciso interagir com o fragmento por meio de uma

“tag”

18Page



findFragmentByTag()public static class WorkerFragmentextends Fragment {

[. . .] // fazer algo em uma linha de plano de fundo}

public static class myOtherFragment extends Fragment {@Overridepublic void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

FragmentManagerfm = getFragmentManager();

// Verifique se o workerfragmentfoi mantido.m WorkFragment = (WorkerFragment)fm.findFragmentByTag("work");

// Se não foi (ou éo primeiro tempo em execução), temos que criá-lo.if(mWorkFragment == null) {mWorkFragment = new WorkerFragment();

// Informe com quem ele estátrabalhando.mWorkFragment.setTargetFragment(this, 0);fm.beginTransaction().add(m WorkFragment, "work").com mit();

}}

}

19Page



Android Compatibility Package (Pacote de compatibilidade do Android)

• também conhecido como “Fragmentos para Todos”• Honeycomb versus Pacote Android Compatibility• Qual é a diferença?

• A Compatibility Library funciona com API de nível 4 ou superior• Nova biblioteca que deve ser adicionada ao seu projeto• Novo tipo de Activity• Novas APIs

20Page



Painel duplo (Android 2.2 em paisagem)

21Page



Painel único (Android 2.2 em retrato)

22Page



Fragmentos: painel duplo

Fragmentode Lista Fragmento

FragmentActivity1

findFragmentById(R.id.DetailFragment)


23Page



Fragmentos: painel único

Fragmento

FragmentoActivity1

FragmentoActivity2

Fragmentode Lista

intent.setClass(getActivity(),Fragment2.class);startActivity(intent);


findViewById(R.id.DetailFragment) is NULL

24Page



Modificações para a Compatibility Library

• Atualizar recursos

– O layout retrato tem apenas a tag fragment1 (sem a tag fragment2)• Atualizar código

• importe android.v4.support.*

– Defina a função booleana com base na orientação

– Se orientation == landscape o painel é duplo• Exiba o fragment1 e fragment2

– Se orientation == portrait o painel é único• Abra fragment2 em uma nova FragmentActivity por meio de um intent

– Chame getSupportFragmentManager() em vez de getFragmentManager()

25Page



Anatomia de um projeto: painel duplo + painel único (pacote Android Compatibility) myFragmentProject|-- AndroidManifest.xml|-- /src|------- /main.java // estender FragmentActivity|------- /fragment1.java // estender Fragment, ListFragment, DialogFragment, etc|------- /fragment2.java // estender Fragment, ListFragment, DialogFragment, etc|------- /fragment2Main.java // estender FragmentActivity|--- /res|------- /layout-land // layout paisagem (orientação natural do tablet)|----------- /main.xml // arquivo de recurso do tablet ou do aplicativo em

orientação paisagem (duplo)|----------- /fragment1.xml // layout da UI do fragmento 1 |----------- /fragment2.xml // layout da UI do fragment 2 |------- /layout-port // layout retrato (orientação natural do smartphone)|----------- /main.xml/ // arquivo de recurso do phone ou do aplicativo em

orientação retrato (único)|----------- /fragment1.xml|------- /values-xlarge| . . .

26Page



Usando o Android Compatibility Package

• Configurando o ambiente

– Baixe o "Android Compatibility Package" utilizando o Android SDK & AVD Manager. No diretório de instalação do SDK, você encontraráextras/android/compatibility/v4/android-support-v4.jar.

– Crie um novo projeto Android no nível de API selecionado (4 a 10).

– Adicione o android-support-v4.jar ao diretório /libs do seu projeto.

– Se você é um usuário do Studio ou Eclipse, o adicione também ao seu build path para o projeto (Project (Projeto)->Properties(Propriedades)->Java Build Path (Caminho de Construção Java)->Libraries (Bibliotecas)->Add JAR (Incluir JAR).

27Page



Apresentação do código


28Page



A visão global

PRESSIONE

O celular precisa de duas telasÀ esquerda está uma lista, À direita estão os detalhes do ListItemselecionado

O tablet tem espaço para duas telas

Mas não temos uma maneira de colocar duas Activities em uma tela...

29Page



Até agora!• Nós ainda não podemos colocar duas Activities na tela

• Mas podemos fazer algo quase tão bom quanto

• Nós podemos colocar a maior parte de nossa Activity em um Fragment

• Fragments podem estar em um layout sozinhos, com Viewsou outros Fragments. O Framework já nos oferece recursos de layout alternativos para telas de diferentes tamanhos. Assim, basta criar um novo layout para dispositivos extra grandes.

• Voilà: tornar apps convenientes para o tablet é somente "refatoração"

30Page



Anatomia de um aplicativo (antes dos fragmentos)

PRESSIONE

setContentView(r.layout.showoneitem);

<LinearLayout …

<ScrollView …

res/layout/showoneitem.xml

ShowOneItemActivity.javaMainActivity.java

main.xml

31Page



Indo para a próxima tela

PRESSIONE

onCreate(…) {

}

ShowOneItemActivity.javai = new Intent( Ctxt,ShowOneItemActivity.class);startActivity( i );

MainActivity.java

<activity android:name=".MainActivity"/><activity android:name=”.ShowOneItemActivity"/>

</application>

AndroidManifest.xml

32Page



A Estratégia Fragment para ShowOneItemActivity

• Nós vamos mudar todo o código ShowOneItemActivity para um Fragment

• Esse Fragment será invocado por ShowOneItemActivity quando estiver em um dispositivo de tela pequena, normal ou grande

• ... mas também pode ser incorporado no layout XML de alguma outra Activity, quando estiver em uma tela extra grande

• Portanto, há duas maneiras de entrar no ShowOneItemFragmentA partir da Activity que doou todo o seu código para o FragmentA partir de um layout XML , que pertence a alguma outra Activity

33Page



Adicionará um Fragment para ShowOneItemActivity

<LinearLayout …

<ScrollView …

res/layout/showoneitem.xml

ShowOneItemActivity.javaQual é a sua aparênciaagora

Encaixe um Fragmentaqui

34Page



Adicione um Fragment para ShowOneItemActivity

<LinearLayout …

<ScrollView …

showoneitem.xml

setContentView(r.layout.showoneitem_actfrag);ShowOneItemActivity.java

<fragment class=”ShowOneItemFragment”

android:layout_width=…

res/layout/showoneitem_actfrag.xml

… extends Fragment {public View onCreateView(

LayoutInflater i, ViewGroup c, Bundle b) {

return i.inflate( R.layout.showoneitem, c);

ShowOneItemFragment.java

35Page



O arquivo XML para um fragmento

<?xml version="1.0" encoding="utf-8"?><fragmentxmlns:android="http://schemas.android.com/apk/res/android"android:name="com.example.ShowOneItemFragment"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@ +id/showoneitemfragment">

</fragment>

• Dimensionamento comum de layout para informar a altura e largura

• Pontos de XML para o classfile do Fragment

• Deve fornecer a ele um id ou tag

36Page



O código de um fragmento

public class foo extends Fragment {public void onCreate()public View onCreateView(...) public void onPause() ...

}

• Quando você muda o código da Activity, ele mapeia próximo aos mesmos eventos LifeCycle• Esses três métodos podem ser o suficiente. Salve o estado em OnPause• onCreateView() infla o XML, retorna a View raiz do Fragment

37Page



A história até agora

• Refatoramos nossa Activity em uma Activity e um fragment

• Todo o código de Activity mudou para o Fragment. A Activity agora é apenas uma cobertura fina para o Fragment

• Podemos entrar no código como uma Activity ou um Fragment

• Como escolher adequadamente?

38Page



Use o Alternative Resource (Recurso alternativo) para obter o layout correto!

PRESSIONE

XML para layout da telavermelha pequena

<fragment class= “a.b.c.d”

<fragment class=“w.x.y.z”

res/layout-xlarge/main.xml

res/layout/main.xml


Deixe que o “frame work”!

39Page



As listas podem ser um grande problema com essa abordagem

• Você não tem um arquivo XML para a lista como um todo

• Você só tem um arquivo XML para uma entrada na lista

• O setListAdapter faz a mágica de distribuir a ListViewna ListActivity

• Mas você precisa de arquivos XML para chegar aos fragments a partir de Activities

• Solução? ListFragment! Similar ao ListActivity

40Page



Um último conselho

• Os fragmentos são legais e você vai querer usá-los para que seus apps se adequem ao tablet

• Tenha muito cuidado com classes consistentes e nomes de arquivoXML!

• Alguns métodos de substituição exigem uma chamada para a superclasse, por exemplo, onCreate() ao usar uma FragmentActivity

• Dentro de um Fragment, getActivity() é muito útil

• Em uma Activity, estender FragmentActivity para obter operações de Fragment, como getSupportFragmentManager();

41Page



Usando os Fragments: informações

• Informações de instruções no 3.0 Developer Guide (Guia do desenvolvedor do 3.0) em Fragments

• Consulte a 3.0 Reference para APIs

– android.app.Fragment

– android.app.ListFragment

• Exibe uma lista semelhante à ListActivity

– android.app.DialogFragment

• Exibe um diálogo flutuante

– android.app.FragmentManager

• Interface para interagir com o fragment (findFragmentById)

– android.app.FragmentTransaction

• APIs para operações de fragment (adicionar, remover, substituir, ocultar, mostrar)

42Page



Usando Fragments: exemplos• Aplicativo Honeycomb Gallery para fragments do Android 3.0• Na pasta de extras do Android Compatibility Package

– /android-sdk/extras/android/compatibility/v4/samples/ApiDemos/src

/com/example/android/apis/app/

– Procure o Fragment<>.java para versão HC

– Fragment<>Support*.java para código do pacote Android Compatibility• Publicações do blog de Reto Meier

– http://blog.radioactiveyak.com/2011/02/android-app-surgery-earthquake-redux.html

– http://blog.radioactiveyak.com/2011/02/strategies-for-honeycomb-and-backwards.html

• Publicações do blog de Dianne Hackborn

– http://android-developers.blogspot.com/2011/02/android-30-fragments-api.html (The Android 3.0 Fragments API)

43Page



Obtenha mais informações: developer.motorola.com

• Ferramentas

– MOTODEV Studio: IDE baseada no Eclipse com recursos adicionais (localização de String, gerente de banco de dados)

– App Validator: ferramenta on-line para pré-testes de aplicativos Androidpara compatibilidade entre dispositivos

• Artigos técnicos

– Dicas de programação para o Motorola XOOM

– Entendendo a compactação de textura• Especificações do produto

– http://developer.motorola.com/products/xoom/• Fóruns de discussão

introdução a fragmentos

Technology