Disposition des contraintes d'Android jetpack Compose

aperçu

Nous savons tous que ConstraintLayout peut réduire efficacement la hauteur de l'arborescence de vues et aplatir l'arborescence de vues lors de la création d'une interface de vue imbriquée et complexe. La disposition des contraintes a de meilleures performances pour mesurer le temps de disposition que la disposition relative traditionnelle et la disposition des contraintes Terminaux de différentes tailles peut être adapté en fonction du pourcentage. Parce que la mise en page des contraintes est vraiment facile à utiliser, l'officiel a également migré la mise en page des contraintes vers la plate-forme Compose pour nous. Cet article a pour but de présenter l'utilisation de la disposition des contraintes dans Compose.

Exemple d'analyse

Avant d'utiliser la disposition de contrainte, nous devons ajouter la version de composition de la dépendance ConstraintLayout au script app.gradle dans le projet

implementation('androidx.constraintlayout:constraintlayout-compose:1.0.1')

Après avoir introduit les dépendances, nous pouvons voir comment utiliser la disposition des contraintes dans Compose

1. Créez des références

Dans le système de vue traditionnel, nous pouvons définir l'ID de ressource pour la vue dans le fichier XML de mise en page et utiliser l'ID de ressource comme index pour déclarer la position de placement du composant correspondant. Dans la disposition des contraintes de Compose, vous pouvez activement créer des références et les lier à un composant spécifique pour obtenir une fonction similaire aux ID de ressource. Chaque composant peut utiliser les références d'autres composants pour obtenir les informations de placement d'autres composants. , afin de déterminer leur propre emplacement.

Il existe deux façons pour Compose de créer une disposition de contrainte, à savoir createRef() et createRefs(). Selon le sens littéral, nous pouvons clairement savoir que createRef() ne créera qu'une référence à chaque fois, tandis que createRefs() peut en créer plusieurs. références (jusqu'à 16), la manière de créer une référence est la suivante :

// 创建单个引用
 val text = createRef()
// 创建多个引用
 val (button1,button2,text) = createRefs()

2. Lier les références

Après avoir créé la référence, nous pouvons utiliser le modificateur Modifier.constrainAs() pour lier la référence que nous avons créée à un composant spécifique, et nous pouvons spécifier les informations de contrainte du composant dans Lambda à la fin de contrainAs. Nous devons noter que nous ne pouvons utiliser que les fonctions createRefer et createRefs dans Lambda à la fin de ConstraintLayout pour créer des références, et utiliser la fonction Modifier.constrainAs pour lier des références, car le destinataire de Lambda à la fin de ConstraintScope est une étendue ConstraintLayoutScope. objet. Nous pouvons d'abord examiner le morceau de code suivant pour comprendre la liaison de référence de la disposition des contraintes :

@Composable
fun ConstrainLayoutDemo()
{
    
    
    ConstraintLayout(modifier = Modifier
        .width(300.dp)
        .height(100.dp)
        .padding(5.dp)
        .border(5.dp, color = Color.Red)) {
    
    
        val portraitImageRef = remember {
    
    
            createRef()
        }

        Image(painter = painterResource(id = R.drawable.portrait)
            , contentDescription = null,
        modifier = Modifier.constrainAs(portraitImageRef){
    
    
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        })

    }
}

résultat de l'opération :

Le code ci-dessus fait partie du code pour implémenter une carte utilisateur. À partir du code, nous pouvons voir que nous devons utiliser Modifier.constrainsAs(){...} lors de l'utilisation de contraintes. La queue Lambda de Modifier.constrainsAs est un objet de portée ConstrainScope, dans lequel des informations telles que le parent, le haut, le bas, le début et la fin du composant actuel peuvent être obtenues. Et utilisez linkTo pour spécifier les contraintes de composant. Dans l'interface ci-dessus, nous espérons que l'avatar de l'utilisateur peut être aligné vers la gauche, donc le haut est étiré vers le haut du composant parent, le bas est étiré vers le bas du composant parent et le début est étiré vers la gauche du composant parent. Ajoutons le surnom et la description de l'utilisateur à la carte. Le code complet est le suivant :

@Composable
fun ConstrainLayoutDemo()
{
    
    
    ConstraintLayout(modifier = Modifier
        .width(300.dp)
        .height(100.dp)
        .padding(5.dp)
        .border(5.dp, color = Color.Red)) {
    
    
        val (portraitImageRef,usernameTextRef,descriptionTextRef) = remember {
    
    
            createRefs()
        }

        Image(painter = painterResource(id = R.drawable.portrait)
            , contentDescription = null,
        modifier = Modifier.constrainAs(portraitImageRef){
    
    
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        })

        Text(text = "旅游小美女", fontSize = 16.sp, maxLines = 1,
        textAlign = TextAlign.Left,
        modifier = Modifier.constrainAs(usernameTextRef){
    
    
            top.linkTo(portraitImageRef.top)
            start.linkTo(portraitImageRef.end,10.dp)
        })

        Text(text = "个人描述。。。。。。。。", fontSize = 14.sp,
            color = Color.Gray,
            fontWeight = FontWeight.Light,
            modifier = Modifier.constrainAs(descriptionTextRef){
    
    
                top.linkTo(usernameTextRef.bottom,5.dp)
                start.linkTo(portraitImageRef.end,10.dp)
            }
        )
    }
}

