FrameLayout (mise en page du cadre)


Introduction à cette section

FrameLayout peut être considéré comme la plus simple des six mises en page. Cette mise en page ouvre directement une zone vide sur l'écran lorsque nous entrons à l'intérieur lors de l'ajout de contrôles. sera placé par défaut dans le coin supérieur gauche de cette zone. Cependant, cette méthode de disposition n'a aucune méthode de positionnement, elle n'est donc pas utilisée dans de nombreux scénarios ; le contrôle. Déterminez que si les tailles des contrôles sont les mêmes, alors seul le composant supérieur peut être vu en même temps. Les contrôles ajoutés par la suite couvriront le précédent, bien que le contrôle soit placé par défaut dans le coin supérieur gauche ! , nous pouvons également transmettre l'attribut layout_gravity , désigné à d'autres emplacements ! En plus de vous montrer l'exemple le plus simple, cette section vous apporte également deux exemples intéressants. Si vous êtes intéressé, vous pouvez y jeter un oeil

1. . Attributs communs

Il n'y a que deux attributs de FrameLayout, mais avant d'en parler, introduisons une chose :

Image de premier plan : elle est toujours en haut de la disposition du cadre, directement. face à l'image de l'utilisateur, mais il ne s'agira pas d'images superposées.

Deux attributs :

  • android:foreground:*Définir l'image de premier plan du conteneur de mise en page de cadre

  • android:foregroundGravity:Définissez la position où l'image de premier plan est affichée

Exemple de démonstration

1) L'exemple le plus simple

🎜>

Rendu de l'opération :

1.png

Le code d'implémentation est le suivant : <🎜>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".MainActivity"     
    androïde : foreground="@drawable/logo"    
    android:foregroundGravity="right|bottom">    
    
    <TextView    
        android:layout_width="200dp"    
        android:layout_height="200dp"    
        android:background="../style /images/android-tutorial-framelayout. html" />    
    <TextView    
        android:layout_width="150dp"    
        android:layout_height="150dp"    
        android:background="../style/images/android-tutorial- framelayout.html" / >    
     <TextView    
        android:layout_width="100dp"    
        android:layout_height="100dp"    
        android:background="../style/images/android-tutorial -framelayout.html" / >    
        
</FrameLayout>

Analyse du code : C'est très simple. Les trois TextViews sont définies sur des tailles et des couleurs d'arrière-plan différentes, et elles sont couvertes en séquence. Ensuite, celle dans le coin inférieur droit est l'image de premier plan. android:foreground="@drawable/logo" définit l'image de l'image de premier plan, android:foregroundGravity="right|bottom" définit la position de l'image de premier plan dans le coin inférieur droit

2) La jolie fille bouge avec le doigt

L'effet est le suivant :

2.gif

Analyse du processus de mise en œuvre :

  • étape 1 : définissez d'abord la mise en page main.xml sur un FrameLayout vide et définissez un arrière-plan d'image pour

  • étape 2 : Créer une nouvelle classe de composants personnalisés MeziView qui hérite de la classe View, et initialiser les coordonnées initiales de la vue dans la méthode de construction

  • étape 3 : réécrivez la méthode onDraw(), instanciez une classe de pinceau vide Paint

  • étape 4 : appelez BitmapFactory.decodeResource() pour générer un objet bitmap

  • étape 5 : appelez canvas.drawBitmap() dessine l'objet bitmap de la fille

  • étape 6 : Déterminez si l'image est recyclée, sinon l'image est forcée d'être recyclé

  • étape 7 : Obtenir l'objet de mise en page frame dans le code Java principal et instancier une classe MeziView

  • étape 8 : Ajouter un événement tactile écoutez l'objet mezi instancié et remplacez la méthode onTouch, modifiez les coordonnées X, Y de mezi et appelez la méthode de redessination invalidate()

  • étape 9 : Ajoutez l'objet mezi au cadre mise en page

Code de mise en page : main_activity.xml

<FrameLayout xmlns:android="http://schemas.android. com/apk/res/android"
xmlns :tools="http://schemas.android.com/tools"
android:id="@+id/mylayout"
android:layout_width=" match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="../style/images/back" >
</FrameLayout>

PersonnaliséMeziView.java

package com.jay.example.framelayoutdemo2

importer android.content.Context
importer android. graphiques.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint; 🎜>public class MeziView extends View {
//Définir les variables pertinentes , suivi des coordonnées X, Y de la position d'affichage de la fille
public float bitmapX;
public float bitmapY
public MeziView(Context context) {
super(context); Définissez les coordonnées de départ de la fille
bitmapX = 0;
bitmapY = 200;
}

//Réécriture de la méthode onDraw()
@Override
protected void onDraw( Canvas canvas) {
super.onDraw(canvas);
//Créer et instancier l'objet Paint
Paint paint = new Paint();
//Générer un objet bitmap basé sur l'image
Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.s_jump);
//Dessine une jolie fille
canvas.drawBitmap(bitmap, bitmapX, bitmapY,paint); //Déterminez si l'image est recyclée, sinon forcez la récupération de l'image
if(bitmap.isRecycled())
{
bitmap
}
}
}

MainActivity.java :

package com.jay.example.framelayoutdemo2 ;  
  
importer android.os.Bundle ;  
importer android.view.MotionEvent ;  
importer android.view.View ;  
importer android.view.View.OnTouchListener ;  
importer android.widget.FrameLayout ;  
importer android.app.Activity ;  
  
  
public class MainActivity étend Activity {  
  
    @Override   
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate (état d'instance enregistré);  
        setContentView(R.layout.activity_main);  
        FrameLayout frame = (FrameLayout) findViewById(R.id.mylayout);  
        final MeziView mezi = new MeziView(MainActivity.this);  
        //为我们的萌妹子添加触摸件监听器  
        mezi.setOnTouchListener(new OnTouchListener() {  
            @Over ride  
            public boolean onTouch (View view, MotionEvent event) {  
                 / /设置妹子显示的位置  
                mezi.bitmapX = event.getX() - 150;  
                mezi.bitmapY = event.getY() - 150;  
                //调用重绘方法  
                mezi. invalidate();  
                return true ;  
             
        });  
        frame.addView(mezi);  
    }  
}

Explication du code : Voir les étapes, c'est très simple, il suffit de personnaliser une classe View, de remplacer la méthode redraw, puis d'ajouter un temps de contact pour celle-ci dans l'activité et de remplacer la méthode onTouch pour obtenir le temps de contact Cliquez sur le focus, et vous avez également besoin de -150, sinon cette coordonnée est le coin supérieur gauche de la vue personnalisée, puis appelez la méthode de redessination invalidate() et enfin ajoutez-la à la disposition du cadre !

Téléchargement du code :FrameLayoutDemo2.zip

3) Running cute girl

Le rendu est le suivant :

3.gif

Processus de mise en œuvre :

  • étape 1 : Définir une mise en page FrameLayout vide et définir le position de l'image de premier plan au centre Position

  • étape 2 : obtenez la disposition FrameLayout dans l'activité, créez un nouvel objet Handler, remplacez la méthode handlerMessage() et appelez l'image- méthode mise à jour

  • étape 3 : Personnalisez une méthode move() et définissez dynamiquement le bitmap affiché par l'image de premier plan via switch

  • étape 4 : Créez un nouveau timing dans l'objet timer de la méthode onCreate(), remplacez la méthode run et envoyez des informations vides au gestionnaire toutes les 170 millisecondes

Le code d'implémentation est le suivant :

fichier de mise en page : main_activity.xml :

<FrameLayout xmlns:android="http://schemas.android.com/apk /res/android"
xmlns:tools=" http://schemas.android.com/tools" 
android:id="@+id/myframe" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android :foregroundGravity="center"> 
</FrameLayout>

MainActivity.java :


package com.jay.example.framelayoutdemo3;

importer java.util.Timer;
importer java.util.TimerTask; Gestionnaire ;
importer android.os.Message ;
importer android.view.View ;
importer android.view.OnClickListener ;
importer android.widget .FrameLayout ; app.Activity;
import android.graphics.drawable.Drawable;
public class MainActivity extends Activity {
//Initialiser les variables, disposition du cadre
FrameLayout frame = null
//Personnaliser un objet de classe handler pour mettre à jour régulièrement l'interface utilisateur
Handler handler = new Handler()
int i = 0;                                                             
public void handleMessage(Message msg) {
//Déterminez si le message est envoyé par cette application
if(msg.what == 0x123)
                                                                                        i % 8 );                                                } ;          
            
    //定义走路时切换图片的方法   
    void move(int i)    
    {    
        Drawable a = getResources().getDrawable(R.drawable.s_1);    
        Drawable b = getResources().getDrawable(R.drawable.s_2);    
        Drawable c = getResources().getDrawable(R.drawable.s_3);    
        Drawable d = getResources().getDrawable(R.drawable.s_4);    
        Drawable e = getResources().getDrawable(R.drawable.s_5);    
        Drawable f = getResources().getDrawable(R.drawable.s_6);    
        Drawable g = getResources().getDrawable(R.drawable.s_7);    
        Drawable h = getResources().getDrawable(R.drawable.s_8);    
        /? 🎜>                frame.setForeground(a);    
                pause ;    
            cas 1 :    
                frame.setForeground(b);    
                pause ;    
            cas 2 :    
                frame.setForeground(c);    
                casser;    
            cas 3 :    
                frame.setForeground(d);    
                pause ;    
            cas 4 :    
               frame.setForeground(e);    
                pause ;    
            cas 5 :    
                frame.setForeground(f);    
                pause ;    
            cas 6 :    
                frame.setForeground(g);    
                pause ;    
            cas 7 :    
                frame.setForeground(h);    
                pause ;    
        }    
    }    
        
    @Override    
    protected void onCreate(Bundle savedInstanceState) {    
        super.onC reate(savedInstanceState);    
        setContentView(R.layout.activity_main);    
            
        frame = (FrameLayout) findViewById(R.id.myframe);    
//Définissez un objet timer et envoyez régulièrement des informations au gestionnaire
new Timer().schedule(new TimerTask() {
public void run() { 
                                           Envoyer un message vide pour notifier au système de modifier l'image de premier plan. 
}





Analyse du code :
Le code est également très simple. Il s'agit de définir un objet gestionnaire à utiliser. actualisez l'image de premier plan de la disposition des images et définissez un minuteur pour envoyer des informations de synchronisation toutes les 170 millisecondes, i++; move(i%8); C'est parce que nous utilisons 8 images comme matériel d'animation !


Téléchargement du code :

FrameLayoutDemo3.zipRésumé de cette section

Cette section présente FrameLayout (mise en page du cadre), maîtrisant principalement les attributs foreground et foregroundGravity Utilisez-le! La disposition des cadres est légèrement plus utilisée que la disposition des tableaux précédente ! Si vous êtes intéressé, vous pouvez essayer d'écrire quelques petits exemples comme l'auteur !

←
→