6

Queria cria uma tela(Activity) base para o app android que estou desenvolvendo, para que todas as demais telas herdassem desta base. Assim sendo, a tela teria uma área reservada para o topo da página, uma região central onde o conteúdo vai ser variável e uma área de rodapé que conteria dois botões.
Como poderia fazer isso?

3
  • 2
    Creio que a ideia seria fazer uso de Fragment na área que fica variável. Mas detalhes de implementação pra isso não tenho. Eu pessoalmente evito usá-los.
    – mutlei
    Commented 23/02/2015 às 12:07
  • 1
    Como o @mutlei disse Fragments é a melhor solução. Não vejo razão para não usa-los. Para melhor entendimento, recomendo dar uma olhada nessa pergunta: pt.stackoverflow.com/questions/17483/….
    – Wakim
    Commented 23/02/2015 às 12:09
  • Eu evito usá-los pois as aplicações que fiz até agora, @Wakim, não precisavam deles e só me dava mais dor de cabeça. Mas se bem usados, podem ser uma mão na roda, creio.
    – mutlei
    Commented 23/02/2015 às 12:11

3 Respostas 3

8

Outras respostas já deram algumas alternativas, mas acho que posso acrescentar mais uma.

Minha sugestão seria criar um layout único como sendo um template de verdade e usar um ViewStub para definir o conteúdo dinâmico desse template durante a criação das Activity's.

Por exemplo:

template.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">

    <!-- Aqui entra seu topo -->
    <include ... />

    <!-- O ViewStub guarda lugar para um layout
         a ser definido por quem usar -->
    <ViewStub android:id="@+id/stub"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:weight="1" />

    <!-- Aqui entra seu fundo -->
    <include ... />
</LinearLayout>

Para mudar dinamicamente o layout durante a criação da Activity é só fazer:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Pode "setar" normalmente seu layout
    setContentView(R.layout.template);

    ViewStub vs = findViewById(R.id.stub);

    // Define qual o layout a ser inflado
    vs.setLayoutResource(R.layout.seuLayoutAtual);
    View conteudoPrincipal = vs.inflate();
}

Lembrando que o ViewStub sairá da árvore e dará lugar a toda sub-árvore que está definido no layout que você passar no método ViewStub.setLayoutResource. O método inflate retorna a raiz do layout que você inflou.

Dessa forma você reaproveitar o mesmo layout apenas mudando o conteúdo que precisa.


Para a questão de função/comportamentos que pertencem ao template, você pode criar uma classe, podendo ser abstrata se preferir, que herde de alguma subclasse ou a própria Activity (FragmentActivity, ListActivity e assim em diante) que contenha esse comportamento que é comum a todos.

Você teria algo como:

public abstract class BaseActivity extends Activity {

    // Template method para retornar o conteudo
    // interno ao template.
    // Sendo abstrato para obrigar que a subclass forneca
    public abstract @LayoutRes int getContentLayoutId();

    // Metodo responsavel por configurar o conteudo do template
    public abstract void onCreateContent(View conteudo);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.template);

        ViewStub vs = findViewById(R.id.stub);

        // Define qual o layout a ser inflado
        vs.setLayoutResource(getContentLayoutId());
        View conteudoPrincipal = vs.inflate();

        // Configuracao de listener de eventos e etc

        // Deixa a subclasse configurar o conteudo
        onCreateContent(conteudoPrincipal);
    }

    // Metodos comuns
}

Onde cada Activity que irá usar o template definirá o conteúdo:

public class ActivityLoja extends BaseActivity {
    @Override
    public int getContentLayoutId() {
        return R.layout.loja;
    }

    @Override
    public void onCreateContent(View conteudo) {
        // Configuracao do conteudo
    }

    // Restante do codigo da sua Activity
}

public class ActivityCarrinho extends BaseActivity {
    @Override
    public int getContentLayoutId() {
        return R.layout.carrinho;
    }

