web-dev-qa-db-fra.com

Développer l'élément ListView avec animation

J'ai un ListView. Initialement, la variable ListView contient des données. Lorsque l'utilisateur clique sur un élément, une autre mise en page est ajoutée de manière dynamique à cet élément, ce qui augmente sa hauteur.

À l'heure actuelle, lorsque la hauteur de l'élément est augmentée, l'élément modifié est affiché instantanément. Cependant, ce que je veux, c'est que cela soit animé afin d'augmenter progressivement la hauteur de l'objet.

androidandroid-listviewandroid-animationexpandablelistviewexpandablelistadapter
37
Manjunath

Je pense que je recherchais le même message que celui demandé, mais aussi un moyen d'animer le développement de l'élément listview lorsqu'un nouveau contenu est affiché (je changeais simplement la visibilité de GONE sur VISIBLE). J'avais utilisé la réponse de mirroredAbstraction pour m'aider à appliquer une animation de traduction (je ne voulais pas d'animation avec rotation):

<translate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:interpolator="@Android:anim/linear_interpolator"
Android:fromYDelta="0"
Android:toYDelta="-100%p"
Android:duration="500"   
/>

à chacune des vues. Cela crée un effet de Nice, mais en regardant de plus près, l'élément de liste a été soudainement étendu à toute la taille requise, puis l'animation a mis les vues en place. Mais ce que je voulais, c’était l’effet de l’élément de listview de plus en plus petit au fur et à mesure que les vues devenaient visibles.

J'ai trouvé exactement ce que je cherchais ici: expand-listview-items

Le blogueur a un lien vers son exemple de github, ici: ExpandAnimationExample

Si vous constatez que ces sites ont disparu, veuillez m'en informer et je rendrai ma copie disponible.

il a mis une marge négative sur le contenu pour qu'il entre en visibilité, tout en fixant la visibilité à GONE:

Android:layout_marginBottom="-50dip"

et a écrit une animation manipulant la marge inférieure:

public class ExpandAnimation extends Animation {
...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        if (interpolatedTime < 1.0f) {

            // Calculating the new bottom margin, and setting it
            mViewLayoutParams.bottomMargin = mMarginStart
                    + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

            // Invalidating the layout, making us seeing the changes we made
            mAnimatedView.requestLayout();
        }
        ...
    }
}

et ça a l'air très gentil. J'ai trouvé sa réponse à cette SO question (duplicata possible?):

Ajouter une animation à un ListView afin de développer/réduire le contenu

Aussi, s'il vous plaît laissez-moi savoir si vous connaissez une autre façon de faire la même chose.

34
David

J'ai implémenté un code simple qui fonctionne dans toutes les versions de sdk d'Android.

Voir ci-dessous son fonctionnement et le code.

Code Github: https://github.com/LeonardoCardoso/Animated-Expanding-ListView

Pour des informations sur mon site web: http://Android.leocardz.com/animated-expanding-listview/

normalaccordion

En gros, vous devez créer une TranslateAnimation personnalisée et un adaptateur de liste personnalisé et, pendant l'animation, mettre à jour la hauteur actuelle de l'élément listview et informer l'adaptateur de cette modification.

Allons au code.

  1. Mise en liste des éléments

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:id="@+id/text_wrap"
       Android:layout_width="match_parent"
       Android:layout_height="wrap_content"
       Android:orientation="horizontal"
       Android:paddingBottom="@dimen/activity_vertical_margin"
       Android:paddingLeft="@dimen/activity_horizontal_margin"
       Android:paddingRight="@dimen/activity_horizontal_margin"
       Android:paddingTop="@dimen/activity_vertical_margin" >

       <TextView
           Android:id="@+id/text"
           Android:layout_width="match_parent"
           Android:layout_height="wrap_content"
           Android:textSize="18sp" >
       </TextView>

