Jetpack Compose – Uma maneira nova e simples de criar IU de material no Android

Publicado em por
Tempo de leitura: 5 minutes

Introdução

Antes de discutirmos a composição do Jetpack, você sabe o que é Jetpack?

O Android Jetpack é um conjunto de componentes de software Android que nos ajudam a construir aplicativos Android excelentes e perfeitos.

Esses componentes de software ajudam com:

  • Seguindo as melhores práticas e escrevendo menos código clichê.
  • Tornando as coisas complexas simples.

Agora, o Jetpack Compose é uma das tentativas recentes do Google de tornar mais fácil para os desenvolvedores Android no desenvolvimento de IU. O Jetpack Compose está em seus estágios iniciais, mas ganhou o hype como qualquer outra biblioteca Jetpack (WorkManager, Room e Pagination).

“Jetpack Compose é um kit de ferramentas moderno para construir IU nativa do Android. O Jetpack Compose simplifica e acelera o desenvolvimento da IU no Android com menos código, ferramentas poderosas e APIs Kotlin intuitivas. – Desenvolvedores Android”

Observação: se você deseja usar o Jetpack Compose com o Android Studio, deve usar o Android Studio Canary 4.1 ou superior.

Por que precisamos do Jetpack Compose?

JetPack combina um modelo de programação reativo com a concisão e facilidade de uso da linguagem de programação Kotlin. É totalmente declarativo, o que significa que você descreve sua IU chamando uma série de funções que transformam dados em uma hierarquia de IU. – Codelab

Geralmente, usamos layout relativo, layout linear ou layout de quadro para construir arquivos de layout, mas, em seguida, o layout super-restrito entrou em cena, atraindo a todos nós (desenvolvedores Android). É bom, mas eles só podem ser usados ​​em nossos arquivos de layout tradicionais.

  • E se não houver mais relações de layout relativas ou restrições de layout precisam ser escritas em seus arquivos de layout?
  • Podemos ir um pouco mais adiante e dizer: “E se tivermos uma nova maneira de criar IU sem arquivos de layout?”

É possível? Sim, é, e isso é o que chamamos de Jetpack Compose.

Não importa quantos layouts avançados, como layouts de restrição relativa, tenhamos, sempre perdemos uma IU declarativa no Android.

Embora tenhamos algumas bibliotecas de terceiros, seria ótimo ter uma biblioteca nativa e agora tê-la. Seu nome é Jetpack Compose.

No Google IO ’19, o Google lançou o Jetpack Compose para criar uma IU declarativa no Android. Então, basicamente, uma IU declarativa significa especificar os elementos da IU que você deseja em um formato usando uma linguagem particular.

Integração

Isso pode ser feito em quatro etapas fáceis

  • Adicione google() ao arquivo build.gradle do projeto.
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
    }
}
dependencies {
        classpath 'com.android.tools.build:gradle:4.0.0-alpha01'
        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25'
    }

Ative o Compose e defina o destino dos compiladores Java e Kotlin para Java 8, conforme mostrado abaixo no arquivo build.gradle de nível de aplicativo.

buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...    // Set both the Java and Kotlin compilers to target Java 8.    
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
  • Por fim, adicione dependências do Jetpack Compose.
implementation "androidx.compose:compose-runtime:0.1.0-dev02" implementation "androidx.ui:ui-core:0.1.0-dev02" 
implementation "androidx.ui:ui-layout:0.1.0-dev02" 
implementation "androidx.ui:ui-framework:0.1.0-dev02" 
implementation "androidx.ui:ui-material:0.1.0-dev02" 
implementation "androidx.ui:ui-foundation:0.1.0-dev02" implementation "androidx.ui:ui-text:0.1.0-dev02" 
implementation "androidx.ui:ui-tooling:0.1.0-dev02"

Isso é tudo, terminamos com a integração.

Iniciando uma nova atividade de composição

Agora que terminamos a configuração, é hora de criar uma nova atividade com o Jetpack Compose.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        //your design 
    }
}

Na função onCreate, usamos setcontent em vez de setcontentview porque, aqui, não usamos mais arquivos de layout para IU. Como mencionamos a sinalização buildFeatures {compose true} em build.gradle, isso deve funcionar bem.

Como somos desenvolvedores aprendendo o ABC do Jetpack Compose, vamos começar com uma visualização de texto simples com o texto “Olá Mundo”. Dar uma olhada:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        Greeting()
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Ola Mundo $name!")
}

Funções composable

Uma função combinável é uma função normal anotada com @Composable.

Isso permite que sua função chame outras funções @Composable dentro dela. Você pode ver como a função Saudação está marcada como @Composable. Esta função produzirá uma parte da hierarquia da IU.

As funções composíveis só podem ser chamadas a partir de outras funções combináveis.

Criando um contêiner usando o Jetpack Compose

Aqui, vamos construir um comportamento de layout linear com modo vertical. Vamos construir uma nova história com uma IU combinável, conforme mostrado abaixo.

@Composable
fun NewStory(){
    Text("Olã")
    Text("Como você está")
    Text("Esta é uma IU declarativa da composição do Jetpack")
}

Mas se você simplesmente fizer isso, a saída pode não ser a esperada, você meio que tem uma opinião de como sua IU deve aparecer.

Portanto, aqui temos um novo conceito chamado coluna, que é semelhante a layouts em arquivos XML. Vamos ver o exemplo acima com colunas e espaçamento.

@Composable
fun NewStory(){
  Column(Spacing(16.dp)){
    Text("Olá")
    Text("Como você está")
    Text("Esta é uma IU declarativa da composição do Jetpack")
  }
}

É assim que você terá uma IU com estilo de layout linear vertical e espaçamento padrão.

Como a coluna, agora temos uma linha que exibe visualizações no modo horizontal e, como a equipe do Jetpack disse, eles estão tentando incluir funcionalidades de layout de restrição, então há mais por vir, seja paciente.

Componente de material com Jetpack Compose

O Jetpack Compose é construído tendo os componentes materiais em mente, ou seja, é altamente investido em componentes materiais. Vejamos um exemplo de construção de um cartão de material conforme abaixo:

Se você observar com atenção, ele tem várias diretrizes de materiais, como cantos arredondados, espaçamentos, estilos de texto e assim por diante. Vamos ver como implementar isso com métodos @Composable.

Card(shape = Rounded Corner Shape (4dp)) {
   Column {
      SimpleImage(image)
      Text("Um dia em Shark Fin Cove",
        style = +themeTextStyle { 16 } )
      Text("Davenport, Califórnia",
        style = +themeTextStyle { subtitle } }
      Text("Dezembro de 2018",
        style = +themeTextStyle { body1 } )

      Row {
        Button("Abre",
          style = ContainedButtonStyle())
        Button("Dispensar",
          style = TextButtonStyle())
      }
   }
}

Agora vamos examinar o código, passo a passo.

  1. Primeiro, envolva todo o código no cartão, é como uma visualização de cartão material em um arquivo XML.
  2. O cartão tem cantos arredondados. Para obter essa IU, usamos o atributo de forma no cartão com 4dp como raio.
  3. Para alinhar as visualizações verticalmente, usamos uma coluna.
  4. Para carregar uma imagem no Jetpack Compose, temos uma função chamada SimpleImage por meio da qual podemos carregar URLs remotos, arquivos ou URIs.
  5. Sobre as visualizações de texto, já discutimos como criar e atribuir texto a elas.
  6. Mas aqui, há mais para a visão de texto básica. Aqui, as visualizações de texto estão em cores e tamanhos de texto diferentes. Para isso, usamos o conceito de estilos.
  7. Aqui, os estilos são criados com base nas regras materiais.
  8. Finalmente, para finalizar o design, adicionamos dois botões com linha (alinhar as visualizações horizontalmente).
  9. Novamente, usamos o material design para moldar os botões da maneira como estão agora.

Visualizações personalizadas

Não importa quantas visualizações padrão tenhamos, os designers sempre de alguma forma apresentam novos designs e visualizações estranhas.

Foi muito trabalhoso fazer da maneira tradicional para criar uma visualização personalizada, mas no Jetpack Compose, você pode construir uma visualização personalizada escrevendo uma função.

Aqui, no Jetpack, precisamos apenas criar uma função combinável para criar uma visualização personalizada. Temos blocos de construção para ajudar a criar visualizações personalizadas nas quais o draw e o layout são dois elementos básicos.

Draw

O Draw lhe dará a alça para fazer qualquer tipo de codificação personalizada que você deseja fazer.

Layout

O Jetpack fornece layouts básicos no início com coluna e linha. Agora, isso está funcionando para trazer o layout de restrição ao Jetpack Compose.

Links Úteis

https://developer.android.com/jetpack/compose

https://developer.android.com/jetpack/compose/setup

https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/index.html?index=..%2F..index#1

Obrigado por ler.

 
Twittar
Compartilhar
Compartilhar
0 Compart.