Android
Mises en page

Introduction

Syntaxe

• android: gravity = "top | bottom | left | right | centre_vertical | fill_vertical | center_horizontal | fill_horizontal | center | fill | clip_vertical | clip_horizontal | début | fin"
• android: layout_gravity = "haut | bas | gauche | droite | center_vertical | fill_vertical | center_horizontal | fill_horizontal | center | fill | clip_vertical | clip_horizontal | début | fin"

Remarques

LinearLayout

LinearLayout est un ViewGroup qui organise ses enfants dans une seule colonne ou une seule ligne. L'orientation peut être définie en appelant la méthode setOrientation() ou en utilisant l'attribut xml android:orientation .

1. Orientation verticale : android:orientation="vertical"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />

</LinearLayout>

Voici une capture d'écran à quoi cela ressemblera:

2. Orientation horizontale : android:orientation="horizontal"

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />
   
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />
   

LinearLayout prend également en charge l'attribution d'un poids à des enfants individuels avec l'attribut android:layout_weight .

Disposition relative

RelativeLayout est un ViewGroup qui affiche les vues enfants dans des positions relatives. Par défaut, toutes les vues enfants sont dessinées en haut à gauche de la présentation. Vous devez donc définir la position de chaque vue à l'aide des différentes propriétés de mise en page disponibles dans RelativeLayout.LayoutParams . La valeur de chaque propriété de mise en page est soit une valeur booléenne permettant d'activer une position de mise en page par rapport au parent RelativeLayout, soit un ID faisant référence à une autre vue de la mise en page sur laquelle la vue doit être positionnée.

Exemple:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@mipmap/ic_launcher" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_toRightOf="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:hint="@string/hint" />

</RelativeLayout>

Voici une capture d'écran à quoi cela ressemblera:

Gravité et disposition gravitationnelle

android: layout_gravity

• android:layout_gravity est utilisé pour définir la position d'un élément dans son parent (par exemple, une View enfant dans une Layout ).
• Pris en charge par LinearLayout et FrameLayout

android: gravité

• android:gravity est utilisée pour définir la position du contenu à l'intérieur d'un élément (par exemple, un texte dans un TextView ).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="left"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimary"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimary"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimary"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorAccent"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorAccent"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorAccent"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="right"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimaryDark"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimaryDark"
            android:gravity="right"/>

    </LinearLayout>

</LinearLayout>

Qui est rendu comme suit:

Disposition de la grille

GridLayout, comme son nom l'indique est une mise en page utilisée pour organiser les vues dans une grille. Un GridLayout se divise en colonnes et en lignes. Comme vous pouvez le voir dans l'exemple ci-dessous, la quantité de colonnes et / ou de lignes est spécifiée par les propriétés columnCount et rowCount . L'ajout de vues à cette disposition ajoute la première vue à la première colonne, la deuxième vue à la deuxième colonne et la troisième à la première colonne de la deuxième ligne.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:columnCount="2"
    android:rowCount="2">

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/first"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/second"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/third"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

</GridLayout>

Mise en page en pourcentage

compile 'com.android.support:percent:25.3.1'

<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        app:layout_widthPercent="100%"
        app:layout_heightPercent="50%"
        android:background="@android:color/black" />

<android.support.percent.PercentFrameLayout>

<fraction name="margin_start_percent">25%</fraction>

 <ImageView
    app:layout_widthPercent="100%"
    app:layout_aspectRatio="178%"
    android:scaleType="centerCrop"
    android:src="@drawable/header_background"/>

FrameLayout

FrameLayout est conçu pour bloquer une zone sur l'écran pour afficher un seul élément. Vous pouvez cependant ajouter plusieurs enfants à un FrameLayout et contrôler leur position dans FrameLayout en attribuant une gravité à chaque enfant, en utilisant l'attribut android: layout_gravity .

En règle générale, FrameLayout est utilisé pour contenir une vue enfant unique. Les cas d'utilisation courants sont la création d'espaces Fragments au gonflage de Fragments dans l' Activity , de superpositions de vues ou de l'application d'un premier plan sur les vues.

Exemple:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/nougat"
        android:scaleType="fitCenter"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <TextView
        android:text="FrameLayout Example"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:gravity="center"/>

</FrameLayout>

Il ressemblera à ceci:

Coordinateur

compile 'com.android.support:design:25.3.1'

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coord_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/recycler_view"/>

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:color="@color/colorAccent"
        android:src="@mipmap/ic_add_white"
        android:layout_gravity="end|bottom"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

Comportement du défilement du coordinateur

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:elevation="0dp"
        app:layout_scrollFlags="scroll|enterAlways"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:elevation="0dp"
        app:tabTextColor="#d3d3d3"
        android:minHeight="?attr/actionBarSize"
        />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

Voir le poids

L'un des attributs les plus utilisés pour LinearLayout est le poids de ses vues enfants. Le poids définit la quantité d'espace consommée par une vue par rapport aux autres vues d'un LinearLayout.

Le poids est utilisé lorsque vous souhaitez donner un espace d'écran spécifique à un composant par rapport à un autre.

Propriétés clés :

• weightSum est la somme globale des poids de toutes les vues enfants. Si vous ne spécifiez pas le weightSum , le système calculera lui-même la somme de tous les poids.

• layout_weight spécifie la quantité d'espace hors de la somme de poids totale que le widget va occuper.

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">

    <EditText
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Type Your Text Here" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

</LinearLayout>

La sortie est la suivante:

Maintenant, même si la taille de l'appareil est plus grande, le EditText prendra 2/4 de l'espace de l'écran. Par conséquent, l'apparence de votre application est visible sur tous les écrans.