</LinearLayout>

  2. Mise en page de l'activité

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

          <ListView
              Android:id="@+id/list"
              Android:layout_width="match_parent"
              Android:layout_height="wrap_content"
              Android:divider="@Android:color/black"
              Android:dividerHeight="3dp" >
          </ListView>

      </RelativeLayout>

  3. Liste d'élément de classe

    public class ListItem {

private String text;
private int collapsedHeight, currentHeight, expandedHeight;
private boolean isOpen;
private ListViewHolder holder;
private int drawable;

public ListItem(String text, int collapsedHeight, int currentHeight,
        int expandedHeight) {
    super();
    this.text = text;
    this.collapsedHeight = collapsedHeight;
    this.currentHeight = currentHeight;
    this.expandedHeight = expandedHeight;
    this.isOpen = false;
    this.drawable = R.drawable.down;
}

public String getText() {
    return text;
}

public void setText(String text) {
    this.text = text;
}

public int getCollapsedHeight() {
    return collapsedHeight;
}

public void setCollapsedHeight(int collapsedHeight) {
    this.collapsedHeight = collapsedHeight;
}

public int getCurrentHeight() {
    return currentHeight;
}

public void setCurrentHeight(int currentHeight) {
    this.currentHeight = currentHeight;
}

public int getExpandedHeight() {
    return expandedHeight;
}

public void setExpandedHeight(int expandedHeight) {
    this.expandedHeight = expandedHeight;
}

public boolean isOpen() {
    return isOpen;
}

public void setOpen(boolean isOpen) {
    this.isOpen = isOpen;
}

public ListViewHolder getHolder() {
    return holder;
}

public void setHolder(ListViewHolder holder) {
    this.holder = holder;
}

public int getDrawable() {
    return drawable;
}

public void setDrawable(int drawable) {
    this.drawable = drawable;
}
}

  4. Voir la classe titulaire

    public class ListViewHolder {
 private LinearLayout textViewWrap;
 private TextView textView;

 public ListViewHolder(LinearLayout textViewWrap, TextView textView) {
    super();
    this.textViewWrap = textViewWrap;
    this.textView = textView;
 }

 public TextView getTextView() {
        return textView;
 }

 public void setTextView(TextView textView) {
    this.textView = textView;
 }

 public LinearLayout getTextViewWrap() {
    return textViewWrap;
 }

 public void setTextViewWrap(LinearLayout textViewWrap) {
    this.textViewWrap = textViewWrap;
 }
}

  5. Cours d'animation personnalisé

        public class ResizeAnimation extends Animation {
    private View mView;
    private float mToHeight;
    private float mFromHeight;

    private float mToWidth;
    private float mFromWidth;

    private ListAdapter mListAdapter;
    private ListItem mListItem;

    public ResizeAnimation(ListAdapter listAdapter, ListItem listItem,
            float fromWidth, float fromHeight, float toWidth, float toHeight) {
        mToHeight = toHeight;
        mToWidth = toWidth;
        mFromHeight = fromHeight;
        mFromWidth = fromWidth;
        mView = listItem.getHolder().getTextViewWrap();
        mListAdapter = listAdapter;
        mListItem = listItem;
        setDuration(200);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float height = (mToHeight - mFromHeight) * interpolatedTime
                + mFromHeight;
        float width = (mToWidth - mFromWidth) * interpolatedTime + mFromWidth;
        LayoutParams p = (LayoutParams) mView.getLayoutParams();
        p.height = (int) height;
        p.width = (int) width;
        mListItem.setCurrentHeight(p.height);
        mListAdapter.notifyDataSetChanged();
    }
  }

  6. Classe d'adaptateur de liste personnalisée

    public class ListAdapter extends ArrayAdapter<ListItem> {
private ArrayList<ListItem> listItems;
private Context context;

public ListAdapter(Context context, int textViewResourceId,
    ArrayList<ListItem> listItems) {
super(context, textViewResourceId, listItems);
this.listItems = listItems;
this.context = context;
}

@Override
@SuppressWarnings("deprecation")
public View getView(int position, View convertView, ViewGroup parent) {
ListViewHolder holder = null;
ListItem listItem = listItems.get(position);

if (convertView == null) {
    LayoutInflater vi = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = vi.inflate(R.layout.list_item, null);

    LinearLayout textViewWrap = (LinearLayout) convertView
            .findViewById(R.id.text_wrap);
    TextView text = (TextView) convertView.findViewById(R.id.text);

    holder = new ListViewHolder(textViewWrap, text);
} else
    holder = (ListViewHolder) convertView.getTag();

holder.getTextView().setText(listItem.getText());

LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT,
        listItem.getCurrentHeight());
holder.getTextViewWrap().setLayoutParams(layoutParams);

holder.getTextView().setCompoundDrawablesWithIntrinsicBounds(
        listItem.getDrawable(), 0, 0, 0);

convertView.setTag(holder);

listItem.setHolder(holder);

return convertView;
}

}

  7. Activité principale

    public class MainActivity extends Activity {

private ListView listView;
private ArrayList<ListItem> listItems;
private ListAdapter adapter;

private final int COLLAPSED_HEIGHT_1 = 150, COLLAPSED_HEIGHT_2 = 200,
    COLLAPSED_HEIGHT_3 = 250;

private final int EXPANDED_HEIGHT_1 = 250, EXPANDED_HEIGHT_2 = 300,
    EXPANDED_HEIGHT_3 = 350, EXPANDED_HEIGHT_4 = 400;

private boolean accordion = true;

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

listView = (ListView) findViewById(R.id.list);

listItems = new ArrayList<ListItem>();
mockItems();

adapter = new ListAdapter(this, R.layout.list_item, listItems);

listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view,
            int position, long id) {
        toggle(view, position);
    }
});
}

private void toggle(View view, final int position) {
ListItem listItem = listItems.get(position);
listItem.getHolder().setTextViewWrap((LinearLayout) view);

int fromHeight = 0;
int toHeight = 0;

if (listItem.isOpen()) {
    fromHeight = listItem.getExpandedHeight();
    toHeight = listItem.getCollapsedHeight();
} else {
    fromHeight = listItem.getCollapsedHeight();
    toHeight = listItem.getExpandedHeight();

    // This closes all item before the selected one opens
    if (accordion) {
        closeAll();
    }
}

toggleAnimation(listItem, position, fromHeight, toHeight, true);
}

