Le Tutoriel de Android Fragment

View more categories:

1- Qu'est-ce que Android Fragment?

Pour concevoir une interface, vous pouvez concevoir des fragments et les assembler. Dans cet exemple, je vais vous guider pour travailler avec le fragment.
Et l'événement de processus qui interagit entre 2 fragments.

2- Exemple de l'utilisation Android Fragment

Créez un nouveau projet nommé " AndroidFragment"
Préparez un fichier image, par exemple  andrea.jpg.
  • andrea.jpg
Copiez et collez le fichier  andrea.jpg dans le dossier  mipmap du projet.
Android Studio vous exigera de choisir la qualité d'imagerie qui sera créée. Sélectionnez mipmap-mdpi car c'est la qualité moyenne de l'image.
Ensuite, nous créons le fichier  activity_top.xml:
Sur  Android Studio sélectionnez:
  • File/New/Layout resource file
Saisissez:
  • File name: activity_top.xml
  • Root element: RelativeLayout
  • Directory name: layout
De la même façon, créez le fichier  activity_bottom.xml
Conception de l'interface sur activity_top.xml
activity_top.xml
<?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">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_top_image_text"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_bottom_image_text"
        android:layout_below="@+id/input_top_image_text"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply"
        android:id="@+id/button_apply"
        android:layout_below="@+id/input_bottom_image_text"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
Conception de l'interface sur activity_bottom.xml
SLIDER:
activity_bottom.xml
<?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"
    android:background="@mipmap/andrea">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/top_image_text"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/bottom_image_text"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />


</RelativeLayout>
Chaque fragment correspond à une classe Java. Cette classe est étendue à partir de la classe Fragment.
Créez 2 classes  TopFragment et  BottomFragment et éditez ses codes.
TopFragment .java
package org.o7planning.androidfragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TopFragment  extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 
        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)

        View view= inflater.inflate(R.layout.activity_top, container, false);
        return view;
    }

}
BottomFragment.java
package org.o7planning.androidfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class BottomFragment extends Fragment {

   @Nullable
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
       // Read xml file and return View object.


       // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
       View view= inflater.inflate(R.layout.activity_bottom, container, false);
       return view;
   }

}
Maintenant, vous devez disposer le fragment sur l'interface principale de l' Activity. Ouvrez le fichier activity_main.xml
Sélectionnez  TopFragment:
Et puis, faites glisser et déposez  BottomFragment vers l'interface de l'utilisateur.
Changez  ID pour des  fragment.
  • top_fragment
  • bottom_fragment
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.androidfragment.MainActivity">

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="170dp"
       android:name="org.o7planning.androidfragment.TopFragment"
       android:id="@+id/top_fragment"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:name="org.o7planning.androidfragment.BottomFragment"
       android:id="@+id/bottom_fragment"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_alignRight="@+id/top_fragment"
       android:layout_alignEnd="@+id/top_fragment"
       android:layout_below="@+id/top_fragment" />
   
</RelativeLayout>
OK, vous devez modifier le code des classes MainActivity, TopFragment, BottomFragment pour traiter les événements:
MainActivity.java
package org.o7planning.androidfragment;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

    }


    public void showText(String topImageText, String bottomImageText) {
        BottomFragment bottomFragment
                = (BottomFragment) this.getSupportFragmentManager()
                .findFragmentById(R.id.bottom_fragment);
        bottomFragment.showText(topImageText, bottomImageText);
    }

}
TopFragment.java
package org.o7planning.androidfragment;


import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;

public class TopFragment extends Fragment {

    private EditText inputTopImageText;
    private EditText inputBottomImageText;

    private MainActivity mainActivity;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_top, container, false);

        inputTopImageText = (EditText) view.findViewById(R.id.input_top_image_text);
        inputBottomImageText = (EditText) view.findViewById(R.id.input_bottom_image_text);

        Button applyButton = (Button) view.findViewById(R.id.button_apply);

        applyButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                applyText();
            }
        });

        return view;
    }


 
    // Called when a fragment is first attached to its context.
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        if (context instanceof MainActivity) {
            this.mainActivity = (MainActivity) context;
        }
    }


    private void applyText() {
        String topText = this.inputTopImageText.getText().toString();
        String bottomText = this.inputBottomImageText.getText().toString();

        this.mainActivity.showText(topText, bottomText);
    }
}
BottomFragment.java
package org.o7planning.androidfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class BottomFragment extends Fragment {

    private TextView topText;
    private TextView bottomText;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_bottom, container, false);

        topText = (TextView) view.findViewById(R.id.top_image_text);
        bottomText = (TextView) view.findViewById(R.id.bottom_image_text);

        return view;
    }


    public void showText(String topImageText, String bottomImageText) {
        topText.setText(topImageText);
        bottomText.setText(bottomImageText);
    }
}
Exécutez l'application:

View more categories: