Table des matières
Le Tutoriel de Android FrameLayout
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
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.TOP | top | |
| Gravity.CENTER_VERTICAL | center_vertical | |
| Gravity.BOTTOM | bottom | |
| Gravity.START | start | |
| Gravity.END | end | |
| Gravity.CENTER | center | |
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.
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);
}
}
