Ver mensagens sem resposta | Ver tópicos ativos Hoje é 11 Dez 2019, 09:55



Responder Tópico  [ 3 Mensagens ] 
 Estilizando o layout 
Autor Mensagem
Google employee
Google employee

Data de registro: 28 Jun 2012, 19:13
Mensagens: 1308
Localização: Itaperuna-RJ
Mensagem Estilizando o layout
Galera, esse tutorial é algo simples mas que considero um bom padrão para facilitar a manutenção e reduzir uma boa quantidade de linhas no xml. As vantagens são muitas... menos linhas de código xml, padrão do layout no projeto inteiro e reutilização de código. Desvantagem... o eclipse não entende essa mudança e você perde a visualização sem compilar o app.

Por que usar estilos? Criando uma tela de formulário simples a quantidade de código repetido é enorme, se o projeto possuir N layouts... podemos multiplicar esse código repetido por N. Estilizando o layout a quantidade de código repetido diminui consideravelmente, pois um mesmo estilo pode ser usado sempre que preciso.

Olhando seu código xml, o que mais temos são definições de largura e altura... como:
android:layout_width="fill_parent"
    android:layout_height="wrap_content"

Então esse será nosso primeiro estilo, abra o arquivo styles.xml e crie um novo estilo chamado FillWrap. Nele faça assim:
<style name="FillWrap" >
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>


No nosso layout, podemos fazer:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/FillWrap"
    android:orientation="vertical" >

Pronto! Reduzimos de 2 linhas no nosso layout.xml para 1... Hehehe Não parece tão vantajoso né? Falta a melhor parte... os estilos podem herdar de outros estilos.

Crie outro estilo, esse chamado de WrapWrap e faça assim:
<style name="WrapWrap">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>


Esse estilo não usaremos sozinho, ele será o pai dos nossos próximos estilos.

O xml original ficaria assim:
<TextView
        android:id="@+id/textView1"
        android:text="@string/formulario"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:textSize="20sp"
        android:textStyle="bold" />

 

Mas agora criaremos um style para esse textView... dê o nome de Cabecalho, e faça o style com esses parametros e herdando de WrapWrap.
<style name="Cabecalho" parent="WrapWrap">
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:layout_margin">10dp</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
    </style>


Então onde quer que você precise dessa combinação de atributos, vocẽ usará apenas o style Cabecalho... assim:
<TextView
        android:id="@+id/textView1"
        android:text="@string/formulario"
        style="@style/Cabecalho" />


Uma redução considerável, né? Imagine multiplicado por 10? Finalizando... podemos trocar o layout
<TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/nome"
                android:textSize="18sp"
                android:textStyle="bold" />


por:
<TextView
                android:id="@+id/textView2"
                android:text="@string/nome"
                style="@style/Label" />


Com estilo:

<style name="Label" parent="WrapWrap">
        <item name="android:layout_margin_left">5dp</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textStyle">bold</item>
    </style>


Você pode atribuir os atributos no layout que eles substituirão o valor do atributo caso um estilo tenha um atributo diferente do que você deseja.

Comparando layout sem estilo x com estilo:

Sem estilo:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:text="@string/formulario"
        android:textSize="20sp"
        android:textStyle="bold" />


    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >


        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >


            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/nome"
                android:textSize="18sp"
                android:textStyle="bold" />


            <EditText
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="text" >


                <requestFocus />
            </EditText>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >


            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/sobrenome"
                android:textSize="18sp"
                android:textStyle="bold" />


            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="text" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >


            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/cidade"
                android:textSize="18sp"
                android:textStyle="bold" />


            <EditText
                android:id="@+id/editText3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="text" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >


            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/email"
                android:textSize="18sp"
                android:textStyle="bold" />


            <EditText
                android:id="@+id/editText4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="text" />

        </TableRow>
    </TableLayout>

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:text="@string/formulario_2"
        android:textSize="20sp"
        android:textStyle="bold" />


    <Button
        android:id="@+id/buttonEstilizado"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/estilizado" />


</LinearLayout>


