Вопрос по android, android-listview, expandablelistview, android-animation, expandablelistadapter – Развернуть элемент ListView с анимацией

37

у меня естьListView, ПервоначальноListView содержит некоторые данные. Когда пользователь нажимает на элемент, к нему динамически добавляется другой макет, чтобы онВысота будет увеличена.

Прямо сейчас, когда товарВысота s увеличена, она показывает измененный элемент мгновенно. Тем не менее, я хочу, чтобы это было анимировано, чтобы оно увеличивалоВысота постепенно.

Ваш Ответ

5   ответов
33

что я искал то же, что и было задано, я искал способ анимировать расширение элемента списка, когда отображается какой-то новый контент (я просто менял видимость некоторых представлений сGONE вVISIBLE). Я использовал ответmirroredAbstraction чтобы помочь мне применить анимацию перевода (я нене хочу анимацию поворота):

<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">
</translate>

к каждому из взглядов. Это создает приятный эффект, но если присмотреться, элемент списка фактически внезапно расширяется до необходимого размера, а затем анимация сбрасывает представления на место. Но то, что я хотел, это эффект уменьшения элемента списка по мере того, как представления становятся видимыми.

Я нашел именно то, что искал здесь:расширение-ListView-детали

Блоггер имеет ссылку на свой пример с github, здесь:ExpandAnimationExample

Если вы обнаружите, что эти сайты исчезли, пожалуйста, сообщите мне, и я предоставлю свою копию.

он добавил отрицательное поле для содержания, чтобы сделать его видимым, а также установил видимость для:GONE

android:layout_marginBottom="-50dip"

и написал анимацию, управляющую нижним полем:

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();
        }
        ...
    }
}

и это выглядит очень красиво. Я нашел его ответ на этот SO (возможно, дубликат?) Вопрос:

Добавление анимации в ListView для расширения / свертывания контента

Также, пожалуйста, дайте мне знать, если вы знаете другой способ сделать то же самое.

Да, я понимаю ... Я думаю, что мне может понадобиться возможность влиять на динамически добавляемый / создаваемый контент. Так что я тоже все еще ищу. Я хотел бы высказать ваш вопрос, чтобы больше людей увидели его, но вы не были слишком подробны (то есть вы пропустили динамическую часть!), И, по крайней мере, вы должны перефразировать запутывающее утверждение: "Итак, теперь я хочу, чтобы: когдаВысота s увеличивается, он показывает измененный предмет внезапно, но мне нужно анимировать, когда он увеличивает предмет.высота. "Я" David
В этом случае высота элемента ListView известна заранее. Но в моем случае это динамично. Я имею в виду, что высота расширенного макета будет известна во время выполнения. Manjunath
6

Adapter из васListView достичь того, что вы хотите,

Во-первых, создать базовыйanimation.xml файл, создайте папку с именем anim в папке res и затем поместите в нее файл animation.xml.

Например, Я создал образец анимации с именем rotate_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">
</rotate>

Затем создайте экземплярAnimation Object как это

private Animation animation;

Затем в методе getView реализации вашего адаптера сделайте что-то вроде этого

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;
    }
0

. Таким образом, чтобы переключить состояние элемента списка из 2-6 максимум строк, например, это можно сделать. И это также анимированные. Анимация не выглядит ровно, но ...

                            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();
                            }
7

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();

Просто прочитайте руководство разработчика Android, это стоит прочитать:http://developer.android.com/guide/topics/graphics/prop-animation.html

Но имейте в виду, что обработка requestLayout () тяжелая. Потому что один вызов requestLayout () делает каждый соседний элемент, на который влияют визуально, пересчитывает его 'макет. Может быть лучше использовать отрицательное нижнее поле (чтобы скрыть часть вашего элемента под другим) и использовать следующее, чтобы показать его:

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

Конечно, вы можете анимировать только нижнее поле, как предложено в другом ответе на этот вопрос.

14

который работает во всех AndroidS SDK версии.

Ниже смотрите его рабочий и код.

Код Github:https://github.com/LeonardoCardoso/Animated-Expanding-ListView

Для информации на моем сайте:http://android.leocardz.com/animated-expanding-listview/

 

По сути, вам нужно создать собственную TranslateAnimation и пользовательский адаптер списка и, покаДля анимации необходимо обновить текущую высоту элемента списка и уведомить адаптер об этом изменении.

Позволять'перейдите к коду.

Макет списка элементов

<!--?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>

План мероприятий

   <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>

Класс List Item

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;
}
}

Посмотреть Держатель класса

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;
 }
}

Пользовательский класс анимации

    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();
    }
  }

Класс адаптера пользовательского списка

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;
}

}
</listitem></listitem></listitem>

Основная деятельность

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));

    }

}
</listitem></listitem>
Насколько хорошо работает этот код? Видя, как он так часто уведомляет, кажется, что довольно сложно обрабатывать сложные представления ... Pkmmte
В самом деле. Но AFAIK, не уведомляя так часто, просмотр списка теряет себя, если вы прокручиваете его во время анимации. Leonardo Cardoso

Похожие вопросы