[JAVA] [Android] Créer un menu coulissant sans utiliser la vue de navigation

Le menu déroulant a été créé avec DialogFragment. C'est une image que le fragment de dialogue couvre sur l'activité.

Créer une animation

Animation qui glisse de gauche à droite (res / anim / slide_in.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="250"
        android:fromXDelta="-100%"
        android:toXDelta="0%" />

    <alpha
        android:duration="250"
        android:fromAlpha="0.8"
        android:toAlpha="1.0" />
</set>

Animation qui glisse de droite à gauche (res / anim / slide_out.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="250"
        android:fromXDelta="0%"
        android:toXDelta="-100%" />

    <alpha
        android:duration="250"
        android:fromAlpha="1.0"
        android:toAlpha="0.2" />
</set>

Définissez le style de l'animation créée dans themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    ....
    <style name="SlideInMenuAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_in</item>
        <item name="android:windowExitAnimation">@anim/slide_out</item>
    </style>
    ....
</resources>

Créer un menu déroulant

Disposition

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/slide_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".SlideInMenuFragment">

    <LinearLayout
        android:id="@+id/menu_area"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!--Marge d'espace à la même hauteur que ActionBar-->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_primary"
            android:minHeight="?android:attr/actionBarSize" />

        <!--Partie menu-->
        <ListView
            android:id="@+id/menu_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</FrameLayout>

Implémentation de DialogFragment

public class SlideInMenuFragment extends DialogFragment {

    public SlideInMenuFragment() {
        // Required empty public constructor
    }

    public static SlideInMenuFragment newInstance() {
        SlideInMenuFragment fragment = new SlideInMenuFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        Dialog dialog = new Dialog(getActivity());
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.fragment_slide_in_menu);

        //Aligner justifié à gauche dans la boîte de dialogue plein écran
        Window window = dialog.getWindow();
        window.getAttributes().windowAnimations = R.style.SlideInMenuAnimation;
        window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        window.setGravity(Gravity.TOP | Gravity.START);
        window.setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);

        //Définir la vue racine de la mise en page
        FrameLayout rootView = dialog.findViewById(R.id.slide_menu);
        onViewCreated(rootView, savedInstanceState);
        return dialog;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        String[] menuArray = {"menu", "menu", "menu"};
        //Définir le contenu du menu
        ListView menu = view.findViewById(R.id.menu_list);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getContext(), android.R.layout.simple_list_item_1, menuArray);
        menu.setAdapter(adapter);
    }
}

Appel par MainActivity

public class MainActivity extends AppCompatActivity {

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

        //Définir un bouton sur le bord gauche de l'ActionBar
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            //L'icône ↓ utilise l'icône de tri standard, mais ce sera bien de la changer en ≡.
            actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_sort_by_size);
        }
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        if (id == android.R.id.home) {
            //Affichage du menu
            FragmentManager fragmentManager = getSupportFragmentManager();
            SlideInMenuFragment fragment = SlideInMenuFragment.newInstance();
            fragment.show(fragmentManager, fragment.getClass().getSimpleName());
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    
}

résultat

Cliquez sur l'icône à gauche de la barre d'actions image.png  ↓ image.png Le menu s'ouvre. Appuyez sur la partie transparente de l'arrière-plan pour fermer le menu.

Remarque

Avec cette implémentation, vous pouvez utiliser des gestes et le menu ne s'affiche pas. J'ai implémenté cette méthode car j'ai dû changer le menu moi-même, mais Après tout, il est préférable d'utiliser NavigationView.

Recommended Posts

[Android] Créer un menu coulissant sans utiliser la vue de navigation
Créer une loterie avec Ruby
Créer un projet Tomcat à l'aide d'Eclipse
Créer un projet Java à l'aide d'Eclipse
Créer une fonction de filtrage en utilisant actes-as-taggable-on
[Kotlin / Android] Créer une vue personnalisée
Créez rapidement un environnement Web à l'aide de Docker
Créer un service d'API RESTful à l'aide de Grape
Créez une fonction de connexion à l'aide de l'option Swift
Réaliser une table de décision sans utiliser le branchement conditionnel
Créez instantanément un environnement Privoxy + Tor à l'aide de Docker
[Android] Créez une nouvelle classe en héritant d'ImageView
Créons une API REST à l'aide de WildFly Swarm.
[Rails] Comment créer un graphique à l'aide de lazy_high_charts
Créez une application Spring Boot à l'aide d'IntelliJ IDEA
Lors de l'exécution d'une jointure externe complète sans utiliser de jointure externe complète
Créer un environnement pour Tomcat et Postgres sur Chromebook sans utiliser le mode développeur
Créez un environnement de développement Java à l'aide de jenv sur votre Mac
J'ai essayé d'utiliser une connexion à une base de données dans le développement Android
Un mémorandum lors de la tentative de création d'une interface graphique à l'aide de JavaFX
Trouvez le reste divisé par 3 sans utiliser de nombre
Créer une fenêtre non rectangulaire sans cadre sans barre de tâches dans JavaFX
Créez un écran d'authentification de connexion à l'aide de la fonction de session