aperçu
La disposition linéaire dans Compose correspond à LinearLayout dans la vue traditionnelle d'Android. La différence est que Compose divise la disposition en colonne et ligne en fonction de l'orientation. Correspond au cas de orientation = "horizontal" dans la vue traditionnelle LinearLayout. la disposition des deux éléments internes dans le conteneur parent et la façon dont ils sont disposés sont différentes, la division en deux composants permet de fournir un modificateur de type Modifier de sécurité. La disposition du cadre dans Compose correspond au FrameLayout dans la vue traditionnelle d'Android, qui permet à ses sous-composants d'être empilés en séquence.
Exemple d'analyse
1. Disposition linéaire
Dans Compose, la mise en page linéaire est divisée en colonnes et en lignes selon différents scénarios d'utilisation. La colonne est un composant de mise en page linéaire vertical et la ligne est un composant de mise en page linéaire horizontal.
1.1 Composants de la colonne
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
)
Ce qui précède est la liste des paramètres de Column, parmi lesquels les paramètres verticalArrangement et horizontalAlignment peuvent nous aider à organiser respectivement la position verticale/horizontale des sous-éléments. Par défaut, les sous-éléments seront disposés verticalement (Arrangment.Top) et horizontalement à gauche placement des enfants
Nous pouvons utiliser un exemple pour voir l'utilisation de Column
@Composable
fun LinearLayoutDemo() {
Column(
modifier = Modifier
.border(1.dp, color = Color.Red)
.size(150.dp),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Hello World",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "JetPack",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "zhongxj",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
résultat de l'opération :
Dans le code ci-dessus, nous plaçons le texte dans la colonne au milieu du composant via le paramètre verticalArrangement, puis utilisons le modificateur Modifier.align pour définir indépendamment les règles d'alignement des sous-éléments.Certaines personnes peuvent demander ici, n'est-ce pas existe-t-il un paramètre horizontalAlignment
? Pourquoi utiliser Modifier.align dans le sens horizontal ? Parce que pour les sous-éléments de la disposition verticale, Modifier.align ne peut définir sa position que dans le sens horizontal, alors que les sous-éléments de la disposition horizontale ne peuvent définir sa position que dans le sens vertical, comme le composant Column que nous introduisons, lorsque Column Lorsqu'il y a plusieurs sous-éléments dans le composant, ils sont toujours disposés linéairement dans le sens vertical. Si les sous-éléments sont autorisés à être définis séparément, il y aura une mauvaise situation. Par exemple, il y a trois éléments A, B , et C dans Column. Si la configuration de A La direction d'alignement est Aligment.Bottom, et B est Aligment.Top. Ceci est évidemment impossible, donc la disposition verticale des sous-éléments de Column ne peut être définie que par verticalArragnment.（注意：这里不是说Column只能使用verticalArragnment参数）
注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的
1.2 Composant de ligne
Le composant Row peut organiser les sous-éléments internes horizontalement de gauche à droite, et lorsqu'il est utilisé conjointement avec le composant Cloumn, une interface riche et belle peut être créée. Voici une fiche d'article réalisée à l'aide du composant Row et du composant Column, le code est le suivant :
@Composable
fun ArticleCard() {
Surface(
shape = RoundedCornerShape(8.dp),
modifier = Modifier
.padding(horizontal = 12.dp)
.fillMaxWidth(),
elevation = 10.dp,
) {
Surface(modifier = Modifier.padding(12.dp), color = Color(0xeeeeeeee)) {
Column(modifier = Modifier.padding(12.dp)) {
Text(
text = "JetPack Compose",
style = MaterialTheme.typography.h6
)
Spacer(modifier = Modifier.padding(vertical = 5.dp))
Text(
text = " Jetpack Compose是第一个使用Kotlin正在开发中的大型项目," +
"因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南," +
"该工作仍在进行中,仍然有很长的路要"
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
IconButton(onClick = {
/*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.comment),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.share),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
}
}
}
}
}
résultat de l'opération :
Comme on peut le voir dans le code ci-dessus, le paramètre horizontalArrangement de Row nous aide à configurer raisonnablement la position horizontale du bouton. On peut voir que dans la partie icône, les boutons "J'aime" et "Partager" sont alignés sur les extrémités gauche et droite. La disposition définit de nombreuses méthodes d'alignement des sous-éléments, à l'exception du centre (centre), du début (horizontal à gauche), de la fin (horizontal à droite) et d'autres alignements courants Il existe également des méthodes d'alignement dans des scénarios spécifiques, tels que Space Between, Space Evenly, etc.
2. Disposition du cadre
2.1 Composants de la boîte
Le composant Box est un composant de mise en page qui peut empiler les éléments enfants en séquence en séquence. Il est similaire au FrameLayout de la mise en page traditionnelle utilisée. C'est très simple. Examinons le morceau de code suivant pour comprendre son utilisation.
@Composable
fun BoxDemo(){
Box(modifier = Modifier
.size(150.dp)
.background(Color.Green))
Box(modifier = Modifier
.size(80.dp)
.background(Color.Red))
Text(text = "Hello World")
}
résultat de l'opération :
2.2 Composants de surface
La surface est littéralement comprise comme un plan, et il en va de même dans les directives de conception de Material Design. Nous pouvons placer de nombreux composants sur cette plate-forme, et nous pouvons définir la bordure, les coins arrondis, les couleurs, etc. de ce plan. Par exemple, utilisez Surface Pour réaliser un effet carte, le code est le suivant :
@Composable
fun SurfaceDemo() {
Surface(
shape = RoundedCornerShape(8.dp),
elevation = 10.dp,
modifier = Modifier
.width(300.dp)
.height(100.dp),
color = Color.Gray
) {
Row(modifier = Modifier.clickable {
}) {
Image(
painter = painterResource(id = R.drawable.portrait),
contentDescription = null,
modifier = Modifier.size(100.dp),
contentScale = ContentScale.Crop
)
Spacer(modifier = Modifier.padding(horizontal = 12.dp))
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Text(text = "zhongxj", style = MaterialTheme.typography.h6)
Spacer(modifier = Modifier.padding(vertical = 8.dp))
Text(text = "海塔灯")
}
}
}
}
résultat de l'opération :
D'après le code ci-dessus, nous pouvons voir que nous écrivons principalement du code d'interface utilisateur dans Surface, et que Surface est principalement responsable de la forme, de l'ombre, de l'arrière-plan, etc. de l'ensemble du composant. Surface peut nous aider à découpler du code sans avoir à en ajouter beaucoup à un seul composant La méthode du modificateur Modifier.
很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box
3. Entretoise vide
Dans de nombreux cas, nous devons laisser un espace vide entre les composants.Pour le moment, nous pouvons utiliser le composant Spacer fourni par Compose pour utiliser simplement une démo pour montrer l'utilisation de Spacer.
@Composable
fun SpacerDemo(){
Row {
Box(modifier = Modifier
.size(100.dp)
.background(Color.Green))
Spacer(modifier = Modifier.width(20.dp))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Yellow))
Spacer(modifier = Modifier.weight(1f))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Magenta))
}
}
résultat de l'opération
À partir du code ci-dessus, nous pouvons voir un autre scénario d'utilisation de Spacer, qui consiste à utiliser Box pour dessiner un bloc rectangulaire d'espace réservé dans le code. Lorsqu'il n'y a pas de contenu, Spacer peut être utilisé à la place.
Résumer
Cet article explique principalement comment utiliser la disposition linéaire et la disposition des cadres dans Compose. En fait, c'est très simple et nous devons nous entraîner davantage, sans aucune compétence. Lorsque nous écrivons l'interface utilisateur Compose aussi efficacement que l'écriture de l'interface utilisateur XML, notre efficacité de travail sera grandement améliorée et nous pouvons utiliser moins de code pour obtenir des effets d'interface utilisateur plus éblouissants, et Kotlin et Java peuvent également être utilisés en combinaison. pour écrire l'interface de test, ce qui est très pratique. Je recommande aux lecteurs de passer à autre chose. Ceux qui utilisent Java peuvent utiliser Compose pour écrire des interfaces et Java pour écrire des fonctions, tandis que ceux qui utilisent Kotlin peuvent utiliser Compose plus facilement. , un langage qui complète l'interface et les fonctions sont vraiment cool.