RelativeLayout (mise en page relative)


Introduction à cette section

Dans la section précédente, nous avons analysé LinearLayout en détail, LinearLayout est également notre C'est une mise en page plus utilisée, on aime plus son attribut de poids, elle est divisée en proportions égales et adaptée à l'écran. C'est très utile, mais il y a aussi un problème lors de l'utilisation de LinearLayout, c'est-à-dire que lorsque l'interface est plus complexe, plusieurs couches doivent être imbriquées. LinearLayout, cela réduira l'efficacité (vitesse de rendu) de UI Render, et s'il se trouve sur une liste ou GridView élément, l'efficacité sera inférieure et trop de niveaux d'imbrication LinearLayout occuperont plus de ressources système et peuvent provoquer un débordement de pile ; Mais si nous utilisons RelativeLayout, il se peut qu'un seul calque soit nécessaire, reportez-vous au conteneur parent ou au composant frère + marge. +padding peut définir la position d'affichage du composant, ce qui est plus pratique. Bien sûr, ce n'est pas absolu. Analysons les problèmes spécifiques en détail ! Le résumé est le suivant : Essayez d'utiliser ensemble l'attribut de poids de RelativeLayout + LinearLayout  !

Diagramme des attributs de base

1.png

2. Diagramme des attributs de positionnement du conteneur parent

2.jpg

3. Positionnement basé sur les composants frères

Eh bien, parlons d'abord de ce que sont les composants frères et sœurs. Les composants dits frères sont des composants dans le conteneur de même niveau, comme indiqué dans le. figure

3.jpg

Les composants 1 et 2 dans l'image sont des composants frères, et le composant 3 n'est pas un composant frère du composant 1 ou du composant 2, donc le composant 3 ne peut pas passer Le composant 1 ou 2 pour le positionnement, par exemple layout_toleftof = "Component 1" signalera une erreur ! Souviens-toi! L'exemple le plus classique du positionnement de ce composant frère est la "mise en page fleur de prunier". Le code suivant est implémenté :

Exécution du rendu :

4.png

Implémentation code :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <!-- 这个是在容器中央的 -->    

& lt; ImageView
Android: id = "@ + id / img1"
Android: Layout_Width = "80DP"
Android: Layout_Height = "80DP"
Android: Layout_CenteRenparent = "vrai"    
        android:src="@drawable/pic1"/>    
        
    <!-- 在中间图片的左边 -->    
    <ImageView    
        android:id="@+id/img2"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toLeftOf="@id /img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic2"/>    
        
    <!-- 在中间图片的右边 -->    
    <ImageView    
        android:id="@+id/img3"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toRightOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic3"/>    
        
    <!-- 在中间图片的上面-->    
    <ImageView    
        android:id="@+id/img4"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_above="@id /img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic4"/>    
        
    <!-- 在中间图片的下面 -->    
    <ImageView    
        android:id="@+id/img5"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_below="@id /img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic5"/>    
    
</RelativeLayout>

4. La différence entre margin et padding

Les débutants peuvent être un peu confus au sujet de ces deux attributs, distinguons-les ici : Tout d'abord, margin représente le décalage. Par exemple, marginleft = "5dp" signifie que le composant est décalé de 5dp par rapport au bord gauche du conteneur ; Le remplissage représente le remplissage et l'objet de remplissage est destiné aux éléments du composant, tels que le texte dans TextView. Par exemple, définir paddingleft = "5dp" pour TextView remplira 5dp d'espace sur le côté gauche de l'élément dans le composant ! La marge concerne les composants du conteneur, tandis que le remplissage concerne les éléments des composants. Ils doivent être distingués ! Ce qui suit est un code simple pour démontrer la différence entre les deux :

Un exemple de code de comparaison est le suivant :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:paddingBottom="@dimen/activity_vertical_margin"    
    android:paddingLeft="@dimen/activity_horizontal_margin"    
    androïde :paddingRight="@dimen/activity_horizontal_margin"    
    android:paddingTop="@dimen/activity_vertical_margin"    
    tools:context=".MainActivity" >    
    
    <Bouton    
        android:id="@+id/btn1"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap _content"    
        android:text= "Bouton"/>    
    <Bouton    
        android:paddingLeft="100dp"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Bouton"    
        android :layout_toRightOf="@id/btn1"/>    
        
    <Bouton    
        android:id="@+id/btn2"     
        android:layout_height="wrap_content"    
        android:layout_width="w rap_content"    
        android:text= "Bouton"    
        android:layout_alignParentBottom="true"/>    

        android:text="Bouton"    
        android :layout_toRightOf="@id/btn2"     
        android:layout_alignParentBottom="true"/>    
        
</RelativeLayout>

Comparaison des rendus en cours d'exécution :

5.png

5 Un point très courant : la marge peut être fixée à un nombre négatif

Je crois que beaucoup. les amis ne le savent pas Un peu, nous sommes généralement habitués aux nombres positifs lors de la définition de la marge. En fait, vous pouvez utiliser des nombres négatifs. Écrivons un programme simple pour le démontrer. Après avoir entré le logiciel, une publicité apparaîtra. Sur la page, la marge du bouton annuler dans le coin supérieur droit utilise des nombres négatifs !

Le rendu est le suivant :

6.gif

Le code de mise en page de l'activité publicitaire postée. Bien entendu, si cela vous intéresse, vous pouvez télécharger le. démo. Parce que c'est juste pour obtenir l'effet, le code sera un peu approximatif !

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.jay.example.relativelayoutdemo.MainActivity"   
    android:background="../style /images/android-tutorial-relativelayout.html">  
  
    <ImageView   
        android:id="@+id/imgBack"  
        android:layout_width="200dp"   
        android:layout_height="200dp"  
        android:layout_centerInParent= "vrai"  
        android:background="../style/images/myicon" />  
  
    <ImageView   
        android:id="@+id/imgCancle"  
        android:layout_width="28dp"   
         android:layout_height="28dp"  
        android:layout_alignRight= "@id/imgBack"  
        android:layout_alignTop="@id/imgBack"  
        android:background="../style/images/cancel"  
        android:layout_marginTop="-15dp"  
android:layout_marginRight="-10dp" />  
</RelativeLayout>

本节小结：

关于RelativeLayout的详解就到这里，有什么纰漏，错误，好的建议，欢迎提出~ 最后提供下上面的demo代码供大家下载：RelativeLayoutDemo


←
→