Présentation de JetPack Compose

Qu'est-ce que JetPack Compose ?

Jetpack Compose est une boîte à outils moderne pour créer une interface utilisateur Android native. Jetpack Compose simplifie et accélère le développement de l'interface utilisateur sur Android avec moins de code, des outils puissants et des API Kotlin intuitives.

Jetpack Compose est une programmation totalement déclarative, ce qui signifie que vous pouvez décrire votre interface utilisateur en invoquant un ensemble de composable. Depuis dix ans, nous utilisons une méthode traditionnelle de conception d'interface utilisateur impérative.  

Exemple de Jetpack Compose

Programmation impérative vs programmation déclarative

Interface utilisateur impérative  

C'est le paradigme le plus courant. Cela implique d'avoir un prototype/modèle séparé de l'interface utilisateur de l'application. Cette conception se concentre sur le comment plutôt que sur le quoi. Un bon exemple est les mises en page XML dans Android. Nous concevons les widgets et les composants qui sont ensuite rendus pour que l'utilisateur puisse les voir et interagir avec.

Exemple de code d'interface utilisateur impératif :

XML :

< TextView
        android : id = "@+id/tv_name" 
        android : layout_width = "match_parent" 
        android : layout_height = "wrap_content" 
     / >

Kotlin :

class MainActivity :  AppCompatActivity  {

     val tvName : TextView

    override fun  onCreate(saveInstanceState : Bundle? )  { 
        super.onCreate ( saveInstanceState ) 
        setContentView ( R.layout.activity_main )
        tvName =  findViewById (R.id.tv_name ) 
        tvName.setText( "Hello World" ) ; 
    } 
}

Interface utilisateur déclarative  

Ce modèle est une tendance émergente qui permet aux développeurs de concevoir l'interface utilisateur en fonction des données reçues. Ceci, d'autre part, se concentre sur le quoi. Ce paradigme de conception utilise un langage de programmation pour créer une application entière.
 

class MainActivity : ComponentActivity ( ) { 
     override fun onCreate ( sauvegardedInstanceState: Bundle? ) {
         super . onCreate ( saveInstanceState ) 
         setContent { 
              Text ( text = "Hello World" ) 
         } 
    }
 }

Dans JetPack Compose, aucun code xml n'est nécessaire. Nous pouvons créer des vues en utilisant des composable.

Avantages de JetPack Compose

• Il est très rapide et offre une performance fluide.
• C'est simple à apprendre.
• Il est possible d'interopérer avec une approche impérative.
• Offre une meilleure façon de mettre en œuvre les principes de couplage lâche.
• Il est 100% fabriqué en Kotlin, ce qui en fait une approche moderne du développement Android.

Fonction composable

C'est comme n'importe quelle fonction en programmation. Mais nous devons annoter avec l'annotation @Composable.


Syntaxe:

@Composable 
fun MethodName ( arg : String )  { 
    // votre contenu 
}

Exemple:

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

Dans cet exemple, nous avons créé une nouvelle fonction composable : Greeting(). 
Nous utilisons le Text() comme contenu. C'est une fonction composable intégrée. Nous pouvons ajouter des fonctions composables à une autre fonction composable.

Après avoir créé une fonction composable, nous pouvons l'utiliser comme contenu.


Exemple d'application Hello world utilisant Jetpack Compose :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}

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

Dois-je utiliser Jetpack compose dans mon Android studio existant ?
Oui, jetpack Compose est maintenant supporter par les versions recentes d'Android Studio.

Vous avez besoin de la version bêta d'Android Studio. Lien vers la version bêta .

Et vous devez également ajouter des dépendances pour Jetpack Compose.

//var compose_version = '1.3.1' 
implementation 'androidx.activity:activity-compose:1.6.1'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"

Nous verrons plus de fonctions composables dans les prochain tutoriels.

Pour avoir plus d'informations de base sur Jetpack Compose aller sur le site officiel.

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

Exemples de projets disponibles sur Github

https://github.com/android/compose-samples