Résultat courant :

dans le code ci-dessus, nous pouvons également spécifier les informations de largeur et de hauteur du composant dans ConstrainScope, et définir directement les valeurs facultatives de largeur et de hauteur dans ConstrainScope comme suit :

Lorsque vous spécifiez les informations de largeur et de hauteur d'un composant dans ConstrainScope, Modifier.constrainAs(xxxRef){width = Dimension.可选值}définissez-les dans , et les valeurs facultatives sont les suivantes :
Dimension.wrapContent : la taille réelle est adaptative en fonction du contenu
Dimension.matchParent : la taille réelle est la taille qui couvre le composant parent
Dimension, wrapContent : réelle La taille est la taille étirée en fonction des informations de contrainte
Dimension.preferredWrapContent : si l'espace restant est supérieur à la taille la plus adaptée au contenu, la taille réelle est la taille adaptative ; si l'espace restant espace est plus petit que la taille adaptée au contenu, la taille réelle est l'
espace restant taille réelle basée sur un nombre à virgule flottante Dimension.value(Dp) : définit la taille à fixer Value Dimension.perferredValue(Dp) : si l'espace restant est supérieur à une valeur fixe, la taille réelle est une valeur fixe ; l'espace est plus petit qu'une valeur fixe, la taille réelle est la taille de l'espace restant

Imaginons que si le surnom de l'utilisateur est très long, alors selon notre affichage de code ci-dessus, il y aura un affichage incomplet, nous pouvons donc spécifier la largeur endmaximale autorisée par le composant en définissant, et définir la largeur sur preferredWrapContent, ce qui signifie que lorsque l'utilisateur Lorsque le nom est très long, la largeur réelle sera ajustée de manière adaptative. Changeons l'endroit où le nom d'utilisateur est affiché ci-dessus, le code est le suivant :

// 上面的代码只用改这个部分
   Text(
            text = "旅游小美女美美美美美名字很长长长长长长长长长",
            fontSize = 16.sp,
        textAlign = TextAlign.Left,
        modifier = Modifier.constrainAs(usernameTextRef){
    
    
            top.linkTo(portraitImageRef.top)
            start.linkTo(portraitImageRef.end,10.dp)
            end.linkTo(parent.end,10.dp)
            width = Dimension.preferredWrapContent
        })

résultat de l'opération :

Outil de mise en page auxiliaire

Dans la mise en page contrainte de la vue traditionnelle, il existe des outils de mise en page auxiliaires tels que Barrier et GuideLine, et ces fonctionnalités sont également héritées dans Compose, ce qui nous permet de répondre aux exigences de mise en page de diverses scènes complexes.

1. Ligne de séparation de la barrière

Comme son nom l'indique, Barrier est une barrière qui peut être utilisée pour isoler certains effets d'extrusion mutuels sur la mise en page de l'interface utilisateur. Par exemple, nous voulons que deux zones de saisie soient alignées à gauche et que la distance par rapport au composant de texte le plus long soit toujours de 10 dp. Lorsque le nom d'utilisateur et le mot de passe changent, la position de la zone de saisie peut être ajustée de manière adaptative. Ici, l'utilisation de la fonctionnalité Barrière peut facilement répondre à cette exigence :