private void closeAll() {
int i = 0;
for (ListItem listItem : listItems) {
    if (listItem.isOpen()) {
        toggleAnimation(listItem, i, listItem.getExpandedHeight(),
                listItem.getCollapsedHeight(), false);
    }
    i++;
}
}

private void toggleAnimation(final ListItem listItem, final int position,
    final int fromHeight, final int toHeight, final boolean goToItem) {

ResizeAnimation resizeAnimation = new ResizeAnimation(adapter,
        listItem, 0, fromHeight, 0, toHeight);
resizeAnimation.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        listItem.setOpen(!listItem.isOpen());
        listItem.setDrawable(listItem.isOpen() ? R.drawable.up
                : R.drawable.down);
        listItem.setCurrentHeight(toHeight);
        adapter.notifyDataSetChanged();

        if (goToItem)
            goToItem(position);
    }
});

listItem.getHolder().getTextViewWrap().startAnimation(resizeAnimation);
}

private void goToItem(final int position) {
listView.post(new Runnable() {
    @Override
    public void run() {
        try {
            listView.smoothScrollToPosition(position);
        } catch (Exception e) {
            listView.setSelection(position);
        }
    }
});
}

private void mockItems() {
listItems
        .add(new ListItem(
                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_1));

listItems
        .add(new ListItem(
                "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_2));

listItems
        .add(new ListItem(
                "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                EXPANDED_HEIGHT_3));

listItems
        .add(new ListItem(
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
                COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                EXPANDED_HEIGHT_3));

listItems
        .add(new ListItem(
                "Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_4));

    }

}
15
Leonardo Cardoso

En utilisant value animator, la solution a l'air bien:

ValueAnimator animator = ValueAnimator.ofInt(100, 300);
animator.setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
    listViewItem.getLayoutParams().height = (Integer) animation.getAnimatedValue();
    listViewItem.requestLayout();
  }
});
animator.start();

Il suffit de lire le guide du développeur Android, il convient de lire: http://developer.Android.com/guide/topics/graphics/prop-animation.html

Mais gardez à l'esprit que le traitement de requestLayout () est lourd. Dans la mesure où un appel de requestLayout () crée chaque élément proche affecté visuellement, recalculez sa présentation. Il peut être préférable d’utiliser une marge inférieure négative (pour masquer une partie de votre élément sous une autre) et d’utiliser ce qui suit pour l’afficher:

listViewItem.setTranslationY((Integer) animation.getAnimatedValue());

Bien entendu, vous ne pouvez animer que la marge inférieure, comme le propose une autre réponse à cette question.

7
Deepscorn

Vous devrez implémenter l'animation dans Adapter de ListView pour obtenir ce que vous voulez,

Commencez par créer un fichier animation.xml de base, créez un dossier nommé anim dans le dossier res puis placez-y votre fichier animation.xml.

Par exemple J'ai créé un exemple d'animation nommé rotation_animation.xml

<?xml version="1.0" encoding="UTF-8"?>
<rotate
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="0"
    Android:toDegrees="360"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:duration="400" />

Puis créez une instance de AnimationObject comme ceci 

private Animation animation;

Puis, dans la méthode getView de votre implémentation d’adaptateur, faites quelque chose comme ceci 

public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        ViewHolder viewHolder;
        if (convertView == null) {
            LayoutInflater li = (LayoutInflater) mContext
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = li.inflate(R.layout.my_layout, null);
            viewHolder = new ViewHolder(v);
            v.setTag(viewHolder);

        } else {
            viewHolder = (ViewHolder) v.getTag();
        }

        viewHolder.mAppName.setText("SomeText");
        viewHolder.mAppImage.setImageDrawable(R.drawable.someImage);
        animation = AnimationUtils.loadAnimation(mContext, R.anim.my_animation);
        v.startAnimation(animation);
        return v;
    }
6
Arif Nadeem

Mon cas d'utilisation est simplement d'avoir plus ou moins de texte affiché. Donc, pour basculer l’état d’un élément listview de 2 à 6 lignes maximum, par exemple, on peut le faire. Et c'est aussi animé. L'animation n'a pas l'air exactement lisse mais ...

                            if(!textDescriptionLenghtToggle) { // simple boolean toggle
                                ObjectAnimator animation = ObjectAnimator.ofInt(
                                        textViewContainingDescription,
                                        "maxLines",
                                        6);
                                animation.setDuration(300);
                                animation.start();
                            } else {
                                ObjectAnimator animation = ObjectAnimator.ofInt(
                                        textViewContainingDescription,
                                        "maxLines",
                                        2);
                                animation.setDuration(300);
                                animation.start();
                            }
0
user7023213