devstory

Le Tutoriel de Android FrameLayout

  1. Android FrameLayout
  2. L'example de FrameLayout

1. Android FrameLayout

FrameLayout est une disposition (layout) simple, elle peut contenir une ou plusieurs View enfants et elles peuvent se chevaucher (overlap). Vous devez utiliser l'attribut android:layout_gravity pour View enfant pour les localiser.
Plus précisément, FrameLayout a 9 zones de gravité (gravity) comme l'illustration ci-dessous. Remarque: Ce sont des zones imaginaires, cela ne signifie pas que la surface de FrameLayout est divisée en 9 parties.
Lorsqu'une View est ajoutée à FrameLayout, elle est par défaut située dans la zone de gravité "left|top". Prenons un exemple, j'ai ajouté 2 Button à un FrameLayout, par défaut, ils seront dans la zone de gravité "left|top" et vous les verrez se chevaucher.
Utilisez l'attribut android:layout_gravity du button pour ajuster sa position.
La valeur de android:layout_gravity est une combinaison de l'une des valeurs suivantes:
Constant in Java
Value
Description
Gravity.LEFT
left
Gravity.CENTER_HORIZONTAL
center_horizontal
Gravity.RIGHT
right
Gravity.CLIP_HORIZONTAL
clip_horizontal
Gravity.FILL_HORIZONTAL
fill_horizontal
Gravity.TOP
top
Gravity.CENTER_VERTICAL
center_vertical
Gravity.BOTTOM
bottom
Gravity.CLIP_VERTICAL
clip_vertical
Gravity.FILL_VERTICAL
fill_vertical
Gravity.START
start
Gravity.END
end
Gravity.CENTER
center
Gravity.FILL
fill
Vous trouverez ci-dessous une illustration du placement d'une VideoView et d'un MediaController dans un FrameLayout, cela économise de l'espace d'application et apporte une bonne expérience utilisateur.

2. L'example de FrameLayout

Dans cet exemple, je vais placer une ImageView et 2 TextView dans un FrameLayout, puis les positionner via android:layout_gravity.
Exemple d'aperçu:
Show in Portraint screen
Show in Landscape screen
OK, Sur Android Studio, créez un nouveau projet:
  • File > New > New Project > Empty Activity
    • Name: FrameLayoutExample
    • Package name: org.o7planning.framelayoutexample
    • Language: Java
Préparez un file image:
halong.png
Copy file image ci-dessus dans le dossier "drawable" du project:
Conception d'interface de l'application:
Définition des contraintes sur FrameLayout:
Définissez des propriétés importantes pour ImageView pour vous assurer qu'il remplit FrameLayout.
* imageView *
<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    app:srcCompat="@drawable/halong" />
Définissez l'attribut android:layout_gravity pour TextView:
Définissez text, textColor pour TextView:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/halong" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|left"
            android:text="Halong Bay, Vietnam"
            android:textColor="#FFFFFF" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:text="Photo by intrepidtravel.com"
            android:textColor="#FFFFFF" />

    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.framelayoutexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Gravity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Tutoriels de programmation Android

Show More

Tutoriels de programmation Android

Show More

Articles les plus récents

Show More