@Composable
fun InputFieldLayout(){
    
    
    ConstraintLayout(
        modifier = Modifier
            .width(400.dp)
            .padding(10.dp)
    ) {
    
    
        val (usernameTextRef, passwordTextRef, usernameInputRef, passWordInputRef) = remember {
    
     createRefs() }
        val barrier = createEndBarrier(usernameTextRef, passwordTextRef)
        Text(
            text = "用户名",
            fontSize = 14.sp,
            textAlign = TextAlign.Left,
            modifier = Modifier
                .constrainAs(usernameTextRef) {
    
    
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
        )

        Text(
            text = "密码",
            fontSize = 14.sp,
            modifier = Modifier
                .constrainAs(passwordTextRef) {
    
    
                    top.linkTo(usernameTextRef.bottom, 20.dp)
                    start.linkTo(parent.start)
                }
        )
        OutlinedTextField(
            value = "",
            onValueChange = {
    
    },
            modifier = Modifier.constrainAs(usernameInputRef) {
    
    
                start.linkTo(barrier, 10.dp)
                top.linkTo(usernameTextRef.top)
                bottom.linkTo(usernameTextRef.bottom)
                height = Dimension.fillToConstraints
            }
        )
        OutlinedTextField(
            value = "",
            onValueChange = {
    
    },
            modifier = Modifier.constrainAs(passWordInputRef) {
    
    
                start.linkTo(barrier, 10.dp)
                top.linkTo(passwordTextRef.top)
                bottom.linkTo(passwordTextRef.bottom)
                height = Dimension.fillToConstraints
            }
        )
    }
}

résultat de l'opération :

2. Ligne directrice

La limite de la barrière doit s'appuyer sur d'autres références pour déterminer sa propre position, tandis que l'utilisation de la ligne directrice ne dépend d'aucune référence. Par exemple, nous souhaitons placer l'avatar de l'utilisateur à une hauteur de 2:8 à partir du haut de l'écran. l'avatar est l'arrière-plan de l'utilisateur. Ce qui suit est des informations sur l'utilisateur, de telles exigences peuvent être mises en œuvre à l'aide de la directive, le code est le suivant :

@Composable
fun GuidelineDemo(){
    
    
   ConstraintLayout(modifier = Modifier
       .height(300.dp)
       .background(color = Color.Gray)) {
    
    
       val guideline = createGuidelineFromTop(0.2f)
       val (userPortraitBackgroundRef,userPortraitImgRef,welcomeRef) = remember {
    
    
           createRefs()
       }

       Box(modifier = Modifier
           .constrainAs(userPortraitBackgroundRef) {
    
    
               top.linkTo(parent.top)
               bottom.linkTo(guideline)
               height = Dimension.fillToConstraints
               width = Dimension.matchParent
           }
           .background(Color(0xFF673AB7)))

       Image(painter = painterResource(id = R.drawable.portrait),
           contentDescription = null,
           modifier = Modifier
               .constrainAs(userPortraitImgRef) {
    
    
                   top.linkTo(guideline)
                   bottom.linkTo(guideline)
                   start.linkTo(parent.start)
                   end.linkTo(parent.end)
               }
               .size(100.dp)
               .clip(CircleShape)
               .border(width = 2.dp, color = Color(0xFF96659E), shape = CircleShape))

       Text(text = "不喝奶茶的小白兔",
       color = Color.White,
       fontSize = 26.sp,
       modifier = Modifier.constrainAs(welcomeRef){
    
    
           top.linkTo(userPortraitImgRef.bottom,10.dp)
           start.linkTo(parent.start)
           end.linkTo(parent.end)
       })

   }
}

résultat de l'opération :

Dans le code ci-dessus, nous utilisons la méthode createGuidelineFromTop() pour créer une ligne directrice en partant du haut, puis l'arrière-plan de l'utilisateur peut s'appuyer sur cette ligne directrice pour déterminer la largeur et la hauteur, puis pour l'avatar, nous n'avons qu'à connecter le haut et du bas à la ligne de guidage

3. Contraintes des maillons de chaîne

Une autre fonctionnalité utile de ContraintLayout est les contraintes de lien de chaîne, qui permettent à plusieurs composants d'allouer uniformément l'espace de mise en page via des contraintes de lien, similaires aux modificateurs de poids. Par exemple, si nous voulons afficher un poème ancien, nous pouvons l'implémenter avec des contraintes de maillon de chaîne comme suit :

@Composable
fun showQuotesDemo() {
    
    
    ConstraintLayout(
        modifier = Modifier
            .size(400.dp)
            .background(Color.Black)
    ) {
    
    
        val (quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef) = remember {
    
    
            createRefs()
        }

        createVerticalChain(
            quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef,
            chainStyle = ChainStyle.Spread
        )

        Text(text = "窗前明月光，",
            color = Color.White,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(quotesFirstLineRef) {
    
    
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

        Text(text = "疑是地上霜。",
            color = Color.White,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(quotesSecondLineRef) {
    
    
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

        Text(text = "举头望明月，",
            color = Color.White,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(quotesThirdLineRef) {
    
    
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

        Text(text = "低头思故乡。",
            color = Color.White,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(quotesForthLineRef) {
    
    
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })
    }
}

Résultat courant :

comme indiqué dans le code ci-dessus, nous devons créer quatre références correspondant aux quatre lignes de poèmes pour afficher les quatre lignes de poèmes, puis nous pouvons créer une contrainte de lien vertical pour connecter les quatre lignes de poèmes. une contrainte de lien, le paramètre end peut être Pass a ChainStyle pour représenter le style de mise en page attendu. Il a trois valeurs. Les effets et les significations sont les suivants :

(1) Spread : chaque élément de la chaîne divise également l'ensemble de l'espace parent

 createVerticalChain(
            quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef,
            chainStyle = ChainStyle.Spread)

résultat courant :

(2) SpreadInside : les premier et dernier éléments de la chaîne sont proches de la limite, et chaque élément restant divise également l'ensemble de l'espace parent

 createVerticalChain(
            quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef,
            chainStyle = ChainStyle.SpreadInside)

résultat courant :

(3) Emballé : tous les éléments de la chaîne sont rassemblés au milieu, l'effet est le suivant

 createVerticalChain(
            quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef,
            chainStyle = ChainStyle.Packed)

résultat courant :

Résumer

Il s'agit du contenu de la mise en page des contraintes Compose. Cet article présente principalement brièvement l'utilisation de base de la mise en page des contraintes dans Compose. Pour maîtriser la mise en page des contraintes Compose, les lecteurs doivent contacter davantage et utiliser la mise en page des contraintes pour écrire l'interface, de sorte que la pratique rende parfait, ici, je fais juste un travail de lancer des briques et d'attirer le jade. Si vous avez des questions, veuillez communiquer dans la zone de commentaires.