Com estilo:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/FillWrap"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/textView1"
        android:text="@string/formulario"
        style="@style/Cabecalho" />


    <TableLayout
        style="@style/FillWrap" >


        <TableRow
            android:id="@+id/tableRow1"
            style="@style/FillWrap" >


            <TextView
                android:id="@+id/textView2"
                android:text="@string/nome"
                style="@style/Label" />


            <EditText
                android:id="@+id/editText1"
                style="@style/EditText" >


                <requestFocus />
            </EditText>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            style="@style/FillWrap" >


            <TextView
                android:id="@+id/textView3"
                android:text="@string/sobrenome"
                style="@style/Label" />


            <EditText
                android:id="@+id/editText2"
                style="@style/EditText" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            style="@style/FillWrap" >


            <TextView
                android:id="@+id/textView4"
                android:text="@string/cidade"
                style="@style/Label" />


            <EditText
                android:id="@+id/editText3"
                style="@style/EditText" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            style="@style/FillWrap" >


            <TextView
                android:id="@+id/textView5"
                android:text="@string/email"
                style="@style/Label" />


            <EditText
                android:id="@+id/editText4"
                style="@style/EditText" />

        </TableRow>
    </TableLayout>

    <TextView
        android:id="@+id/textView6"
        android:text="@string/formulario_2"
        style="@style/Cabecalho" />


    <Button
        android:id="@+id/buttonEstilizado"
        android:layout_gravity="center_horizontal"
        style="@style/WrapWrap"
        android:text="@string/estilizado" />


</LinearLayout>


Boa redução! O projeto para download se encontra em: https://github.com/raphaelframos/estilo
Espero que ajude! Vlw!

_________________
Powell


27 Abr 2013, 01:15
Perfil
Google employee
Google employee
Avatar de usuário

Data de registro: 05 Abr 2011, 04:47
Mensagens: 1968
Localização: Rio de Janeiro
Mensagem Re: Estilizando o layout
Raphael,

Muito bom artigo, parabéns!!!

Mande o seu currículo e venha conversar comigo, vamos negociar!! =D

Abraços!!

_________________
Alexandre Antunes
@a3b @bemobi
Moto X

App@Bemobi: Apps Club - Loja de Apps baseada em assinatura que dá direito a usar ~400 Apps.

Campanha: Facilite sua vida e a dos outros usuários.
Objetivo: Vamos colocar a tag [RESOLVIDO] no título do tópico quando o problema for resolvido.


Use a ferramenta de busca do fórum e não espere tanto para que a sua dúvida seja respondida!

Quer trabalhar comigo??


27 Abr 2013, 02:34
Perfil WWW
Google employee
Google employee

Data de registro: 28 Jun 2012, 19:13
Mensagens: 1308
Localização: Itaperuna-RJ
Mensagem Re: Estilizando o layout
Hehehe vlw Antunes! Vou mandar, é complicado pra mim, mas claro que não vou dispensar uma conversa :D Abraço!

_________________
Powell


27 Abr 2013, 03:00
Perfil
Mostrar mensagens anteriores:  Organizar por  
Responder Tópico   [ 3 Mensagens ] 

Quem está online

Usuários vendo este fórum: alex, Analista, Anderson MarkZ, Anderson.OL, andreluiz, Andrey, augustomig, Bitor, BornSlip, bruno.abd, caio, car.demarco, cassiano, china, cleberkct, cosmotheoro, czambroni, d.paim, DaDih*, Danilo Dias, danilosouza, Darth Sidious, David, diogeneskelsen, dirceuconte, e-azuos, eduardo.ali, eduzortea, eloilton, Emanuella, emersonalencar, epsilva, eXagon, fabiano_eletro, felipetesc, Flávio Robertgo, frances135, Francisco_Geraldo, gedoor, gfgodoy, Gui Pereira, gutomilani, hbarroco, henrique.garcia, hostdesigner, ice, IgorBrum, inaciofernandes, ismavolk, jeanbr07, jlucasps, JuniorE, juniorfranca, Juniorvs, klassmann, klausenner, lalaine, Liviosousa, lucianno, luciocamilo, Luna, mapis, MarceloMC, marcosf63, maurofjr, maximilianjx, Maxtremus, mayahaslinger, mcurtis, memnoch, mrkensley, nandokanarski, nfaria, nsansilva, Padawan, pamonteiro, Patricia, phfmendes, Portal Android, pumadeejay, rafaelmonoh, rafaelvital, ramonrabello, rananfu, reginaldo, renan.fernandes, ricardoogliari, robsonoracle, ronamore, rubens_olv, Rufino, SidneiCP, taluna, tchou, the_hulk_knifer, tiagofalcao, ton.soares, Vinicius, viniciusluiz, washington, wcaciano, wilsond e 2 visitantes


Você não pode criar novos tópicos neste fórum
Você não pode responder tópicos neste fórum
Você não pode editar suas mensagens neste fórum
Você não pode excluir suas mensagens neste fórum
Você não pode enviar anexos neste fórum

Procurar por:

© 2007 - 2016 Portal Android - Comunidade de Desenvolvedores Android

Estamos no Linkedin    Siga-nos no twitter


Powered by phpBB - Hospedado por Bemobi