    @Override
    public void onCreateContent(View conteudo) {
        // Configuracao do conteudo
    }

    // Restante do codigo da sua Activity
}

O registro é normal, como se não houvesse a herança:

<activity
    android:name=".activity.ActivityLoja"
    android:label="@string/loja" />

<activity
    android:name=".activity.ActivityCarrinho"
    android:name="@string/carrinho" />

Algumas referências:

6
  • essa sem dúvida é a melhor forma, menos trabalhosa e mais organizada, para realizar este trabalho! Commented 24/02/2015 às 12:00
  • No caso quero criar uma Activity "completa" como base, ou seja, ter métodos implementados na classe relacionados aos componentes do xml, teria como fazer a herança disso também? Commented 24/02/2015 às 17:01
  • Ah sim, é possível e bem comum. Você pode ter uma classe abstrata (abstrata ou não, dependendo da sua modelagem) que possui todos os métodos em comum. Ela deve herdar de Activity ou ActionBarActivity ou outra subclasse de Activity. Todas as outras Activity's que usarem o template podem herdar dessa classe comum que também é uma Activity válida.
    – Wakim
    Commented 24/02/2015 às 17:04
  • No código da classe abstrata, onde temos vs.setLayoutResource(getContentResId()); na verdade é: vs.setLayoutResource(getContentLayoutId()); correto? Commented 3/03/2015 às 16:59
  • Isso @MuriloFechio, erro meu, vou corrigir, de resto está correto.
    – Wakim
    Commented 3/03/2015 às 17:18
5

Acredito que vc quer é um Designer de telas(XML) e não de Tela(activity) estou certo?

Se for esta a sua questão então , você quer saber como se faz uma velha prática de reuso de layouts assim como é uma boa prática em páginas web.

Para fazer uma tela ou seja um layout xml que pode ser reusado em toda parte do aplicativo, de forma que tenha um topo um corpo e um rodapé.

faça..

master_top.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:padding="5dp" >

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_margin="5dp"
    android:src="@drawable/my_logo" />

</RelativeLayout>

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f0f0f0" >


<include android:id="@+id/topo_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    layout="@layout/master_top" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#ffffff"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$$$$$$$ CORPO $$$$$$$"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#1AA52F" />

</LinearLayout>

<include
    android:id="@+id/rodape_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    layout="@layout/master_footer" />

</RelativeLayout>

master_footer.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:padding="5dp" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:text="-----------RODAPE---------------"
    android:textColor="#EFEFEF" />

</RelativeLayout>

...

Você também pode usar < merge >

REF oficial site. http://developer.android.com/training/improving-layouts/reusing-layouts.html

1
  • Neste caso, em todas as telas que eu desenhar eu teria que fazer o include do top, do footer e criar um layout para o centro, correto? Não teria como eu dar o include em um xml tipo esse activity_main que você deu de exemplo e "desenhar" somente o conteúdo do interior do LinearLayout? Commented 23/02/2015 às 16:40
4

Tem como sim, seria como você fazer o inverso do exemplo! No exemplo é só fazer uma cópia do (XML) e mudar o corpo e pronto. Mas não tem como fugir, uma parte do layout você não vai conseguir sair do trabalho de fazer.

Para fazer desse forma que você falou basta fazer o contrário.

Exemplo:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:padding="5dp" >

    <!-- Top -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="5dp"
        android:src="@drawable/my_logo" />



<!-- Body -->
    <include android:id="@+id/topo_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        layout="@layout/my_body" />



    <!-- Footer --> 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:text="-----------RODAPE---------------"
        android:textColor="#EFEFEF" />

    </RelativeLayout>

my_body.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="#f0f0f0" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#ffffff"
        android:orientation="vertical"
        android:padding="5dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@@@@@@@ MY BODY @@@@@@@@"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#1AA52F" />

    </LinearLayout>


    </RelativeLayout>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .