web-dev-qa-db-fra.com

Android - Widget Accordéon

Je regarde la meilleure façon de créer un widget de style accordéon tel que sur cette page . Existe-t-il un moyen d'atteindre le même effet à l'aide de standard Android Toolkit ou dois-je construire un widget personnalisé? Si oui, lequel recommanderiez-vous l'extension du cas échéant?

androidwidgetaccordion
22
Bostone

J'ai poussé View d'accordion Android Projet chez GitHub. Nous l'utilisons pour nos clients, testés sur 2,2, 2.3.x, 3.2 et 4.0.3. Fonctionne plutôt bien pour nous.

Aller ajouter une animation sur plier/se dérouler à l'étape suivante.

Voici petite capture d'écran:

enter image description here

22
Maciej Łopaciński

Et au cas où vous vous demanderiez encore - cela peut être très bien fait avec une paire de bouton/une mise en page empilée à l'intérieur de la disposition linéaire. Pseudo code suit

<LinearLayout Android:orientation="vertical">
    <Button Android:text="Panel 1"/>
    <SomeKindOfLayout Android:id="@+id/panel1">
            <!-- widgets in first panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 2"/>
    <SomeKindOfLayout Android:id="@+id/panel2" Android:visibility="gone">
            <!-- widgets in second panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 3"/>
    <SomeKindOfLayout Android:id="@+id/panel3" Android:visibility="gone">
            <!-- widgets in third panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 4"/>
    <SomeKindOfLayout Android:id="@+id/panel4" Android:visibility="gone">
            <!-- widgets in fourth panel go here -->
    </SomeKindOfLayout></LinearLayout>

Une autre chose à essayer éventuellement est l'empilement expandablicatView-s les uns sur les autres

28
Bostone

Je dois me risquer et dire que la réponse @bostone est la plus appropriée. Je vais vous donner mon code ci-dessous pour que vous puissiez voir. Merci pour le GitHub Maciej łopaciński, mais comme @sudoplz a dit dans les commentaires, il n'y a pas de documentation du tout. Je ne savais pas où commencer. J'essaie de le faire avec Eclipse et Android Studio et je ne pouvais en aucun cas exécuter le projet pour commencer à déterminer comment son travail. En outre, la dernière commission dans ce projet était il y a environ 1 an, quel Cela me fait craindre beaucoup que si quelque chose se passe mal, je serai coincé dans une impasse. Donc, sans plus tarder, voici ma solution basée sur @bostone:

1.- Vous devez d'abord créer un bouton et une mise en page imbriquée dans un ScrollView:

    <ScrollView 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"
        tools:context=".TasksListActivity">


            <Button
                Android:id="@+id/magic_btn"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="Magic Btn"/>
            <LinearLayout
                Android:id="@+id/magic_layout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical"
                Android:visibility="gone">

        </LinearLayout>
</ScrollView>

2.- Après cela, passez à votre Java correspondant, il trouve le bouton et définissez un onclicklistener, à l'intérieur de l'Onclicklistener, vous trouverez la mise en page.

Button findMagicBtn = (Button) findViewById(R.id.magic_btn);
        findMagicBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

3.- Donc maintenant à l'intérieur de l'Onclicklistener, nous trouverons la mise en page. Comme vous pouvez le constater dans la première étape, la mise en page est définie par défaut sur GONE, mais nous devons maintenant la définir visible. Le problème est, comment puis-je le faire aller encore et vice-versa? Nous allons donc ajouter une condition pour obtenir la visibilité de la mise en page et basé sur cela, il sera caché ou apparaître:

Button findMagicBtn = (Button) findViewById(R.id.magic_btn);
        findMagicBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayout findMagicLl = (LinearLayout) findViewById(R.id.magic_layout);
                if (findMagicLl.getVisibility() == View.VISIBLE) {
                    findMagicLl.setVisibility(View.GONE);
                } else {
                    findMagicLl.setVisibility(View.VISIBLE);
                }
            }
        });

Cela peut être mis dessus autant de fois que vous voulez.

Alors maintenant, si vous voulez vraiment le faire ressembler à un accordéon, vous pouvez soutenir le bouton. Vous pouvez mettre une flèche à leur droit, en utilisant par exemple:

findMagicBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.right_arrow, 0);

Vous devriez faire cela à l'intérieur de l'Onclicklistener et utiliser la condition pour modifier la direction de la flèche, en modifiant l'étanchéité (si elle est partie et en basée, et si elle est visible une flèche vers le haut).

En outre, vous pouvez le rendre plus naturel en ajoutant une animation, comme ceci:

ScaleAnimation animation = new ScaleAnimation(1f, 1f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
animation.setDuration(180);
animation.setFillAfter(true);
findMagicLl.startAnimation(animation);

Vous devrez considérer que l'animation ci-dessus doit être effectuée pendant que la vue est visible. Veuillez noter que setFillAfter(true), modifiera la taille du conteneur de manière permanente, donc si vous le faites, peut-être que vous ne voulez pas utiliser VIEW.GONE Plus. Cette question a une explication merveilleuse sur l'animation Animation d'échelle

4
cutiko

Dans mon application, j'ai utilisé la vue d'accordéon de Riya Gayasen. Il était très facile de commencer et de bien travailler. Voici ce que j'ai fait.

  1. Téléchargez le code zip du code source à partir de https://github.com/riyagayasen/androïd_accordion_view .
  2. Décompressez et copiez le dossier 'EasyAccordion' dans le répertoire racine de votre projet (le répertoire contenant le dossier 'App')
  3. Dans votre projet Root Paramètres.Gradle Fichier Ajouter: EasyAccordion. Voici comment mon fichier ressemble à: include ':app',':easyaccordion'
  4. Dans votre application App/Build.Gradle, ajoutez la ligne suivante au bloc de dépendances. implementation 'com.riyagayasen.Android:easyaccordion:1.0.3'
  5. Et c'est tout. Vous pouvez commencer à utiliser le composant à l'intérieur de votre mise en page.
2
Karthik Sankar