Jetpack Compose – Uma introdução

Publicado em por
Tempo de leitura: 4 minutes

O JetPack Compose é um kit de ferramentas moderno para a criação da interface de usuário nativa do Android. Essa biblioteca nos permite desenvolver interfaces de usuário intuitivas com menos código, mais desempenho e desenvolvimento mais rápido. Ela faz parte do grupo de bibliotecas Jetpack. Ela usa uma abordagem declarativa para o desenvolvimento de interfaces de usuário. Isso não é novidade para nós, pois as estruturas de front-end, como o flutter e o react, usam uma abordagem semelhante de forma ligeiramente diferente.

 

Vantagens de usar o Jetpack Compose

  • Abordagem declarativa – o Compose é totalmente declarativo, o que significa que precisamos descrever a interface do usuário chamando uma série de funções que convertem dados em uma interface do usuário. Quando os dados mudam, não precisamos fazer coisas extras, pois a estrutura recupera automaticamente essas funções e atualiza a hierarquia de exibição.
  • Independente da plataforma Android – Ele é integrado aos aplicativos como uma biblioteca e separado das versões da plataforma Android. Isso permite que o Compose seja atualizado com mais frequência do que o kit de ferramentas de interface do usuário legado existente.
  • Menos código e desenvolvimento rápido – Com a UI baseada em xml, precisamos escrever mais código, que também aumenta à medida que a complexidade da UI aumenta. Como o código está espalhado pelo aplicativo em diferentes locais, isso causa lentidão no desenvolvimento. Com o compose, podemos superar esses problemas.
  • Compatibilidade com versões anteriores – Ele foi projetado para ser compatível com versões anteriores e funcionar com os aplicativos existentes com o mínimo de alterações. Isso significa que ele funcionará com as exibições existentes, e você poderá escolher os elementos a serem usados.

 

Primeiros passos

Para obter a melhor experiência de desenvolvimento com o Jetpack Compose, você deve usar a versão mais recente do Android Studio Hedgehog. Ela lhe dará a capacidade de visualizar imediatamente a interface do usuário do Compose. Você pode fazer download da versão Hedgehog 2023.1.1 Patch  1 aqui.

Configuração do Gradle

O Compose é compatível com versões anteriores até o nível 21 da API, portanto, precisamos definir minsdkVersion como 21 e ativar o Compose. Precisamos definir a versão do plug-in do compilador Kotlin conforme mostrado abaixo no arquivo modules build.gradle.

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

Adicionar dependências do Compose

dependencies {
    implementation("androidx.core:core-ktx:1.10.1")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.1")
    implementation("androidx.activity:activity-compose:1.7.0")
    implementation(platform("androidx.compose:compose-bom:2023.08.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")
}

Agora estamos prontos para criar a interface do usuário para o nosso aplicativo usando o compose.

 

Adição de elemento de texto simples na tela

Com o compose, você não usará nenhum xml, portanto, não há necessidade de setContentView() em suas atividades ou fragmentos; em vez disso, você usará setContent() para configurar sua UI. É uma função de extensão do Kotlin que recebe o lambda composable como parâmetro.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CapSistemaTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

 

Defina uma função composta

No método de composição marcado com a anotação @Composable, ele será usado para criar a interface do usuário. Adicione a anotação @Composable ao método

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

 

Visualize sua função no Android Studio

Você pode visualizar funções compostas no IDE, e não há necessidade de baixar o aplicativo em um dispositivo Android ou emulador, adicionando a anotação @Preview ao método.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    CapSistemaTheme {
        Greeting("Android")
    }
}

Depois de adicionar a anotação, você precisa reconstruir o projeto. O Android Studio adiciona uma janela de visualização. Essa janela mostra uma visualização dos elementos da interface do usuário criados pela função componível. Para atualizar as visualizações a qualquer momento, clique no botão de atualização na parte superior da janela de visualização. A visualização é aplicável às funções compostas que não recebem nenhum argumento.

Adição de várias visualizações e posicionamento delas na tela

Se modificarmos a função greeting para adicionar três elementos de texto dentro da visualização de conteúdo e como não fornecemos nenhuma informação sobre como organizá-los, os três elementos de texto serão desenhados um sobre o outro, tornando o texto ilegível.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    CapSistemaTheme {
        Greeting("Android")
        Greeting("Android 1")
        Greeting("Android 2")
    }
}

Para posicioná-los na tela, podemos usar a composição de colunas que posiciona os três textos um abaixo do outro.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    CapSistemaTheme {
       Column {
         Greeting("Android")
         Greeting("Android 1") 
         Greeting("Android 2")
      }
    }
}

 

Você também pode usar row() composable para posicionar as exibições horizontalmente na tela. Além disso, você pode adicionar o Material Theme, pois o suporte integrado é fornecido para ele.

Considerações finais

Aprendemos coisas muito básicas que podemos realizar com o compose. Entretanto, com o compose, podemos fazer muito mais coisas. Pessoalmente, acho que o compose será definitivamente o futuro do desenvolvimento da interface do usuário no Android.

 

Leitura adicional

Você pode encontrar mais detalhes sobre o compose na documentação oficial

Se quiser experimentar por conta própria, recomendo que experimente este codelab

 
Twittar
Compartilhar
Compartilhar
0 Compart.