Note: Ici, la layout_width est conservée 0dp car l’espace du widget est divisé horizontalement. Si les widgets doivent être alignés verticalement, layout_height sera défini sur 0dp . Ceci est fait pour augmenter l'efficacité du code car au moment de l'exécution, le système ne tentera pas de calculer la largeur ou la hauteur respectivement, car celle-ci est gérée par le poids. Si vous utilisez plutôt wrap_content le système essaiera de calculer d'abord la largeur / hauteur avant d'appliquer l'attribut de pondération qui provoque un autre cycle de calcul.

Créer LinearLayout par programmation

Hiérarchie

- LinearLayout(horizontal)
   - ImageView
   - LinearLayout(vertical)
     - TextView
     - TextView

Code

LinearLayout rootView = new LinearLayout(context);
rootView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
rootView.setOrientation(LinearLayout.HORIZONTAL);

// for imageview
ImageView imageView = new ImageView(context);
// for horizontal linearlayout
LinearLayout linearLayout2 = new LinearLayout(context);
linearLayout2.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
linearLayout2.setOrientation(LinearLayout.VERTICAL);    

TextView tv1 = new TextView(context);
TextView tv2 = new TextView(context);
// add 2 textview to horizontal linearlayout
linearLayout2.addView(tv1);
linearLayout2.addView(tv2);

// finally, add imageview and horizontal linearlayout to vertical linearlayout (rootView) 
rootView.addView(imageView);
rootView.addView(linearLayout2);

LayoutParams

Chaque groupe ViewGroup (par exemple, LinearLayout , RelativeLayout , CoordinatorLayout , etc.) doit stocker des informations sur les propriétés de ses enfants. À propos de la façon dont ses enfants sont disposés dans le ViewGroup . Ces informations sont stockées dans des objets d'une classe d'encapsuleur ViewGroup.LayoutParams .

Pour inclure des paramètres spécifiques à un type de ViewGroups particulier, ViewGroups utilise des sous-classes de la classe ViewGroup.LayoutParams .

Par exemple pour

• LinearLayout c'est LinearLayout.LayoutParams
• RelativeLayout c'est RelativeLayout.LayoutParams
• CoordinatorLayout en CoordinatorLayout.LayoutParams
• ...

La plupart des ViewGroups réutilisent la possibilité de définir des margins pour leurs enfants, afin de ne pas sous- ViewGroup.LayoutParams directement, mais de sous- ViewGroup.MarginLayoutParams (qui est elle-même une sous-classe de ViewGroup.LayoutParams ).

LayoutParams en xml

LayoutParams objets LayoutParams sont créés sur la base du fichier xml mise en page gonflé.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="right"
        android:gravity="bottom"
        android:text="Example text"
        android:textColor="@android:color/holo_green_dark"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/holo_green_dark"
        android:scaleType="centerInside"
        android:src="@drawable/example"/>

</LinearLayout>

Tous les paramètres commençant par layout_ spécifient le fonctionnement de la mise en page englobante . Lorsque la disposition est gonflée, ces paramètres sont LayoutParams dans un objet LayoutParams approprié, qui sera ensuite utilisé par la Layout pour positionner correctement une View particulière dans le ViewGroup . Les autres attributs d'une View sont directement liés à la View et sont traités par la View elle-même.

Pour TextView :

• layout_width , layout_height et layout_gravity seront stockés dans un objet LinearLayout.LayoutParams et utilisés par LinearLayout
• gravity , text et textColor seront utilisés par le TextView lui-même

Pour ImageView :

• layout_width , layout_height et layout_weight seront stockés dans un objet LinearLayout.LayoutParams et utilisés par LinearLayout
• background , scaleType et src seront utilisés par ImageView

Obtenir l'objet LayoutParams

getLayoutParams est une méthode View's qui permet de récupérer un objet LayoutParams cours.

LayoutParams objet LayoutParams étant directement lié au ViewGroup englobant , cette méthode renvoie une valeur non nulle uniquement lorsque View est associé au ViewGroup . Vous devez garder à l'esprit que cet objet peut ne pas être présent à tout moment. Surtout vous ne devriez pas dépendre de l'avoir à l'intérieur View's constructeur View's .

public class ExampleView extends View {
    
    public ExampleView(Context context) {
        super(context);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setupView(context);
    }

    private void setupView(Context context) {
        if (getLayoutParams().height == 50){  // DO NOT DO THIS!
                                              // This might produce NullPointerException
            doSomething();
        }
    }
    
    //...
}

Si vous voulez dépendre de l'objet LayoutParams , vous onAttachedToWindow plutôt utiliser la méthode onAttachedToWindow .

public class ExampleView extends View {

    public ExampleView(Context context) {
        super(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (getLayoutParams().height == 50) { // getLayoutParams() will NOT return null here
            doSomething();
        }
    }

    //...
}

Objet LayoutParams

Vous devrez peut-être utiliser des fonctionnalités spécifiques à un ViewGroup particulier (par exemple, vous pouvez modifier les règles d'un RelativeLayout ). Pour cela, vous devez savoir comment ViewGroup.LayoutParams correctement l'objet ViewGroup.LayoutParams .

Cela peut être un peu compliqué lors de l'obtention d'un objet LayoutParams pour un enfant View qui est en réalité un autre ViewGroup .

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/outer_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:id="@+id/inner_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="right"/>

</LinearLayout>

IMPORTANT: le type d'objet LayoutParams est directement lié au type du groupe de vues ViewGroup .

Casting incorrect :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
FrameLayout.LayoutParams par = (FrameLayout.LayoutParams) innerLayout.getLayoutParams();
                                          // INCORRECT! This will produce ClassCastException

Coulée correcte :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
LinearLayout.LayoutParams par = (LinearLayout.LayoutParams) innerLayout.getLayoutParams();
                                         // CORRECT! the enclosing layout is a LinearLayout